Bind a fill property in a path to a Foreground property from the ContentControl in a style

Question

I have silverlight problem I'v used two days to fight: a template with a style controls a button. In the concrete button I have a canvas with paths as content. The problem is that I want the paths fill color to bind to the Foreground from the ContentControl in the template.

However, I haven't been able to figure out how to construct the binding to get to the Forground. If I would, for example use a TextBlock, it will automatically get the Forground color from the Style. As expected as the text has a Foreground color. The reason for the binding is that the animation controls the forground and I want it to propagate to the fill color of the path. Any Ideas?

The template contains the following:

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

Down in my Layout I have the following:

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

I've cleand up the code and removed stuff to make it more readable, but I hope you get the idea behind it.

Answer 1

Since you gave a name to your button, you can use the Binding ElementName parameter:

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

Answer 2

Actually instead of setting Canvas as Content in Button you can put it in 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>

you can do anything you want if you'll use this scenario.