将路径中的填充属性绑定到样式中 ContentControl 中的 Foreground 属性

Posted 2023-02-22

【中文标题】将路径中的填充属性绑定到样式中 ContentControl 中的 Foreground 属性

【英文标题】：Bind a fill property in a path to a Foreground property from the ContentControl in a style

【发布时间】：2011-04-20 21:08:20

【问题描述】：

我用了两天的时间来解决silverlight问题：一个带有样式的模板控制一个按钮。在具体按钮中，我有一个以路径为内容的画布。问题是我希望路径填充颜色从模板中的 ContentControl 绑定到前景。

但是，我无法弄清楚如何构造绑定以到达前台。例如，如果我想使用 TextBlock，它将自动从 Style 中获取 Forground 颜色。正如预期的那样，文本具有前景色。绑定的原因是动画控制前景，我希望它传播到路径的填充颜色。有什么想法吗？

模板包含以下内容：

<Style x:Key="PathButtonStyle" TargetType="Button">

... Animations and state stuff

  <Border x:Name="ButtonBackground" BorderBrush="TemplateBinding BorderBrush" >
    <ContentControl x:Name="ContentContainer" 
      ContentTemplate="TemplateBinding ContentTemplate" 
      Content="TemplateBinding Content" 
      Foreground="TemplateBinding Foreground" />
  </Border>
</Style>

在我的布局中，我有以下内容：

<Button x:Name="Play" Style="StaticResource PathButtonStyle" >
  <Canvas x:Name="PlayIcon">
    <Path Data="F1M191.4839,96.1763L177.9149,106.5173L177.9149,85.9293z" 
          Fill="PATH TO CONTENTCONTROLS FOREGROUND" />
  </Canvas>
</Button>

我已经清理了代码并删除了一些内容以使其更具可读性，但我希望你能理解它背后的想法。

【参考方案1】：

其实不用在Button中设置Canvas作为Content，你可以把它放到Templete中。

      <Style x:Key="PathButtonStyle" TargetType="Button">

    ... Animations and state stuff
     <Canvas x:Name="PlayIcon">
    <Path Data="F1M191.4839,96.1763L177.9149,106.5173L177.9149,85.9293z" 
          Fill="TemplateBinding Foreground" />
  </Canvas>
      <Border x:Name="ButtonBackground" BorderBrush="TemplateBinding BorderBrush" >
        <ContentControl x:Name="ContentContainer" 
          ContentTemplate="TemplateBinding ContentTemplate" 
          Content="TemplateBinding Content" 
          Foreground="TemplateBinding Foreground" />
      </Border>
    </Style>

如果你会使用这个场景，你可以做任何你想做的事情。

【讨论】：

这个答案没有意义，路径 是 内容，如果只需要一个路径，为什么还要费心使用模板。这个想法是能够将各种不同的路径放入样式按钮中。

我将 Canvas 移至模板，因为在那里我将能够绑定到 ContentContainer。据我所知，没有其他方法可以做到这一点。实际上，即使有一个路径，您也可能会费心拥有模板需要（仅仅是因为您可能需要一些模板更改......）。虽然上面的答案是解决当前问题的方法。

【参考方案2】：

由于您为按钮命名，您可以使用 Binding ElementName 参数：

<Button x:Name="Play" Style="StaticResource PathButtonStyle" >
    <Canvas x:Name="PlayIcon">
        <Path Data="F1M191.4839,96.1763L177.9149,106.5173L177.9149,85.9293z" 
            Fill="Binding Foreground, ElementName=Play" />
    </Canvas>
</Button>

【讨论】：

我对前景动画没有帮助。我一直在寻找解决方案。

【参考方案3】：

绑定到 ContentControl 应该会有所帮助（Silverlight 5）：

<Button x:Name="Play" Style="StaticResource PathButtonStyle" >
    <Canvas x:Name="PlayIcon">
        <Path Data="F1M191.4839,96.1763L177.9149,106.5173L177.9149,85.9293z" 
              Fill="Binding Foreground, RelativeSource=RelativeSource FindAncestor, AncestorType=ContentControl" />
    </Canvas>
</Button>