Question

我需要创建一个颜色动画。我有一个控件（一个光滑的按钮 - 最小化，关闭），它完美地工作。鼠标悬停触发器会改变其颜色。问题是我想要为这种颜色过渡设置动画。：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>

它工作一次。当鼠标进入按钮区域时会有一个动画，但是当它离开时没有动画。接下来当鼠标再次进入该按钮时 - 没有动画，但颜色立即改变：S我不知道如何做到这一点。我求求一些帮助。 Thx提前。

Answer 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"混淆了

Opacity上ButtonBackgroundBorder IsMouseOver=false的{{1}}应为0

Answer 2

谢谢，我很蠢，不评论：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>

一切正常：）

SlickButton彩色动画

2 个答案: