动画会使按钮变为不可见

时间:2017-08-30 15:16:50

标签: wpf animation button eventtrigger

我一直试图让用户控件在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>

2 个答案:

答案 0 :(得分:1)

模板定义控件的视觉外观。模板没有放在那里的任何东西都没有。您的模板不会在控件中放置可视元素。因此,没有任何视觉可见。

如果你要更换模板,绝对最低限度,你必须在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&#39},这样就可以了。如果你能找到另一种方法去做你需要的东西,那么重写标准模板通常会比它的价值更大。

答案 1 :(得分: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>