ToggleButton Controlアニメーションでもなくてもパスを回転させるテンプレートを作成

Question

ToggleButtonControlTemplateの場合をクリックするとアニメーションが表示されますIsCheckedが変更されたときにアニメーションが表示されます。

<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}"> 
    <Border x:Name="ExpanderButtonBorder" 
     Background="{TemplateBinding Background}" 
     BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="{TemplateBinding BorderThickness}" 
     Padding="{TemplateBinding Padding}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <Rectangle Fill="Transparent"/> 
      <Ellipse x:Name="Circle" 
        Grid.Column="0" 
        Stroke="DarkGray" 
        Fill="White" 
        Width="15" 
        Height="15" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center"/> 
      <Path x:Name="Arrow" 
       Grid.Column="0" 
       Data="M 1,1.5 L 4.5,5 8,1.5" 
       Stroke="#FF666666" 
       StrokeThickness="2" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       RenderTransformOrigin="0.5,0.5"> 
      </Path> 
     </Grid> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsChecked" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="Arrow" 
             Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
             To="180" 
             Duration="0:0:0.4"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="Arrow" 
             Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
             To="0" 
             Duration="0:0:0.4"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

ただし、アニメーションを再生しないようにする条件があります。

このような

ToggleButtonが最初にロードされ、それが事前にチェックされ、
または、
VirtualizingPanelでそれを使用している場合、ボタンの行がスコープの外に出ると、再び入ってきます。

一部scenerios：
1）事前にチェックされず、クリックから、それがアニメーションなしアロー180度回転にまっすぐ進みます。

2）クリックしてチェックしている場合は、180にアニメーションが回転します。

3）クリックされていて、CheckedがFalseの場合、アニメーションが0に回転します。

どうすればこの問題を解決できますか？

Answer 1

はこのような何かを試してみてください：

<ControlTemplate.Triggers> 
    <MultiTrigger> 
     <MultiTrigger.Conditions> 
      <Condition Property="IsChecked" Value="True" /> 
      <Condition Property="IsPressed" Value="False" /> 
      <!--<Condition Property="IsMouseOver" Value="False" /> not sure if needed in your case--> 
     </MultiTrigger.Conditions> 
     <!--your logic for changing without animation--> 
     <!--<Setter Property="" Value="" />--> 
    </MultiTrigger> 

    <MultiTrigger> 
     <MultiTrigger.Conditions> 
      <Condition Property="IsChecked" Value="True" /> 
      <Condition Property="IsPressed" Value="True" /> 
      <!--<Condition Property="IsMouseOver" Value="False" /> not sure if needed in your case--> 
     </MultiTrigger.Conditions> 
     <!--your logic for changing with animation--> 
     <!--<Setter Property="" Value="" />--> 
    </MultiTrigger> 

    <MultiTrigger> 
     <MultiTrigger.Conditions> 
      <Condition Property="IsChecked" Value="False" /> 
      <Condition Property="IsPressed" Value="True" /> 
      <!--<Condition Property="IsMouseOver" Value="False" /> not sure if needed in your case--> 
     </MultiTrigger.Conditions> 
     <!--your logic for changing with animation--> 
     <!--<Setter Property="" Value="" />--> 
    </MultiTrigger> 
</ControlTemplate.Triggers>