Question

我使用Styles和ControlTemplates创建了一个HexagonButton。此时HexagonButton背景为蓝色。

我希望有可能在加载按钮时设置其背景颜色，或者至少在将其放入画布时。不幸的是，当我将按钮放到画布上并尝试将背景改为其他颜色时，例如红色所有效果都连接到IsMouseOver，IsPressed不起作用。

是否可以连接此

<Polygon x:Name="HexagonPolygon" Points="1,0 0.50046, 0.86576 -0.50046, 0.86576 -1,0 -0.50046,-0.86576 0.50046,-0.86576" Fill="{TemplateBinding Background}"  Stroke="{TemplateBinding Background}" StrokeThickness="2" Stretch="Uniform"/>

用这个

        <Button Name ="OO" Width="100" Height="100"  Background ="Red" Canvas.Left="176" Canvas.Top="120" Click="Button_Click"/>

我真的不明白如何解决我的问题，需要一些建议继续我的正确方向。我应该创建用户控件还是类似的东西？

或者可能有可能用DynamicResources解决这个问题，但是如何解决。

以下是整个代码。

<Window x:Class="ForthHexagonButtonWR.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ForthHexagonButtonWR"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>

    <ResourceDictionary>
        <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.5,0.5" x:Key="HighlightBackground"  >
            <GradientStop Color="White" Offset="0" />
            <GradientStop  Color="Blue" Offset=".6" />
        </RadialGradientBrush>

        <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.5,0.5" x:Key="PressedBackground">
            <GradientStop Color="White" Offset="0" />
            <GradientStop  Color="Blue" Offset="1" />
        </RadialGradientBrush>

        <SolidColorBrush x:Key="DefaultBackground" Color="Blue" ></SolidColorBrush>
        <SolidColorBrush Color="Gray" x:Key="DisabledBackground"></SolidColorBrush>

        <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.5,0.5" x:Key="Border">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="Blue" Offset="1" />
        </RadialGradientBrush>

        <!-- The style that applies the button control template. -->
        <Style TargetType="{x:Type Button}" >
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}" >
                        <Polygon x:Name="HexagonPolygon" Points="1,0 0.50046, 0.86576 -0.50046, 0.86576 -1,0 -0.50046,-0.86576 0.50046,-0.86576" Fill="{TemplateBinding Background}"  Stroke="{TemplateBinding Background}" StrokeThickness="2" Stretch="Uniform"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="{StaticResource Border}"></Setter>
            <Setter Property="Background"  Value="{StaticResource DefaultBackground}"></Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource HighlightBackground}" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True"> 
                    <Setter Property="Background" Value="{StaticResource PressedBackground}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" Value="{StaticResource DisabledBackground}"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</Window.Resources>

<Canvas>
    <Button Name ="OO" Width="100" Height="100"  Canvas.Left="176" Canvas.Top="120" Click="Button_Click"/>
    <Button Name ="O1" Width="100" Height="100"  Canvas.Left="176" Canvas.Top="34" Click="Button_Click"/>
    <Button Name ="O2" Width="100" Height="100"  Canvas.Left="250" Canvas.Top="76" Click="Button_Click"/>
    <Button Name ="O3" Width="100" Height="100"  Canvas.Left="251" Canvas.Top="162" Click="Button_Click"/>
    <Button Name ="O4" Width="100" Height="100"  Canvas.Left="177" Canvas.Top="206" Click="Button_Click"/>
    <Button Name ="O5" Width="100" Height="100"  Canvas.Left="103" Canvas.Top="162" Click="Button_Click"/>
    <Button Name ="O6" Width="100" Height="100"  Canvas.Left="101" Canvas.Top="76" Click="Button_Click"/>
</Canvas>

Answer 1

当你从外面为你的Button设置Background时，由于DependencyProperty value precedence，内部的样式触发器设置器无法更改Fill（本地设置将覆盖在这种情况下通过Style设置。）

因此，您应该直接更改内部Polygon的Background，而不是模板化父级（Button）的ControlTemplate。但是，您需要将所有触发器移动到<Style TargetType="{x:Type Button}" > <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}" > <Polygon x:Name="HexagonPolygon" Points="1,0 0.50046, 0.86576 -0.50046, 0.86576 -1,0 -0.50046,-0.86576 0.50046,-0.86576" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Background}" StrokeThickness="2" Stretch="Uniform"/> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="HexagonPolygon" Property="Fill" Value="{StaticResource HighlightBackground}" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="HexagonPolygon" Property="Fill" Value="{StaticResource PressedBackground}" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="HexagonPolygon" Property="Fill" Value="{StaticResource DisabledBackground}"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="{StaticResource Border}"></Setter> <Setter Property="Background" Value="{StaticResource DefaultBackground}"></Setter> </Style>（使用ControlTemplate＆＃39; s触发器而不是Style＆＃39; s触发器）：

TargetName

我们使用Setter的{{1}}来指示要设置属性的元素（在ControlTemplate＆＃39;范围内）。

Answer 2

这是因为您可能会在加载控件时将背景与您定义的背景重叠。请参阅已发布的answer。

您可能需要使用DynamicResource来解决问题。

如何将Polygon Fill属性绑定到按钮的Background属性？

2 个答案: