Question

我想为ToggleButton创建一个动画“切换”样式（就像在智能手机上一样）。

动画本身不是问题，当我点击它时，开关看起来很漂亮并且动画。但是当它加载并打开时它也会动画。

当我加载视图时，它应显示某些开关已打开且某些开关已关闭。但它只显示“关闭”并自动启动“开启”动画。

以下简单代码显示了我的问题：检查时，我将按钮150px宽，而不是开关。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AnimationTest2.MainWindow"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}" x:Key="SwitchStyle">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="true">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Width">
                                <DoubleAnimation To="150"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Width">
                                <DoubleAnimation To="50"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <ToggleButton Width="50" Content="Button" Style="{StaticResource ResourceKey=SwitchStyle}"/>
        <ToggleButton Width="50" Content="Button" Style="{StaticResource ResourceKey=SwitchStyle}" IsChecked="True"/>
    </StackPanel>
</Window>

第一个ToggleButton效果很好。单击时不会检查并动画为150px。默认情况下会检查第二个ToggleButton，它应该立即为150px，但是当我启动应用程序时它会开始增长！

不知何故，我需要根据IsChecked状态为我的ToggleButtons定义一个初始状态，并仅在点击时启动动画。我怎样才能做到这一点？

我也尝试使用VisualStateManager，就像在this answer中一样，但后来我遇到同样的问题...

更新

如果某人不仅对概念验证感兴趣，那么这就是实际的工作开关：

    <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}" x:Key="SwitchToggleButton">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="Background" Value="Gray"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Width" Value="70"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid>
                        <Border x:Name="BackBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
                        <TextBlock x:Name="Off" Margin="30,0,0,0" VerticalAlignment="Center"  HorizontalAlignment="Center"><Run Text="OFF"/></TextBlock>
                        <TextBlock x:Name="On" Margin="0,0,30,0" VerticalAlignment="Center"  HorizontalAlignment="Center"><Run Text="ON"/></TextBlock>
                        <Border x:Name="Slider" Background="LightGray" Width="30" Height="30" HorizontalAlignment="Left" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Border.Loaded" SourceName="Slider">
                            <SkipStoryboardToFill BeginStoryboardName="checkedSB" />
                            <SkipStoryboardToFill BeginStoryboardName="checkedSB2" />
                            <SkipStoryboardToFill BeginStoryboardName="uncheckedSB" />
                            <SkipStoryboardToFill BeginStoryboardName="uncheckedSB2" />
                        </EventTrigger>
                        <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="checkedSB">
                                    <Storyboard Storyboard.TargetProperty="Margin" Storyboard.TargetName="Slider">
                                        <ThicknessAnimation To="40,0,0,0" Duration="00:00:00.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                                <BeginStoryboard x:Name="checkedSB2">
                                    <Storyboard Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)">
                                        <ColorAnimation To="LightSeaGreen" Duration="00:00:00.3"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard x:Name="uncheckedSB">
                                    <Storyboard Storyboard.TargetProperty="Margin" Storyboard.TargetName="Slider">
                                        <ThicknessAnimation To="0" Duration="00:00:00.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                                <BeginStoryboard x:Name="uncheckedSB2">
                                    <Storyboard Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)">
                                        <ColorAnimation To="{x:Null}" Duration="00:00:00.3"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

您可以将Assets.xcassets个对象添加到SkipStoryboardToFill Loaded。所以代码看起来像这样。

EventTrigger

ToggleButton动画的启动状态

1 个答案: