动画导致按钮变得不可见

Question

我一直在尝试让用户控件在 IsEnabled 更改时设置动画。

粗略地基于此 post 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

模板定义控件的视觉外观。模板没有放在那里的任何东西都不存在。您的模板在控件中没有放置任何可视元素。因此，视觉上什么也看不到。

如果您要替换模板，至少，您必须在 Border 中给它一个 ContentPresenter，这将显示闪烁的 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 的方法，这样就可以保留原样。如果你能找到另一种方法来做你需要做的事情，那么重写标准模板通常会比它值得付出更多的努力。

Answer 2

如果您希望 Button 仍然看起来像 Button:

，请将触发器移至 Style 并避免覆盖 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>

动画导致按钮变得不可见

Animation causes button to become invisible

wpf

animation

button

eventtrigger