Handling Togglebutton ControlTemplate - silverlight

Question

If i use this code:
Eyes on "Path" element
<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center"
Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<RotateTransform x:Name="RotateButtonTransform"/>
</ToggleButton.RenderTransform>
</ToggleButton>
All shows just fine.
Example:
But when i use whole code with animations, the position is set to Left but it appears on right
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Expander">
<Style TargetType="local:Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Expander">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ViewStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#FFDBDBDB" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="1" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" Canvas.ZIndex="2"/>
<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center"
Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<RotateTransform x:Name="RotateButtonTransform"/>
</ToggleButton.RenderTransform>
</ToggleButton>
</Grid>
<ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content">
<ContentPresenter.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When i tap my expander the Path jumps from left to right - where is the problem?
Example:
When position is Center it shows correct
ADDITION:
If i delete animation x:Name="RotateButtonTransform" then Path element is being shown correctly - but i need this transform to rotate the Path
ADDITION 2:
Deleted togglebuttons animation, and added this lines:
To visual state storyboard:
<DoubleAnimation Storyboard.TargetName="RotatePath"
Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
To Path element:
<Path.RenderTransform>
<RotateTransform x:Name="RotatePath"/>
</Path.RenderTransform>
Code somewhy fails...
Error:
An exception of type 'System.InvalidOperationException' occurred in System.Windows.ni.dll but was not handled in user code

Answer 1

Because your ToggleButton spans across 2 columns and you set it HorizontalAlignment to Stretch which means that ToggleButton will have a width of whole header and when you expand and apply 180 rotation that rotates around its centre and what was on the left side is now on the right side upside down. Change HorizontalAlignment on your ToggleButton to Left and that should solve your issue.
If you want to keep ToggleButton stretched then don't rotate button but Path inside it:
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ViewStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB">
<Path.RenderTransform>
<RotateTransform x:Name="RotateButtonTransform"/>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</ToggleButton.Template>