ToggleButton ControlTemplate to rotate Path either with animation or without

Question

In this animated ToggleButton ControlTemplate, upon clicking it does it's animation which rotates the Path when IsChecked is changed.

<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
    <Border x:Name="ExpanderButtonBorder"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Padding="{TemplateBinding Padding}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Transparent"/>
            <Ellipse x:Name="Circle"
                    Grid.Column="0"
                    Stroke="DarkGray"
                    Fill="White"
                    Width="15"
                    Height="15"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>
            <Path x:Name="Arrow"
                Grid.Column="0"
                Data="M 1,1.5 L 4.5,5 8,1.5"
                Stroke="#FF666666"
                StrokeThickness="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RenderTransformOrigin="0.5,0.5">
            </Path>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Arrow"
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                         To="180"
                                         Duration="0:0:0.4"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Arrow"
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                         To="0"
                                         Duration="0:0:0.4"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

However there are conditions where I don't want the animation to play out.

Such when the ToggleButton is first loaded and it is pre-checked,
or,
if using it in a VirtualizingPanel and the button row goes out of scope and comes back in again.

Some scenerios:
1) If it is pre-checked and not from a click then it goes straight to rotating the Arrow 180 degrees without animation.

2) If it is clicked and Checked is True, it rotates to 180 animated.

3) If it is clicked and Checked is False, it rotates to 0 animated.

How can I accomplish this?

Answer 1

Try something like this:

<ControlTemplate.Triggers>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="True" />
            <Condition Property="IsPressed" Value="False" />
            <!--<Condition Property="IsMouseOver" Value="False" /> not sure if needed in your case-->
        </MultiTrigger.Conditions>
        <!--your logic for changing without animation-->
        <!--<Setter Property="" Value="" />-->
    </MultiTrigger>

    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="True" />
            <Condition Property="IsPressed" Value="True" />
            <!--<Condition Property="IsMouseOver" Value="False" /> not sure if needed in your case-->
        </MultiTrigger.Conditions>
        <!--your logic for changing with animation-->
        <!--<Setter Property="" Value="" />-->
    </MultiTrigger>

    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsChecked" Value="False" />
            <Condition Property="IsPressed" Value="True" />
            <!--<Condition Property="IsMouseOver" Value="False" /> not sure if needed in your case-->
        </MultiTrigger.Conditions>
        <!--your logic for changing with animation-->
        <!--<Setter Property="" Value="" />-->
    </MultiTrigger>
</ControlTemplate.Triggers>