Как связать свойство Polygon Fill с фоновым свойством кнопки?

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 для кнопки снаружи, стиль триггер сеттер внутри не сможет изменить Background из DependencyProperty value precedence (локальной настройки переопределяют настройки с помощью стиля в этом дело).

Таким образом, вы должны изменить Fill внутреннего многоугольника, а не Background шаблона родителя (кнопка). Однако вам нужно переместить все триггеры в ControlTemplate (с помощью 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> 

Мы используем TargetName в виде Setter, чтобы указать, какой элемент (внутри сферы действия ControlTemplate в), имеющий свойство для установки.

Answer 2

Это потому, что вы можете накладывать фон на фон, который вы определяете при загрузке элемента управления. См. Уже опубликованные answer.

Возможно, вам понадобится использовать DynamicResource для работы.