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

Question

我已经通过使用样式和控件模板创建了一个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

当你从外面的按钮组Background，样式触发二传手内将无法通过风格在这个改变是因为BackgroundDependencyProperty value precedence（本地设置将覆盖设置案件）。

因此，您应该直接更改内部多边形的Fill，而不是模板父级（Button）的Background。然而，你需要将所有触发器移入ControlTemplate（使用控件模板的INSTEAD OF触发器类型的触发器）：

<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> 

我们使用Setter的TargetName指示哪些元素（控件模板的范围内），其具有的属性进行设置。

Answer 2

这是因为您可能会在加载控件时使用您定义的背景覆盖背景。请参阅已发布answer。

您可能需要使用DynamicResource来处理这些事情。