在后台动画化SolidColorBrush

Question

我试图创建一个简单的按钮样式，这将改变背景的不透明度从0.0到1.0鼠标上方(反之亦然)。我正在为上述按钮创建一个模板，并绑定模板中的所有属性。除了后台的SolidColorBrush之外，所有这些都正常工作，所以我无法绑定到模板绑定。由于上下文的原因，我已经看到一些提到TemplateBinding不是正确的方法，但是我无法找到另一个解决方案。我怀疑，可能存在一个问题，Background是一个Brush，我只需要一个Color组件的画笔，但我无法获得它。

显而易见的覆盖是创建两种不同颜色的模板样式，但我想避免这样的硬编码和复制粘贴。我想要的是一个在Button上指定Background属性的选项，该属性将在SolidColorBrush中使用，然后由不透明度来完成其余的操作。

<Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle">
    <Setter Property="Width" Value="46" />
    <Setter Property="Height" Value="32" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="VerticalAlignment" Value="Center" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Border.Background>
                        <SolidColorBrush x:Name="ButtonBackgroundBrush" Color="???" Opacity="0.0" />
                    </Border.Background>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" />
                </Border>
                <ControlTemplate.Resources>
                    <Storyboard x:Key="MouseOverAnimation">
                        <DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.15" />
                    </Storyboard>
                    <Storyboard x:Key="MouseOutAnimation">
                        <DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.15" />
                    </Storyboard>
                </ControlTemplate.Resources>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后，按如下方式使用按钮：

<Button x:Name="MinimizeButton" Style="{StaticResource WindowButtonStyle}" Click="MinimizeButton_Click" Background="Green">
    <Image Source="../Resources/WindowButtons/Images/win-minimize.png" Width="12" Height="12"></Image>
</Button>

添加了Background="Green"属性设置来测试它，但没有工作。

Answer 1

您可以使用TemplateBinding将Border的Background属性绑定到Button的Background，然后将SolidColorBrush的Opacity属性动画如下：

<Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle">
    <Setter Property="Width" Value="46" />
    <Setter Property="Height" Value="32" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="VerticalAlignment" Value="Center" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" />
                </Border>
                <ControlTemplate.Resources>
                    <Storyboard x:Key="MouseOverAnimation">
                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)" To="1.0" Duration="0:0:0.15" />
                    </Storyboard>
                    <Storyboard x:Key="MouseOutAnimation">
                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)" To="0.0" Duration="0:0:0.15" />
                    </Storyboard>
                </ControlTemplate.Resources>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

回答我自己的问题，就像往常一样--你在S/O上发表文章后就想出了解决方案，所以我希望它能对某人有所帮助：

...
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Border.Background>
                            <!-- ReSharper disable once Xaml.BindingWithContextNotResolved -->
                            <SolidColorBrush x:Name="ButtonBackgroundBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.Color}" Opacity="0.0" />
                        </Border.Background>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" />
                    </Border>
...

我也包括了ReSharper disable，因为ReSharper的警告是阻止我尝试这个的原因--绝望迫使我无论如何尝试它。