How to center treeView elements in Silverlight in a horizontal treeview? - silverlight

I need to do an organization chart creator, so I choose the treeView user control.
I found the next example to make the items horizontal:
Changing the TreeView ItemsPanel orientation has no effect
I put the style for all the elements, and now the children are horizontal and centered :)
Except for the Parents! How can I center the parents? Please help
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Style TargetType="sdk:TreeViewItem" x:Key="TreeViewItemStyle">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<sdk:TreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<sdk:TreeViewItem Header="Root" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<sdk:TreeViewItem Header="Alfa" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<sdk:TreeViewItem Header="Alfa child1" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
<sdk:TreeViewItem Header="Alfa child2" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
<sdk:TreeViewItem Header="Alfa child3" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
</sdk:TreeViewItem>
<sdk:TreeViewItem Header="Beta" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
<sdk:TreeViewItem Header="Gamma" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
</sdk:TreeViewItem>
</sdk:TreeView>
</Grid>

The complete code to get a horizontal treeview with all centered is:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Style TargetType="sdk:TreeViewItem" x:Key="TreeViewItemStyle">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:TreeViewItem">
<Grid Background="{x:Null}" HorizontalAlignment="Center">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF999999" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".75" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedInactive">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".2" />
<ColorAnimation Storyboard.TargetName="SelectionFill" Storyboard.TargetProperty="Color" Duration="0" To="#FF999999" />
<ColorAnimation Storyboard.TargetName="SelectionStroke" Storyboard.TargetProperty="Color" Duration="0" To="#FF333333" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HasItemsStates">
<VisualState x:Name="HasItems" />
<VisualState x:Name="NoItems">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualState x:Name="Collapsed" />
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value >
<system:Boolean>True</system:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" TabNavigation="Once" IsChecked="true" Visibility="Collapsed">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="Root" Background="Transparent" HorizontalAlignment="Left">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
<DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Right" Margin="2 2 5 2">
<Path x:Name="UncheckedVisual" Width="6" Height="9" Fill="#FFFFFFFF" VerticalAlignment="Center" HorizontalAlignment="Right" Data="M 0,0 L 0,9 L 5,4.5 Z" StrokeThickness="1" StrokeLineJoin="Miter">
<Path.Stroke>
<SolidColorBrush Color="#FF989898" />
</Path.Stroke>
</Path>
<Path x:Name="CheckedVisual" Opacity="0" Width="6" Height="6" Fill="#FF262626" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 6,0 L 6,6 L 0,6 Z" StrokeLineJoin="Miter" />
</Grid>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Rectangle x:Name="Selection" Grid.Column="1" Opacity="0" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" HorizontalAlignment="Right">
<Rectangle.Fill>
<SolidColorBrush x:Name="SelectionFill" Color="Black" />
</Rectangle.Fill>
<Rectangle.Stroke>
<SolidColorBrush x:Name="SelectionStroke" Color="Black" />
</Rectangle.Stroke>
</Rectangle>
<Button x:Name="Header" Grid.Column="1" Grid.ColumnSpan="2" ClickMode="Hover" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="False" TabNavigation="Once">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Hover" Opacity="0" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
<ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Button.Template>
<Button.Content>
<ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
</Button.Content>
</Button>
<Border x:Name="Validation" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FFDB000C" CornerRadius="2" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="ValidationToolTip" Placement="Right" PlacementTarget="{Binding ElementName=Header}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" />
</ToolTipService.ToolTip>
<Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
<Path Margin="-1,3,0,0" Fill="#FFDC000C" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" />
<Path Margin="-1,3,0,0" Fill="#FFFFFFFF" Data="M 0,0 L2,0 L 8,6 L8,8" />
</Grid>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<sdk:TreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<sdk:TreeViewItem Header="Root" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center">
<sdk:TreeViewItem Header="Alfa" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center" >
<sdk:TreeViewItem Header="Alfa child1" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center"/>
<sdk:TreeViewItem Header="Alfa child2" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center"/>
<sdk:TreeViewItem Header="Alfa child3" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center"/>
</sdk:TreeViewItem>
<sdk:TreeViewItem Header="Beta" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
<sdk:TreeViewItem Header="Gamma" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
</sdk:TreeViewItem>
</sdk:TreeView>
</Grid>
The solution that I found came up with more research.
I found the theory in: How to customize a silverlight control: https://msdn.microsoft.com/en-us/library/cc278068(VS.95).aspx
And then I went to:
https://msdn.microsoft.com/en-us/library/dd728671(v=vs.95).aspx
What I did is took the default template for the treeviewitem and then modify it.
the only thing that is modified in the template is:
Grid.ColumnSpan="2" HorizontalAlignment="Center"
In the line:
<Button x:Name="Header" Grid.Column="1"

