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?

score 1 · Accepted Answer · answered Sep 13 '17 at 08:48

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>

This great thankyou, I've just been looking at event triggers, do you happen to know if it's possible to combine a click event trigger with a property trigger? — Hank, Sep 13 '17 at 10:16
I have never done that myself, but someone has posted an answer to another question, that can be useful for you: https://stackoverflow.com/a/24012104/7523101 — Kacper Stachowski, Sep 13 '17 at 10:22

ToggleButton ControlTemplate to rotate Path either with animation or without

1 Answers1