暂停/防止复选框控件的动画效果。

Question

我有一个复选框替代类似开关的控件。

它运作良好。唯一的问题是，这个复选框的初始模式可以是true或false。如果是false-没有问题，但如果是true，那么当视图加载时，你会立即看到开关移动的动画。

我想要防止这种情况发生。有没有什么办法可以做到这一点？

以下是相关的XAML代码：

<CheckBox Style="{StaticResource MySwitch}"  IsChecked="{Binding ExplicitIncludeMode}" ></CheckBox>

<Style x:Key="MySwitch" TargetType="{x:Type CheckBox}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="OnChecking">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="55"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                    <Storyboard x:Key="OnUnchecking">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <SplineThicknessKeyFrame KeyTime="00:00:00.3000000" Value="1,1,1,1"/>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>

                <DockPanel x:Name="dockPanel">
                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" RecognizesAccessKey="True" VerticalAlignment="Center"/>
                    <Border BorderBrush="LightGray" BorderThickness="1" Margin="5,5,0,5">
                        <Grid  Width="110" Background="GhostWhite">
                            <TextBlock Text="Included" TextWrapping="Wrap" FontWeight="Medium" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,3,0" Foreground="#FF00AFC4"/>
                            <TextBlock HorizontalAlignment="Left" Margin="2,0,0,0" FontSize="12" FontWeight="Bold" Text="Excluded" VerticalAlignment="Center" TextWrapping="Wrap" Foreground="#FFE4424D"/>
                            <Border HorizontalAlignment="Left" x:Name="slider" Width="55" BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" RenderTransformOrigin="0.5,0.5" Margin="1,1,1,1">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                                    </TransformGroup>
                                </Border.RenderTransform>
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="WhiteSmoke" Offset="0"/>
                                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop x:Name="grdColor" Color="#FF00AFC4" Offset="1"/>
                                        <GradientStop Color="#092E3E" Offset="0"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </Grid>
                    </Border>
                </DockPanel>

                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsChecked" Value="True"/>
                            <Condition Property="IsPressed" Value="True"/>
                        </MultiTrigger.Conditions>

                        <MultiTrigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource OnUnchecking}" x:Name="OnUnchecking_BeginStoryboard"/>
                        </MultiTrigger.ExitActions>
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource OnChecking}" x:Name="OnChecking_BeginStoryboard"/>
                        </MultiTrigger.EnterActions>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="118"></Setter>
    <Setter Property="Height" Value="39"></Setter>

</Style>

以下是我初始化视图和视图模型的方式：

// ctor of view (tab)
public MonitoredExtensions()
{
    InitializeComponent();
    DataContext = new MonitoredExtensionsViewModel();
}

// ctor of viewmodel
public MonitoredExtensionsViewModel()
{
     ...
     ExplicitIncludeMode = true/false;
     ...
}

- Maverick Meerkat

---

我无法完全重现这个问题。如果我将您的代码复制粘贴到一个新的WpfApp中，它总是显示相同的内容，并且不会根据false或true的使用方式做出反应（如果我理解正确的话）。 - Simon Mourier

@SimonMourier 嗯，您如何设置初始复选框状态？您是在视图的 InitializeComponent 被调用之前完成此操作吗？ - Maverick Meerkat

我只是尝试设置IsChecked为true和false。 - Simon Mourier

我添加了一个gif，展示了如何初始化视图和视图模型。另外，我尝试在设置视图模型后放置InitializeComponent()，但没有改变。 - Maverick Meerkat

我刚刚尝试从零开始创建一个 WPF 应用程序，并复制/粘贴了你的代码，没有使用任何视图模型。 - Simon Mourier

Answer 1

发现有一种方法可以做到这一点。

原来可以绑定开关/滑块的初始X位置。所以我将其绑定到ViewModel中的一个属性，并进行了更新。

XAML更改：

<TranslateTransform X="{Binding InitialPosition}" Y="0"/>

视图的构造函数：

public MonitoredExtensions()
{
    InitializeComponent();
    DataContext = new MonitoredExtensionsViewModel();
}

ViewModel的构造函数：

public MonitoredExtensionsViewModel()
{
     ...
     ExplicitIncludeMode = true/false;
     InitialPosition = (ExplicitIncludeMode) ? 55 : 0;
     ...
}

ViewModel 的更多内容：

public Double InitialPosition { get; set; }

当视图加载时，viewModel被创建，并根据复选框状态计算出滑块的原始/初始位置。

- Maverick Meerkat