Related

Size of button in Windows Phone 8.1 App is not expected

I'm a newbie to Windows Phone Development and trying to place 2 buttons into a grid by following code:
<Grid Margin="10" Height="60">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button MinWidth="50" Width="50" Height="60" Grid.Column="0" Background="Red" BorderThickness="0" Content="-"/>
<Button MinWidth="50" Width="50" Height="60" Grid.Column="1" Background="Green" BorderThickness="0" Content="+"/>
</Grid>
But the button height is not expected, it is always less than defined size even increasing height more and more (see pic)
I tried to set padding and margin property but it does not work. Is there anything else which I need to set?
Button ControlTemplate has a Border with Margin set to PhoneTouchTargetOverhang which is causing the margin/padding on top and bottom.
So, the ControlTemplate you can use to avoid is this:
<ControlTemplate x:Key="ButtonControlTemplateNoPadding" TargetType="Button">
<Grid x:Name="Grid" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter" Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
AutomationProperties.AccessibilityView="Raw"/>
</Border>
</Grid>
</ControlTemplate>
Notice that I removed the Margin in Border element around ContentPresenter.. The default version has it defined like this:
Margin="{ThemeResource PhoneTouchTargetOverhang}"
So, after you apply that template to your buttons, the margin should go away.
<Button MinWidth="50" Width="50" Height="60" Grid.Column="0" Background="Red" BorderThickness="0" Content="-" Template="{StaticResource ButtonControlTemplateNoPadding}" />
<Button MinWidth="50" Width="50" Height="60" Grid.Column="1" Background="Green" BorderThickness="0" Content="+" Template="{StaticResource ButtonControlTemplateNoPadding}"/>

Reuse of the same style with changes in template in Silverlight 5

I have a lot of styles for hiperlink button that are quite the same, just a different path in the template.
Here is the XAML fragment
<Style x:Key="HeatmapLinkStyle" TargetType="HyperlinkButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid Margin="4,2" Height="40" VerticalAlignment="Top">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="element" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.2" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="element" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LinkStates">
<VisualState x:Name="ActiveLink">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ActiveLinkBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InactiveLink"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Width="32" Height="32" VerticalAlignment="Top">
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FF3FA9F5" Visibility="Visible" />
<Path x:Name="element" Data="F1M-1834.73,-354.432L-1772.06,-354.432 -1772.06,-417.099 -1834.73,-417.099 -1834.73,-354.432z M-1832.68,-385.765L-1803.39,-385.765 -1803.39,-415.052 -1774.11,-415.052 -1774.11,-385.765 -1803.39,-385.765 -1803.39,-356.484 -1832.68,-356.484 -1832.68,-385.765z" Stretch="Uniform" Fill="#FF3FA9F5" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform ScaleY="1" ScaleX="1"/>
</Path.RenderTransform>
</Path>
<Ellipse x:Name="container" Fill="Transparent" Cursor="Hand" Height="32" Width="32"/>
</Grid>
<Border x:Name="ActiveLinkBorder" Width="32" Height="4" VerticalAlignment="Bottom" Opacity="0.5" Background="#FF3FA9F5" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The only changing part is the Data of "element" Path.
Is there a way to use just one base style and change the Path in the others?
Thanks everyone!
You can create a base style an inherit it.
here is an nice example :
basedOn Style
Hope it helps

Trying to rotate a Grid that's in a template

