DataTrigger и приложить новую раскадровку

Question

У меня есть переменная, называемая IsDone в ViewModel. Я хочу прикрепить новую раскадровку, когда IsDone изменил значение. Это выглядит как процесс загрузки, запускает анимацию при нажатии кнопки, ждет чего-то и затем устанавливает IsDone верно, чтобы вызвать StopAni. Проблема заключается в том, что border3 не отображается, когда IsDone is true. Все идеи, спасибо. Кнопка шаблона:

<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> 

Стопани:

<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

Определите ваш Resources в ControlTemplate. И присвойте некоторое начальное значение 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>