SpinnerStyle not working on Silverlight NumericUpDownControl - silverlight

I have a NumericUpDown control in Silverlight that I want to not have a spinner.
<Style x:Key="NoSpinner" TargetType="toolkit:Spinner">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
the control:
<toolkit:NumericUpDown SpinnerStyle="{StaticResource NoSpinner}" />
But the spinner still shows! I am doing this the way the author of this control suggests (link).
I know that the resource is being found. No errors are given, and I am able to apply other styles defined in the same area.

I didn't have Blend, which makes it really difficult to edit the templates of these controls if you don't have access to what the standard template is. The solution to this was getting a preview copy of blend and using it to re-template the control.
<Style TargetType="toolkit:NumericUpDown" x:Key="InputNumericUpDown">
<Setter Property="Width" Value="111" />
<Setter Property="Height" Value="23" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="5,0,0,5"/>
<Setter Property="Template"><!-- This template was generated in Blend -->
<Setter.Value>
<ControlTemplate TargetType="toolkit:NumericUpDown">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<toolkit:ButtonSpinner x:Name="Spinner" HorizontalContentAlignment="Stretch" MinWidth="35" VerticalContentAlignment="Stretch" IsTabStop="False">
<TextBox x:Name="Text" AcceptsReturn="False" BorderThickness="0" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="20" TextAlignment="Right" TextWrapping="NoWrap" Text="{TemplateBinding Value}" IsTabStop="True">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" Padding="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
</toolkit:ButtonSpinner>
<Border x:Name="DisabledVisualElement" Background="#A5FFFFFF" CornerRadius="2.5,2.5,2.5,2.5" IsHitTestVisible="false" Opacity="0"/>
<Border x:Name="FocusVisualElement" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" IsHitTestVisible="False" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Template part is the only part that came from blend, but that style is what I am using for NumericUpDowns to make it to where you tab once to get to the control and once to get out.

Related

OnFocus change Foreground color of Button Content

I have Button :
<Button Grid.Column="0" Style="{StaticResource BodyPartLable}" Margin="0, 5, 0, 0" PreviewMouseLeftButtonDown="ButtonNeck_OnPreviewMouseDown" PreviewMouseLeftButtonUp="ButtonNeck_OnPreviewMouseUp">
<Grid Width="200" Height="100">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextAlignment="Right" Text="+1" Margin="0,3,5,0" Foreground="White" />
<TextBlock Grid.Row="1" Foreground="#c0b6d1" FontFamily="Segoe UI Semibold" MouseRightButtonDown="Neck_EditStarted" FontSize="18" Margin="13,-28,0,0">
<TextBox Margin="-5,0,0,0" Name="sizeNeck" Background="#FF61596F" Foreground="Tomato" Height="60" IsEnabled="False" BorderBrush="Transparent" FontSize="40"
ContextMenu="{x:Null}" ContextMenuService.IsEnabled="false" MaxLength="6"
LostFocus="TextBox_LostFocus" Tag="BackCollarHeightUI" Text="55"></TextBox>
<LineBreak/>
<TextBlock Name="NecktLb" Text="Neck"/><Span> (</Span><Span><TextBlock Text="inch"/></Span><Span>)</Span>
</TextBlock>
</Grid>
</Button>
And Style :
<Style x:Key="BodyPartLable" TargetType="Button">
<Setter Property="BorderBrush" Value="#FFFFFFFF"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="12,0,0,0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="PointerOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<!--<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>-->
<ColorAnimation Duration="0" To="#FF826C83" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border"/>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" CornerRadius="3" Padding="0" Background="#FF61596F" Height="120" Width="220">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" UseLayoutRounding="True" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="0"/>
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="White" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="Black" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For VisualState Focused I should change Text Color of Button content to White.
'' this code doesn't work in my case, but It's only solutions that I can find on StackOverflow.
Upd : On Button Click I set this button focused from code-behind
Define styles for text blocks By using a DataTriggers and Binding Your Property to the Button triggers and Applye this to all your Button content in this TextBlock, code Below ...
<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Button,AncestorLevel=1}, Path=IsFocused}" Value="True">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>

Silverlight transparent textbox background

I have a RadGridView (from Telerik) and I'm trying to be able to select the content of a cell.
So I have a cell template :
<telerik:GridViewDataColumn Header="{Binding Source={StaticResource ResourceStrings}, Path=ResourceStrings.Value}"
DataMemberBinding="{Binding Value}" UniqueName="Value" Width="2*">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding Value}" IsReadOnly="True" Style="{StaticResource ReadOnlyStyle}" />
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
With my Style for the TextBox :
<Style x:Key="ReadOnlyStyle" TargetType="TextBox">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled" />
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
<Grid>
<Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}"/>
</Border>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border x:Name="FocusVisualElement" Margin="1" IsHitTestVisible="False" Opacity="0" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the result :
How can I manage to remove this white background ?
Thanks
edit : In fact, We already had a textbox style that works with transparency and it works... I will post it later...

How to highlight selected item in list box windows phone?