I want to create an expander with directional arrows to expand in al 4 directions. Like when the expander sits at the top of the page, it would expand down an downpointing arrows would rotate 180 degrees. Now when the expander sits at the left side of the page, it should expand right. But my arrows should point right so the user knows it has to click the expander for it to expand to the right.
At the moment, the arrows are 4 lines pointing down. But they should point right. I tried using a rotatetransform, but I cannot address it because I think I cannot address a key in a template from outside the template, so my doubleanimation to rotate the -45 degrees throws an error saying it cannto find myTransform.
Any ideas on this?
<Style x:Key="ExpanderNoButtonStyle" TargetType="toolkit:Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Expander">
<Grid Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="ExpandDirectionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="ExpandLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="Angle" From="0.0" To="-45.0" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" x:Name="rd0"/>
<RowDefinition Height="Auto" x:Name="rd1"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" x:Name="cd0"/>
<ColumnDefinition Width="Auto" x:Name="cd1"/>
</Grid.ColumnDefinitions>
<ToggleButton Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{TemplateBinding IsExpanded}" Margin="1" MinHeight="0" MinWidth="0" x:Name="ExpanderButton" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5,1">
<GradientStop Color="white" Offset="0"/>
<GradientStop Color="#FFAAAAAA" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RenderTransform>
<RotateTransform x:Name="myTransform" Angle="0" CenterX="7.5" CenterY="7.5"/>
</Grid.RenderTransform>
<Ellipse Width="15" Height="15" Fill="#FF888888"/>
<Line Stroke="White" X1="3" Y1="4" X2="7.5" Y2="8" />
<Line Stroke="White" X1="12" Y1="4" X2="7.5" Y2="8" />
<Line Stroke="White" X1="3" Y1="8" X2="7.5" Y2="12" />
<Line Stroke="White" X1="12" Y1="8" X2="7.5" Y2="12" />
</Grid>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit
This is how the good version look like (expands down, see arrows). I now want these arrows to be rotated 45 degrees so i can use it for al for sides.
If I understand what you're asking, I think you can get the answer if you look at the default Expander template. You can do this by creating a new temp project, dropping an Expander on the artboard, and right-clicking it in the Objects list and creating a copy of the template.
You'll see the Expander has VisualStates for ExpandUp, ExpandDown, ExpandLeft and ExpandRight. For the different directions, each state swaps out the Expander ToggleButton for a up/down, left or right template. Each direction also configures the Expander's grid to put the button and the expander area in the right positions.
You need to create left and right ToggleButton templates. That's where you can design the arrows to point the right way. Then in the Expander's left and right VisualStates, point to those templates.
Hopefully that makes sense. I think if you look at the default template it should be clear, but it's been a while since I've done it. I remember they didn't do all the states, though.
Here's my SL example. Our app only needed up and down so there's no left or right, but hopefully it can get you started. The arrows rotate so you can see how that works too.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/BasicResources;component/BasicStyles.xaml"/>
<ResourceDictionary Source="/BasicResources;component/BasicResource.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- Named fade brush for visual effect on Expander Header right edge -->
<!-- this brush is specified here as it uses resource brushes, so will work properly with high contrast -->
<LinearGradientBrush x:Key="ExpanderHeaderFadeBrush" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent"/>
<GradientStop Color="{StaticResource BgColor}" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ExpanderHeaderBorderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource BorderRestBrush}"/>
<Setter Property="BorderThickness" Value="0,0.5,0,0"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="{StaticResource MouseDownBgBrush}"/>
</Style>
<ControlTemplate x:Key="ExpanderHeaderCT" TargetType="ContentControl">
<Border
x:Name="bdrControlFooter"
Style="{StaticResource ExpanderHeaderBorderStyle}"
Height="{TemplateBinding Height}">
<Border
x:Name="bdrTopInner"
BorderBrush="{StaticResource WhiteBrush}"
BorderThickness="0,1,0,0">
<ContentPresenter
Cursor="{TemplateBinding Cursor}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
</ControlTemplate>
<Style x:Key="ExpanderHeaderContentStyle" TargetType="ContentControl">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="44" />
<Setter Property="Template" Value="{StaticResource ExpanderHeaderCT}" />
</Style>
<!-- down button template -->
<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" />
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="contentOuter"
Style="{StaticResource ExpanderHeaderContentStyle}"
VerticalContentAlignment="Stretch"
VerticalAlignment="Stretch"
Height="58">
<Grid x:Name="gInnerGrid"
Background="{StaticResource GradientHeaderBgBrush}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path x:Name="pathTwirly"
Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="35,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}" />
</Path.Fill>
</Path>
<Rectangle x:Name="rectFade"
Grid.Column="1"
Width="75"
HorizontalAlignment="Right"
Fill="{StaticResource ExpanderHeaderFadeBrush}"/>
<TextBlock x:Name="header"
Text="{TemplateBinding Content}"
Style="{StaticResource BlueSmallHeadingText}"
Grid.Column="1"
HorizontalAlignment="Stretch"
Margin="4,0,0,0"
VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ContentControl>
</Grid>
<!-- strokedasharray specified here .. silverlight bug that it won't pick up that style element. works fine in up! -->
<Rectangle x:Name="FocusVisualElement"
Style="{StaticResource LinkRectangleFocusStyle}"
IsHitTestVisible="false"
StrokeThickness="1"
StrokeDashArray="1,3"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- up button template -->
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" />
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="contentOuter"
Style="{StaticResource ExpanderHeaderContentStyle}"
VerticalContentAlignment="Stretch"
Height="58">
<Grid x:Name="gInnerGrid"
Background="{StaticResource GradientHeaderBgBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path x:Name="pathTwirly"
Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="35,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}"/>
</Path.Fill>
</Path>
<Rectangle x:Name="rectFade"
Grid.Column="1"
Width="75"
HorizontalAlignment="Right"
Fill="{StaticResource ExpanderHeaderFadeBrush}"/>
<TextBlock x:Name="header"
Text="{TemplateBinding Content}"
Style="{StaticResource BlueSmallHeadingText}"
Grid.Column="1"
HorizontalAlignment="Stretch"
Margin="4,0,0,0"
VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ContentControl>
</Grid>
<Rectangle x:Name="MouseOverBorderElement"
Style="{StaticResource RectangleMouseOverStyle}"
Grid.ColumnSpan="2"
Opacity="0"/>
<Rectangle x:Name="FocusVisualElement"
Style="{StaticResource LinkRectangleFocusStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- main expander template -->
<ControlTemplate x:Key="ExpanderCT" TargetType="toolkit:Expander">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DisabledVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
<!-- focus comes from the expander togglebutton -->
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ExpandSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="ExpandDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandUp">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Template" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderUpHeaderTemplate}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandLeft" />
<VisualState x:Name="ExpandRight" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- begin layout -->
<Border x:Name="Background"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="cd0" Width="Auto"/>
<ColumnDefinition x:Name="cd1" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="rd0" Height="Auto"/>
<RowDefinition x:Name="rd1" Height="Auto"/>
</Grid.RowDefinitions>
<ToggleButton x:Name="ExpanderButton"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsChecked="{TemplateBinding IsExpanded}"
Margin="0"
MinWidth="0"
MinHeight="0"
Padding="{TemplateBinding Padding}"
Grid.Row="0"
Template="{StaticResource ExpanderDownHeaderTemplate}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentControl x:Name="ExpandSite"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Grid.Row="1"
Visibility="Collapsed"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement"
Style="{StaticResource BorderDisabledStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
<Border x:Name="FocusVisualElement"
Style="{StaticResource BorderFocusStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- styles the expander header .. the top line and background color -->
<Style TargetType="toolkit:Expander">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template" Value="{StaticResource ExpanderCT}"/>
</Style>
I've created 4 possible states and added them to the grid's resources. This way, when a certain direction is called, it'll go fetch the appropriate template. So the arrows are unique for every template, there's no need to rotate them anymore.
here's the xaml for the 4 templates, hope someone can use them
<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 1,1.5 L 4.5,5 L 8,1.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Path x:Name="arrow" Data="M 1,4.5 L 4.5,1 L 8,4.5" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Center" Margin="10,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 1,5 L 4.5,1.5 L 8,5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Path x:Name="arrow" Data="M 1,1 L 4.5,4.5 L 8,1" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ExpanderLeftHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 4.5,1 L 1,4.5 L 4.5,8"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
<Path x:Name="arrow" Data="M 1,1 L 4.5,4.5 L 1,8" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<layoutToolkit:LayoutTransformer>
<layoutToolkit:LayoutTransformer.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="270"/>
</TransformGroup>
</layoutToolkit:LayoutTransformer.LayoutTransform>
<ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" Margin="0,0,10,0" Grid.Row="1" VerticalAlignment="Stretch" >
<!-- Content="{TemplateBinding Content}"-->
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
</ContentPresenter.Content>
</ContentPresenter>
</layoutToolkit:LayoutTransformer>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ExpanderRightHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 1,1 L 4.5,4.5 L 1,8"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Path x:Name="arrow" Data="M 4.5,1 L 1,4.5 L 4.5,8" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<layoutToolkit:LayoutTransformer>
<layoutToolkit:LayoutTransformer.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</layoutToolkit:LayoutTransformer.LayoutTransform>
<ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" Margin="10,0,0,0" Grid.Row="1" VerticalAlignment="Stretch">
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
</ContentPresenter.Content>
</ContentPresenter>
</layoutToolkit:LayoutTransformer>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>

