SlickButton 彩色动画答案

【问题标题】：SlickButton color animationSlickButton 彩色动画
【发布时间】：2012-04-05 11:22:11
【问题描述】：

我需要创建一个彩色动画。我有一个完美的控件（一个光滑的按钮 - 最小化，关闭）。有一个鼠标悬停触发器可以改变它的颜色。问题是当我想为这种颜色过渡设置动画时。 :S

有一个例子：

<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}">
    <Grid>
        <Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
                Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1">
        </Border>
        <Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black"
                BorderThickness="1">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/>
            </Border.BitmapEffect>
        </Border>
        <Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1">
            <ContentPresenter Width="Auto" Height="Auto"  HorizontalAlignment="Center" VerticalAlignment="Center">
            </ContentPresenter>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
            </Trigger.Setters>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
                <Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
            </Trigger.Setters>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" />
</Style>

我试图删除 Trigger.Setters 部分并将其替换为：

<Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

它工作一次。鼠标进入按钮区域有动画，离开时没有动画。接下来，当鼠标再次进入该按钮时 - 没有动画，但颜色立即改变：我不知道该怎么做。我请求帮助。提前谢谢。

【问题讨论】：

标签： wpf animation colors storyboard transition

【解决方案1】：

不在这里
<Trigger Property="IsMouseOver" Value="False">

不在这里
<Trigger.Setters>

但是在这里
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>

应该是：
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="0"></Setter>

顺便说一下，我认为您将 Property="IsMouseOver" Value="False" 与 Property="IsPressed" Value="True" 混淆了

而IsMouseOver=false 上的ButtonBackgroundBorder 的Opacity 仍应为0

【讨论】：

【解决方案2】：

Thx，我很笨，不要评论：P

        <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.Setters>
                <Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
            </Trigger.Setters>
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>

一切正常:)

【讨论】：

我不知道你是不是傻:) 但是 xaml 会在你身上长大，慢慢来，否则就问吧。