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.

Hebe

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>

Papain

I doesn't help to the foreground animation. I stay searching solution. – Revell

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.

Macedonian

This answer makes no sense, the path is the content, why bother having a template at all if only one path is ever needed. The idea is to be able to place a variety of different paths into styled button. – Pannell

I moved Canvas to the Template because there I will be able to Bind to ContentContainer.As far as I know there is no other way to do it.Actually you could bother to have Template even if one Path is needed (simply because you could need Some Template changes...).Though answer above is the way to go for current problem. – Macedonian

Answer 3

Binding to ContentControl should help (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>

Horatio