如何取消窗口切换上的ToggleButton动画

问题描述 投票：0回答：1

我将此切换按钮用于我的设置窗口。当我切换到设置窗口时，我可以看到处于打开状态的每个切换按钮的动画。我希望它们已经完全启用，而无需看到它们的动画。我怎样才能实现这个目标？

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="ToggleButton" x:Key="ToggleButton">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,10">
                                <Border x:Name="border" Cursor="Hand" CornerRadius="12.5" Width="50" Height="25">
                                    <Border.Background>
                                        <SolidColorBrush Color="#363031" x:Name="backgroundbrush"/>
                                    </Border.Background>
                                    <Border CornerRadius="12.5">
                                        <Border.Background>
                                            <SolidColorBrush Color="#000000" Opacity="0" x:Name="hoverbrush"/>
                                        </Border.Background>
                                        <Ellipse Width="17.5" Height="17.5" Fill="#ffffff" Margin="-25,0,0,0" x:Name="ellipse"/>
                                    </Border>
                                </Border>
                            </StackPanel>
                            <Label FontFamily="Livvic" Content="{TemplateBinding Content}" Foreground="White" FontSize="20" FontWeight="Bold" Grid.Column="1" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0">
                                <Label.Effect>
                                    <DropShadowEffect BlurRadius="4" ShadowDepth="4" Opacity="0.25"/>
                                </Label.Effect>
                            </Label>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#d151ff" Duration="0:0:0.2" Storyboard.TargetName="backgroundbrush" Storyboard.TargetProperty="Color"/>
                                            <ThicknessAnimation To="25,0,0,0" Duration="0:0:0.2" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Margin"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#363031" Duration="0:0:0.2" Storyboard.TargetName="backgroundbrush" Storyboard.TargetProperty="Color"/>
                                            <ThicknessAnimation To="-25,0,0,0" Duration="0:0:0.2" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Margin"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

我希望当我切换到设置窗口时，之前打开的按钮完全处于打开状态。

wpf togglebutton
1个回答
0
投票

每当 

ToggleButton
的 
IsChecked
属性设置为 
true
时，就会播放动画 - 即使这是初始可见状态 - 因为 
Trigger
无法区分 
true
的初始状态和从 
false
过渡到 
true
。或者更具体地说，从 Unchecked 到 
Checked
的内置 
控制状态
。

您可以使用 

VisualStateManager
和 
VisualState
来获得正确的行为：

<ControlTemplate TargetType="ToggleButton">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition From="Unchecked"
                                      To="Checked">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="backgroundbrush"
                                                          Storyboard.TargetProperty="Color"
                                                          Duration="00:00:00.2">
                                <EasingColorKeyFrame Value="#d151ff" />
                            </ColorAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="ellipse"
                                                              Storyboard.TargetProperty="Margin"
                                                              Duration="00:00:00.2">
                                <EasingThicknessKeyFrame Value="25,0,0,0"/>
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="Checked"
                                      To="Unchecked">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="backgroundbrush"
                                                          Storyboard.TargetProperty="Color"
                                                          Duration="00:00:00.2">
                                <EasingColorKeyFrame Value="#363031" />
                            </ColorAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="ellipse"
                                                              Storyboard.TargetProperty="Margin"
                                                              Duration="00:00:00.2">
                                <EasingThicknessKeyFrame Value="-25,0,0,0"/>
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="backgroundbrush"
                                                      Storyboard.TargetProperty="Color">
                            <EasingColorKeyFrame Value="#d151ff" 
                                                 KeyTime="0"/>
                        </ColorAnimationUsingKeyFrames>
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="ellipse"
                                                          Storyboard.TargetProperty="Margin">
                            <EasingThicknessKeyFrame Value="25,0,0,0"
                                                     KeyTime="0"/>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel Orientation="Horizontal"
                    Grid.Column="0"
                    VerticalAlignment="Bottom"
                    HorizontalAlignment="Center"
                    Margin="0,0,0,10">
            <Border x:Name="border"
                    Cursor="Hand"
                    CornerRadius="12.5"
                    Width="50"
                    Height="25">
                <Border.Background>
                    <SolidColorBrush Color="#363031"
                                     x:Name="backgroundbrush" />
                </Border.Background>
                <Border CornerRadius="12.5">
                    <Border.Background>
                        <SolidColorBrush Color="#000000"
                                         Opacity="0"
                                         x:Name="hoverbrush" />
                    </Border.Background>
                    <Ellipse Width="17.5"
                             Height="17.5"
                             Fill="#ffffff"
                             Margin="-25,0,0,0"
                             x:Name="ellipse" />
                </Border>
            </Border>
        </StackPanel>
        <Label FontFamily="Livvic"
               Content="{TemplateBinding Content}"
               Foreground="White"
               FontSize="20"
               FontWeight="Bold"
               Grid.Column="1"
               Margin="5,0,0,0"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Padding="0,0,0,0">
            <Label.Effect>
                <DropShadowEffect BlurRadius="4"
                                  ShadowDepth="4"
                                  Opacity="0.25" />
            </Label.Effect>
        </Label>
    </Grid>
</ControlTemplate>

这些状态再次内置于控件的内部/私有支持代码中（通过 VisualStateManager.GoToState 调用）。每当您重新模板化控件时，您都应该始终在 WPF 文档站点上查找默认状态和模板，以便您可以根据需要响应这些状态。

不幸的是，它有很多 XAML 并且存在一些重复 - 您需要完全指定 

Checked
的静态/初始状态以及两个过渡动画的结束状态。我不知道有什么办法可以解决这个问题，但如果我错了，我相信有人会纠正我。另一方面，您不需要任何特殊的 
Unchecked
状态，因为它与您模板化的控件的正常状态相匹配。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.