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将Background的{{1}}属性绑定到Border的{{1}}，然后为Background设置动画这样的Button的属性：

Opacity

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的警告形式让我无法尝试这个 - 而绝望迫使我尝试它。

在背景中动画SolidColorBrush

2 个答案: