Question

I have a ToggleButton to which I’m applying the following style

<Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="normal" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.3" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="normal"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="#FF181615" Grid.Row="2" Grid.ColumnSpan="3" CornerRadius="4" Width="100" Height="20"/>
                        <Border x:Name="MouseOverBorder" Background="{StaticResource ButtonHoverFill}" Grid.Row="2" Grid.ColumnSpan="3" CornerRadius="4" Width="100" Height="20" Visibility="Collapsed"/>
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0">
                            <Path x:Name="normal"
                            HorizontalAlignment="Center"
                            Width="10"
                            Stretch="Fill"
                            Opacity="1"
                            Data="M1,6 C1,6 1,11 1,11 C1,11 7.5,6.3583374 7.5,6.3583374 C7.5,6.3583374 14,11 14,11 C14,11 14,6 14,6 C14,6 7.5,1.3583374 7.5,1.3583374 C7.5,1.3583374 1,6 1,6 z"
                            Fill="White" UseLayoutRounding="False" VerticalAlignment="Center" Height="9" Stroke="White" RenderTransformOrigin="0.5,0.5" >
                                <Path.RenderTransform>
                                    <RotateTransform Angle="180"/>
                                </Path.RenderTransform>
                            </Path>
                            <TextBlock Text="Input" FontFamily="Calibri" Margin="5,2,0,0" FontSize="12" Foreground="White"/>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The xaml editor however throws the error,
Error 1 'System.Windows.Media.Animation.DoubleAnimation' animation object cannot be used to animate property 'RenderTransform' because it is of incompatible type 'System.Windows.Media.Transform'.

but this seems to work fine if i run the executable. Can someone tell me why rendertransform is refusing to be animated in the xamleditor?

Answer 1

Could you try revising the definition of the RenderTransform to use a TransformGroup like this:

    <Path x:Name="normal" ... >
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="180"/>
                <TranslateTransform/>
            </TransformGroup>           
        </Path.RenderTransform>
    </Path>

And then change the path to the property in the DoubleAnimation to look like this:

    <DoubleAnimation 
        Duration="0:0:0.3" 
        To="0" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" 
        Storyboard.TargetName="normal" 
    />

This structure seems to be the what the tooling prefers.