I am developing a windows phone application. I placed list box control in my app and displayed a list. I need to highlight the selected row with a blue color. How can I do that ?. I tried a code. But its not working. I add the code I used below. Please help.
<ListBox Margin="0,0,0,0" Name="MyList" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Transparent" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
<StackPanel>
<TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" ></TextBlock>
</StackPanel>
<StackPanel Margin="100,0,0,0">
<Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
</StackPanel>
</StackPanel>
<Rectangle Fill="Gray" Height="1" HorizontalAlignment="Stretch" Width="440" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Style:
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My list is like the below image
When I click on the option 2 . I want to change the list box like below image and when remove the click I navigate to another page.
you can add a prop "isselected" in your datacontext struct behind.
and += the list's event "SelectionChanged"
you can get context data from the handle args :
public IList AddedItems { get; }
public IList RemovedItems { get; }
change their isselected prop.
Method 1
Move the DataTemplate to a user control. Create a Boolean dependency property IsSelected in it. And put your stackpanel inside a border control whose background you have to toggle on based of its boolean value. I hope that it helps.
Method 2
Create a boolean property inside your data object. Bind it to a border element placed inside your datatemplate.
<Grid>
<Border Background="Blue" Visibility="{Binding IsSelcted}" Canvas.ZIndex="-1"/>
<StackPanel Background="Transparent" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
<StackPanel>
<TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" >
</TextBlock>
</StackPanel>
<StackPanel Margin="100,0,0,0">
<Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
</StackPanel>
</StackPanel>
</Grid>
You can toggle the boolean property (IsSeleced) of the listBox.SelectedItem in the selectionchanged Event
Note: You need to keep a reference of the old selected item and make its selected boolean false before making the new one as true.
I hope it helps.
use this code to create your style for list box and here i make background transparent , modify code according your requirements..
paste this top of mainpage.xaml but after where all references is complete
<Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Transparent"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="border" Orientation="Horizontal">
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and point this in your listbox
<ListBox ItemContainerStyle="{StaticResource CustomListBoxItemStyle}">

WPF XAML Animation property path not working

I'm trying to animate the content of a metro styled button.
My problem is that the content of the button does not change color.
The foreground color does not change.
Here's my button's style:
<Style x:Key="MetroButtonStyle"
TargetType="Button">
<Setter Property="MinWidth"
Value="40"/>
<Setter Property="Width"
Value="100"/>
<Setter Property="MinHeight"
Value="88"/>
<Setter Property="HorizontalAlignment"
Value="Center"/>
<Setter Property="Foreground"
Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="AppButton"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="MouseOverEllipse"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="PressedEllipse"/>
<ColorAnimation Duration="0"
To="Black"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="EllipseInnerContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0"
To="#7F8D8D8D"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="EllipseInnerContent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center">
<Grid Margin="0,14,0,5"
HorizontalAlignment="Center"
MinWidth="40">
<Ellipse x:Name="PressedEllipse"
Fill="{TemplateBinding Foreground}"
Opacity="0"
Width="40"
Height="40"/>
<Ellipse x:Name="MouseOverEllipse"
Fill="#7F8D8D8D"
Opacity="0"
Width="40"
Height="40"/>
<Ellipse Fill="Transparent"
Stroke="{TemplateBinding Foreground}"
StrokeThickness="2"/>
<ContentPresenter x:Name="EllipseInnerContent"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
<TextBlock x:Name="LabelText"
TextWrapping="Wrap"
HorizontalAlignment="Center"
FontFamily="Segoe UI"
FontSize="12"
Text="{TemplateBinding Tag}"
Foreground="{TemplateBinding Foreground}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's is how i use it.
This does not works:
<Button Style="{StaticResource MetroButtonStyle}"
Tag="Blah">
<TextBlock Text="XXX"/>
</Button>
This works:
<Button Style="{StaticResource MetroButtonStyle}"
Tag="Blah"
Content="XXX"/>
You have
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="EllipseInnerContent"
in your animations, where EllipseInnerContent is a ContentPresenter and there's no Foreground property on ContentPresenter.
Change it to ContentControl.
Also, when putting a TextBlock as a content of a control, it will inherit the foreground of the page\user control that it's part of. Use DataTemplate instead to have the TextBlock created for you and then it will inherit the foreground from the button.

Silverlight TreeView Disable Horizontal Stretching

I have a TreeView and I'm attempting to confine it to the dimensions of its parent. I'm using SL4 TextTrimming to trim the TextBlock that displays in the template however I'm not seeing the width of the TreeView bound to that of the parent so the TextBlocks containing long text push out the width of the TreeView.
I've tried disabling the horizontal scroll bar, binding the Width to the parent, and fiddling with the HorizontalAlignment as well as HorizontalContentAlignment but I'm not having any luck. Any input is greatly appreciated.
the reason that disabling the horizontal scrollbar doesn't work is because in the default TreeView style, the scrollviwer's HorizontalScrollBarVisibility is set to Auto. What you can do is to create your own style and make it TemplateBinding to the parent.
<Style TargetType="sdk:TreeView">
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Cursor" Value="Arrow"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="BorderBrush" Value="#FF000000"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:TreeView">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="ValidationToolTip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
<Border Background="{TemplateBinding Background}" Margin="1" Padding="{TemplateBinding Padding}">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="Transparent" BorderThickness="0" Background="{x:Null}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" TabNavigation="Once" VerticalScrollBarVisibility="Auto">
<ItemsPresenter Margin="5"/>
</ScrollViewer>
</Border>
</Border>
<Border x:Name="Validation" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" CornerRadius="2" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="ValidationToolTip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource CommonValidationToolTipTemplate}"/>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#FFFFFFFF" Margin="-1,3,0,0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After applying this style you should have a horizontal scrollbar disabled treeview. Then you need to set the max width of your textblock to allow the ellipsis to show.
Please let me know if this helps. :)

Resources