Silverlight DoubleAnimation rotate 180 degrees; Silverlight animation rotate image from style; Rotate ToggleButton image

This example shows how to make a ToggleButton with an image that rotates according to toggle button’s state.

1. Add a ToggleButton to your view and set its style. (You can download a standard toggle button’s style from microsoft’s sites)

2. Edit the Style:

<vsm:VisualStateManager.VisualStateGroups>
    <vsm:VisualStateGroup x:Name="CheckStates">
        <vsm:VisualState x:Name="Checked">
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.25" Storyboard.TargetName="myToggleButtonRotateTransform" Storyboard.TargetProperty="Angle" To="0"></DoubleAnimation>
            </Storyboard>
        </vsm:VisualState>
    </vsm:VisualStateGroup x:Name="CheckStates">
</vsm:VisualStateManager.VisualStateGroups>

<ContentPresenter RenderTransformOrigin="0.5,0.5"
        x:Name="contentPresenter"
        [.... SOME OTHER STANDARD PROPERTIES ...] >
    <ContentPresenter.RenderTransform>
        <RotateTransform x:Name="myToggleButtonRotateTransform" Angle="0" />
    </ContentPresenter.RenderTransform>
</ContentPresenter>

 

Full style source here.