How to change the grouping title from property name to something more descriptive

When adding a PropertyGroupDescription to the PageCollectedView.GroupDescriptions I supply null as the property name, and an IValueConverter. I do this so that I can make a single grouping on a set of property values. Howerver the display shows a leading : before the grouping value in the DataGrid.
In another situation I do group by a single property, so I supply an instance of PropertyGroupDescription with a the property name and no IValueConverter. In that case the display shows the property name a colon and then the grouping value.
I need to be able to programatically set the display of the text that appears before the : to something more meaningful (and in the local language for that matter, but that comes later)
Use These code hope your problem will be solved.
<sdk:DataGrid.RowGroupHeaderStyles>
<Style TargetType="sdk:DataGridRowGroupHeader">
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="#FFE4E8EA" />
<Setter Property="Height" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGridRowGroupHeader">
<sdk:DataGridFrozenGrid x:Name="Root"
Background="{TemplateBinding Background}">
<sdk:DataGridFrozenGrid.Resources>
<ControlTemplate x:Key="ToggleButtonTemplate"
TargetType="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="(Stroke).Color"
Duration="0" To="#FF6DBDD1"/>
<ColorAnimation Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="(Fill).Color"
Duration="0" To="#FF6DBDD1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="(Stroke).Color"
Duration="0" To="#FF6DBDD1"/>
<ColorAnimation Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="(Fill).Color"
Duration="0" To="#FF6DBDD1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="Opacity" To=".5"/>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="Opacity" To=".5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked" />
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path Stretch="Uniform"
Data="F1 M 0,0 L 0,1 L .6,.5 L 0,0 Z"
Width="5" HorizontalAlignment="Center"
VerticalAlignment="Center" x:Name="CollapsedArrow"
Visibility="Collapsed" Stroke="#FF414345"/>
<Path Stretch="Uniform"
Data="F1 M 0,1 L 1,1 L 1,0 L 0,1 Z" Width="6"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="ExpandedArrow" Fill="#FF414345"/>
</Grid>
</ControlTemplate>
</sdk:DataGridFrozenGrid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CurrentStates">
<VisualState x:Name="Regular"/>
<VisualState x:Name="Current">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisual"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<sdk:DataGridFrozenGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</sdk:DataGridFrozenGrid.ColumnDefinitions>
<sdk:DataGridFrozenGrid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</sdk:DataGridFrozenGrid.RowDefinitions>
<Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFFFFFFF" Height="1"/>
<Rectangle Grid.Column="1" Grid.Row="1" x:Name="IndentSpacer" />
<ToggleButton Grid.Column="2" Grid.Row="1" x:Name="ExpanderButton"
Height="15" Width="15" IsTabStop="False"
Template="{StaticResource ToggleButtonTemplate}" Margin="2,0,0,0"/>
<!-- This is START of the First Group Header of the DataGrid -->
<!--<StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal"
VerticalAlignment="Center" Margin="0,1,0,1"
Visibility="{Binding Width, ElementName=IndentSpacer}">
<TextBlock Margin="4,0,0,0" Text="{Binding Name}" Foreground="Red"/>
</StackPanel>-->
<!-- This is END of the First Group Header of the DataGrid -->
<!-- This is START of the Second Group Header of the DataGrid -->
<Grid Grid.Column="3" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,1,0,1"
Visibility="{Binding Width, ElementName=IndentSpacer}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<!--<ComboBox Margin="4,0,0,0" Width="120" ItemsSource="{Binding ItemsSource,ElementName=personDataGrid,Converter={StaticResource ConvToComboBox}}" DisplayMemberPath="text" SelectionChanged="comboSelectionChangeda"/>
<Button Margin="169,0,0,0" Height="15" Name="btn" Content="+" FontSize="9" Foreground="Black" FontWeight="Bold" Click="btn_Click"/>-->
<sdk:Label Content="{Binding ItemsSource,ElementName=personDataGrid,Converter={StaticResource ConvToGender}}"/>
</StackPanel>
</Grid>
<!-- This is END of Second Group Header of the DataGrid -->
<Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFD3D3D3" Height="1" Grid.Row="2"/>
<Rectangle x:Name="FocusVisual" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="3"
Stroke="#FF6DBDD1" StrokeThickness="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
IsHitTestVisible="false" Opacity="0" />
<sdk:DataGridRowHeader x:Name="RowHeader" Grid.RowSpan="3" sdk:DataGridFrozenGrid.IsFrozen="True"/>
</sdk:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.RowGroupHeaderStyles>
Here is the Converter class that returns the customise Group Header
public class GenderConv:IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
PagedCollectionView pageView = value as PagedCollectionView;
Person person = pageView.CurrentItem as Person;
string gender = person.Gender.ToString();
return "Sex:"+ gender;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

