Trying to rotate a Grid that's in a template - silverlight

Question

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.

Answer 1

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>

Answer 2

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>