アニメーションでボタンが見えなくなる

Question

私はIsEnabledが変更されたときにユーザーコントロールをアニメーション化しようとしました。

私はボタンが見えないControlTemplateスタイルが含まれている場合に緩く、しかし、このポストButton Blinking on DataTrigger

に基づきます。 :)

<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にトリガを移動し、あなたは Buttonはまだ Button見えるようにしたい場合は ControlTemplateを上書きしないよう

：

<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

テンプレートは、コントロールの外観を定義します。テンプレートによってそこに置かれていないものはありません。あなたのテンプレートは、コントロールにビジュアルな要素を入れません。したがって、見るべき視覚的なものはありません。

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

しかし、あなたは満足している場合：あなたは絶対最低でも、テンプレートを交換している場合

、あなたはそれを点滅Backgroundブラシの色が表示されますBorder内部ContentPresenterを与える必要があります標準のButtonテンプレートでは、代わりにmm8のアプローチを使用してください。標準的なテンプレートを書き直すことは、必要なことをやり遂げる別の方法を見つけることができれば、それは価値があるよりもはるかに多くの労力になることが分かります。