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.

score 9 · Accepted Answer · answered Mar 25 '11 at 00:37

9

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>

answered Mar 25 '11 at 00:37

Mart

5,608
3
32
45

4

I doesn't help to the foreground animation. I stay searching solution. – Viacheslav Smityukh Oct 28 '12 at 12:35

score 1 · Answer 2 · answered Mar 24 '11 at 19:12

1

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.

answered Mar 24 '11 at 19:12

Sonosar

526
2
12

5

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. – AnthonyWJones Mar 25 '11 at 13:20
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. – Sonosar Mar 26 '11 at 09:27

Victor · Answer 3 · 2015-03-23T20:58:44.453

0

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>

edited Mar 23 '15 at 20:58

answered Mar 15 '15 at 22:40

Victor

21
1
3

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

3 Answers3

Linked