動畫導致按鈕變得不可見

Question

我一直在嘗試讓用戶控件在IsEnabled更改時進行動畫製作。

鬆散的基礎上這篇文章Button Blinking on DataTrigger

然而，當我包括ControlTemplate風格的按鈕是不可見的。 :)

<UserControl x:Class="View.UserControls.MainButton" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="40" d:DesignWidth="300"> 
<UserControl.Resources> 
    <Style TargetType="{x:Type Button}"> 
     <Setter Property="HorizontalAlignment" Value="Center" /> 
     <Setter Property="Cursor" Value="Hand" /> 
     <Setter Property="MinHeight" Value="24" /> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <SolidColorBrush Color="Transparent"/> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard Name="StartBlinking"> 
            <Storyboard> 
             <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="3" AutoReverse="True"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Trigger.ExitActions> 
           <RemoveStoryboard BeginStoryboardName="StartBlinking"/> 
          </Trigger.ExitActions> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style TargetType="{x:Type StackPanel}"> 
     <Setter Property="Orientation" Value="Horizontal" /> 
    </Style> 
    <Style TargetType="{x:Type Image}"> 
     <!--<Setter Property="Height" Value="32" /> 
     <Setter Property="Width" Value="32" />--> 
     <Setter Property="Stretch" Value="Uniform" /> 
    </Style> 
    <Style TargetType="{x:Type TextBlock}"> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="Margin" Value="5 0 0 0" /> 
    </Style> 
</UserControl.Resources> 
<Button Width="{Binding Width, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
     Command="{Binding Command, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
     ToolTip="{Binding ToolTip, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"> 
    <StackPanel> 
     <Image Source="{Binding ButtonImageSource, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" /> 
     <TextBlock Text="{Binding ButtonText, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" /> 
    </StackPanel> 
</Button> 

Answer 1

移動觸發到Style，並避免重寫ControlTemplate如果希望Button仍然看起來像一個Button：

<Style TargetType="{x:Type Button}"> 
    <Setter Property="HorizontalAlignment" Value="Center" /> 
    <Setter Property="Cursor" Value="Hand" /> 
    <Setter Property="MinHeight" Value="24" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <SolidColorBrush Color="Transparent"/> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsEnabled" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Name="StartBlinking"> 
        <Storyboard> 
         <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="3" AutoReverse="True"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Trigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="StartBlinking"/> 
      </Trigger.ExitActions> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

Answer 2

該模板定義了控制的視覺外觀。任何沒有被模板放在那裏的東西都不存在。您的模板不會在控件中添加視覺元素。因此，沒有什麼可以看到的視覺。

如果您要更換模板，在絕對最低，你必須給它一個ContentPresenter一個Border，將顯示閃爍的Background刷色內：

<ControlTemplate TargetType="{x:Type Button}"> 
    <Border Background="{TemplateBinding Background}"> 
     <ContentPresenter 
      /> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsEnabled" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Name="StartBlinking"> 
        <Storyboard> 
         <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="3" AutoReverse="True"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Trigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="StartBlinking"/> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

但如果你是幸福的與標準的Button模板一樣，使用mm8的方法，這就保留了原來的位置。如果你能找到另一種方法去做你所需要的，重寫標準模板通常會比它的價值付出更多的努力。