暂停/阻止复选框控件的动画

Posted 2021-05-06

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

它很棒。唯一的问题是此复选框初始模式可以是true或false。对于false - 没问题，但是如果它是真的，那么当加载视图时，你会立即看到开关移动的动画。

我想防止这种情况。反正有没有这样做？

这是相关的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>

这是我初始化view + viewmodel的方式：

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

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

答案

找到1种方法来做到这一点。

事实证明，你可以绑定开关/滑块的初始X位置。所以我将它绑定到ViewModel中的属性，并更新它。

对XAML的更改：

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

Ctor of View：

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

ViewModel的Ctor：

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

更多来自ViewModel：

public Double InitialPosition { get; set; }

因此，在加载视图时，将创建视图模型，并根据复选框状态计算滑块的原始/初始位置。