WP7 Toggle Switch Problem?

The toggle switch style, take colors from the theme, the Dark & White, but I want to have my own background color, and in this case, the style of the switch is not good
so in the first image, the style is the Light, and it's not suitable
In the second, it's dark, baad
I want it like the third "Edited by paint"
any way to do that ?!
You can create your own style for ToggleSwitch by editing the default
style of a ToggleSwitch.
You ll get the default style from Here
Here is the style for ToggleSwitch that i edited and created a
ToggleSwitch like this
<Style x:Key="ToggleSwitchCustomStyle" TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{StaticResource ToggleSwitchForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ManipulationMode" Value="None"/>
<Setter Property="MinWidth" Value="154"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchHeaderDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OffContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OnContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchTrackDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchCurtain">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchCurtainDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ToggleStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="DraggingToOnTransition" From="Dragging" GeneratedDuration="0" To="On">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="DraggingToOffTransition" From="Dragging" GeneratedDuration="0" To="Off">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OnToOffTransition" From="On" GeneratedDuration="0" To="Off">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OffToOnTransition" From="Off" GeneratedDuration="0" To="On">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Off">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF97CD72"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="-44" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="On">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FFE17163"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
<DoubleAnimation Duration="0" To="38" Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ContentStates">
<VisualState x:Name="OffContent">
<Storyboard>
<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OffContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OnContent">
<Storyboard>
<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</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"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource ToggleSwitchHeaderForegroundThemeBrush}" FontWeight="Semilight" Margin="6"/>
<Grid Margin="{TemplateBinding Padding}" Grid.Row="1" Width="163" Height="51">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="2" x:Name="OffContentPresenter" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="41" Opacity="10" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="OnContentPresenter" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="43" Opacity="100" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="42"/>
<Grid Background="Transparent" Grid.Column="1">
<Grid x:Name="SwitchKnobBounds" Height="30" Margin="0,5,5,16" Width="57">
<Border x:Name="OuterBorder" CornerRadius="10" BorderBrush="#59FFFFFF" BorderThickness="2" Height="24" Width="57">
<Border BorderBrush="White" BorderThickness="2" CornerRadius="8" Background="#FFD0D4DF" Width="52" Margin="0">
<Border Height="Auto" x:Name="InnerBorder" CornerRadius="10" BorderBrush="{StaticResource ToggleSwitchTrackBorderThemeBrush}" BorderThickness="3" Background="#FFD0D4DF">
<ContentPresenter x:Name="SwitchCurtainBounds">
<ContentPresenter x:Name="SwitchCurtainClip">
<Rectangle x:Name="SwitchCurtain" Fill="Transparent" Width="44">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="CurtainTranslateTransform" X="-44"/>
</Rectangle.RenderTransform>
</Rectangle>
</ContentPresenter>
</ContentPresenter>
</Border>
</Border>
</Border>
<Rectangle x:Name="SwitchKnob" Fill="#FF97CD72" HorizontalAlignment="Left" RadiusX="15" RadiusY="20" StrokeThickness="9" Height="25" Width="25">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFCED2DA" Offset="0.53"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="FocusVisualWhite" Margin="-3" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="White" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" Margin="-3" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
<Thumb x:Name="SwitchThumb">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Create a custom style. Here's a example where the foreground colour is changed to #F09609
<Style x:Key="ToggleSwitchButtonStyle"
TargetType="toolkitPrimitives:ToggleSwitchButton">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="SwitchForeground" Value="#F09609" /> <!-- CUSTOM VALUE -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitPrimitives:ToggleSwitchButton">
<Border x:Name="Root"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CacheMode="BitmapCache"
Opacity="{TemplateBinding Opacity}"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0"
Storyboard.TargetName="SwitchBottom"
Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
To="{StaticResource PhoneForegroundColor}" />
<ColorAnimation Duration="0"
Storyboard.TargetName="ThumbCenter"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{StaticResource PhoneForegroundColor}" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05"
To="Unchecked" />
<VisualTransition GeneratedDuration="0:0:0.05"
To="Checked" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="BackgroundTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="68">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"
Exponent="15" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ThumbTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="68">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"
Exponent="15" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Dragging" />
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="BackgroundTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="0" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="ThumbTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SwitchRoot"
Width="136"
Height="95"
Background="Transparent">
<Grid x:Name="SwitchTrack"
Width="88">
<Grid x:Name="SwitchBottom"
Height="32"
Background="{TemplateBinding SwitchForeground}">
<Rectangle x:Name="SwitchBackground"
Width="76"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{TemplateBinding Background}">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="BackgroundTranslation" />
</Rectangle.RenderTransform>
</Rectangle>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2">
<Border BorderBrush="{StaticResource PhoneBackgroundBrush}"
BorderThickness="4" />
</Border>
</Grid>
<Border x:Name="SwitchThumb"
Width="28"
Height="36"
Margin="-4,0"
HorizontalAlignment="Left"
BorderBrush="{StaticResource PhoneBackgroundBrush}"
BorderThickness="4,0">
<Border.RenderTransform>
<TranslateTransform x:Name="ThumbTranslation" />
</Border.RenderTransform>
<Border x:Name="ThumbCenter"
Background="White"
BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2" />
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleSwitchStyle"
TargetType="toolkit:ToggleSwitch">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}" />
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="SwitchForeground" Value="#F09609" /> <!-- CUSTOM VALUE -->
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CacheMode="BitmapCache"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Header"
Storyboard.TargetProperty="Opacity"
To="0.3" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To="0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="12,5,36,42">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Header"
Margin="-1,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneBorderBrush}"
IsTabStop="False"
Opacity="{TemplateBinding Opacity}" />
<ContentControl x:Name="Content"
Grid.Row="1"
Margin="-1,1,0,-7"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsTabStop="False"
Opacity="{TemplateBinding Opacity}" />
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch"
Grid.RowSpan="2"
Grid.Column="1"
Margin="-22,-29,-24,-28"
VerticalAlignment="Bottom"
Background="{TemplateBinding Background}"
Opacity="{TemplateBinding Opacity}"
Style="{StaticResource ToggleSwitchButtonStyle}"
SwitchForeground="{TemplateBinding SwitchForeground}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Resources