DataTrigger并附加一个新的Storyboard

Question

我在ViewModel中有一个名为IsDone的变量。我想在IsDone更改值时附加一个新的Storyboard。它看起来像一个加载过程，单击按钮时启动Animation，等待某事，然后将IsDone设置为true才能调用StopAni。问题是当IsDone为true时，border3不会显示。任何想法，谢谢。 按钮模板：

<Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="{x:Type ToggleButton}">
 <Grid>
 <Canvas>
 <Ellipse x:Name="border1" Width="100" Height="100"/>
 <Ellipse x:Name="border2" Width="90" Height="90"/>
 <Ellipse x:Name="border3" Width="50" Height="50"/>
 </Canvas>
 <ContentPresenter />
 </Grid>
 <ControlTemplate.Triggers>
    <DataTrigger Binding="{Binding IsDone}" Value="false">
      <DataTrigger.EnterActions>
      <BeginStoryboard Storyboard="{StaticResource StartAni}"/>
      </DataTrigger.EnterActions>
    <DataTrigger Binding="{Binding IsDone}" Value="true">
     <DataTrigger.EnterActions>
     <BeginStoryboard Storyboard="{StaticResource StopAni}"/>
     </DataTrigger.EnterActions>
   </DataTrigger>  
 </ControlTemplate.Triggers>
 </ControlTemplate>
 </Setter.Value>
</Setter>

StartAni：

<Storyboard x:Key="StartAni">
     <DoubleAnimation
        Storyboard.TargetName="border2"
        Storyboard.TargetProperty="StrokeThickness" To="0" Duration="0:0:0.2"/>
     </DoubleAnimation>
     <ColorAnimation
       Storyboard.TargetName="border2"
       Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" 
       To="Grey" Duration="0">
     </ColorAnimation>
     <DoubleAnimation 
       Storyboard.TargetName="border3" 
       Storyboard.TargetProperty="StrokeThickness" 
       From="0.0" To="5.0" Duration="0"/>
</Storyboard>

StopAni：

<Storyboard x:Key="StopAni">
     <DoubleAnimation
       Storyboard.TargetName="border2"
       Storyboard.TargetProperty="StrokeThickness" To="5" Duration="0:0:2.5"/>
     <ColorAnimation
       Storyboard.TargetName="border2"
       Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" 
       To="LightGreen" Duration="0"/>
     <DoubleAnimation
       Storyboard.TargetName="border3"
       Storyboard.TargetProperty="StrokeThickness"
       From="5.0" To="0.0" Duration="0:0:0.2"/>
</Storyboard>

ViewModel：

bool isDone;
public bool IsDone {
   set {
      isDone = value;
      OnPropertyChanged("IsDone");  
   }
   get {
      return isDone;
   }
}

Answer 1

在ControlTemplate本身中定义您的Resources 。 并为“ Stroke ”分配一些初始值，例如“ Transparent到您的边界。

还将“ Duration增加到一些明显的值。

完整的xaml会这样：

<Style TargetType="ToggleButton" x:Key="BtnKey">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <ControlTemplate.Resources>
                                <Storyboard x:Key="StartAni">
                                    <DoubleAnimation
                                        Storyboard.TargetName="border2"
                                        Storyboard.TargetProperty="StrokeThickness" To="0" Duration="0:0:0.2"/>
                                    <ColorAnimation
                                        Storyboard.TargetName="border2"
                                        Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" 
                                        To="Red" Duration="0"/>
                                    <DoubleAnimation 
                                           Storyboard.TargetName="border3" 
                                           Storyboard.TargetProperty="StrokeThickness" 
                                           From="0.0" To="5.0" Duration="0"/>
                                </Storyboard>

                                <Storyboard x:Key="StopAni">
                                    <DoubleAnimation
                                       Storyboard.TargetName="border2"
                                       Storyboard.TargetProperty="StrokeThickness" To="5" Duration="0:0:2.5"/>
                                    <ColorAnimation
                                       Storyboard.TargetName="border2"
                                       Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" 
                                       To="LightGreen" Duration="0"/>
                                    <DoubleAnimation
                                       Storyboard.TargetName="border3"
                                       Storyboard.TargetProperty="StrokeThickness"
                                       From="5.0" To="0.0" Duration="0:0:0.2"/>
                                </Storyboard>

                            </ControlTemplate.Resources>
                            <Grid>
                                <Canvas>

                                    <Ellipse x:Name="border1" Width="100" Height="100" Stroke="Transparent"/>
                                    <Ellipse x:Name="border2" Width="90" Height="90" Stroke="Transparent"/>
                                    <Ellipse x:Name="border3" Width="50" Height="50" Stroke="Transparent"/>
                                </Canvas>
                                <ContentPresenter />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsDone}" Value="false">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource StartAni}">

                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding IsDone}" Value="true">
                                        <DataTrigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource StopAni}">

                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>