ToggleButton ControlTemplate可以使用动画或不使用动画来旋转路径

时间:2017-09-13 05:09:58

标签: wpf xaml triggers controltemplate togglebutton

在此动画ToggleButton ControlTemplate中,点击它后,动画会在Path更改时旋转IsChecked

<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>

但是有些条件我不想播放动画。

首次加载ToggleButton并预先检查时, 或者,
如果在VirtualizingPanel中使用它并且按钮行超出范围并再次返回。

一些场景:
1)如果是预先检查而不是点击,则直接将箭头旋转180度而不动画。

2)如果单击并且Checked为True,则旋转为180动画。

3)如果单击并且Checked为False,则旋转为0动画。

我该如何做到这一点?

1 个答案:

答案 0 :(得分:1)

尝试这样的事情:

<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>