MouseOver ve MouseDown üzerinde Animate düğmesi

Question

WPF'de standart bir Button için kendi ControlTemplate'i yapıyorum. Kullanıcı fareyle düğmenin üzerine geldiğinde düğmenin arka planını değiştirmek istiyorum, ancak aynı zamanda kullanıcı düğmeye bastığında da (başka bir renge). Bu ortak bir davranış gibi gözüküyor, ama işe yaramayacağım.

Şablonum içinde bir Görüntü ile bir Kenarlıktan oluşur. Animasyon yapmak istediğim Sınırın arka plan rengi (gerçekten degrade). Şablonumda animasyonları (storyboard'lar) etkinleştiren tetikleyiciler var.

MouseOver/Out, yalnızca iyi çalışıyor. Düğüme bastığımda sorunum oluşuyor. Basın animasyonu olması gerektiği gibi çalışır ve ayrıca Release animasyonu da yapar. Ancak bundan sonra MouseOut asla çalışmayacak. Düğme, MouseOver durumunda kalır.

Neyi yanlış yapıyorum?

<ControlTemplate TargetType="{x:Type Button}"> 
    <ControlTemplate.Resources> 
     <Storyboard x:Key="MouseOverAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.2" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.2" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseOutAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffeeeeee" Duration="0:0:0.2" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffcccccc" Duration="0:0:0.2" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseDownAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ff9a9aff" Duration="0:0:0.1" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseUpAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.1" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" /> 
     </Storyboard> 
    </ControlTemplate.Resources> 


    <Border x:Name="ButtonBorder" CornerRadius="0" BorderBrush="#55aaaaaa" BorderThickness="1" Width="23" Height="22"> 
     <Border.Background> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
       <GradientBrush.GradientStops> 
        <GradientStop x:Name="ButtonBorderGradientStop1" Color="#ffeeeeee" Offset="0.0" /> 
        <GradientStop x:Name="ButtonBorderGradientStop2" Color="#ffcccccc" Offset="1.0" /> 
       </GradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Border.Background> 
     <Image x:Name="ButtonIcon" Source="icons/searchicon_bw.png" Width="16" Height="16" /> 
    </Border> 


    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" /> 
      </Trigger.ExitActions> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseDownAnimation}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseUpAnimation}" /> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Answer 1

Animasyonlar FillBehavior adlı bir özellik var, varsayılan değer HoldEnd olduğunu.

MouseUp animasyonunuz bittikten sonra, fare çıkış animasyonunun düzgün görüntülenmesini engelleyen değeri korur. Fare dışarı animasyon aslında çalışır, ancak fare yukarı animasyon ile kaplıdır. Tetikleyicilerin sırasını değiştirirseniz, önce IsPressed'i yerleştirirseniz, IsMouseOver animasyonunun tüm IsPressed animasyonlarını kapsadığını görebilirsiniz.

Sen onlar bitince animasyonlar özelliğini kapsayan durdurmak için Durdur için FillBehavior ayarlayabilirsiniz. Senin durumunda

, senin MouseOutAnimation üzerinde durmak FillBehavior ayarlama ve MouseUpAnimation hile yok.

(film şeridinde yer alan bu örnekte tüm içerdiği animasyonlar için geçerlidir bu yüzden.)

<ControlTemplate.Resources> 
    <Storyboard x:Key="MouseOverAnimation" Storyboard.TargetProperty="Color"> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.2" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseOutAnimation" Storyboard.TargetProperty="Color" 
       FillBehavior="Stop"> <!-- <=================== --> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffeeeeee" Duration="0:0:0.2" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffcccccc" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseDownAnimation" Storyboard.TargetProperty="Color"> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffc7c7ff" Duration="0:0:0.1" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ff9a9aff" Duration="0:0:0.1" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseUpAnimation" Storyboard.TargetProperty="Color" 
       FillBehavior="Stop"> <!-- <=================== --> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.1" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.1" /> 
    </Storyboard> 
</ControlTemplate.Resources> 

Sen What Happens After an Animation Ends? altında MSDN makale Animasyon Genel Bakış FillBehavior bölümünde daha fazla bilgi bulabilirsiniz.