Changing the lineargradient offset colour of content template based on templatebinding background colour WPF

Question

Ok so here's the problem. Am trying to figure out how to make this work:

Consider the following ControlTemplate for creating a Custom Button:

<ControlTemplate x:Key ="cButton" TargetType="{x:Type Button}">
      <!--Styles-->
      <Grid x:Name="bkg">
      <Grid.Background>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
           <GradientStop Color="{TemplateBinding Background}" Offset="0.5"/><!-- Error! -->
           <GradientStop Color="White" Offset="1.0"/>
       </LinearGradientBrush>
      </Grid.Background>
      <ContentPresenter 
    TextBlock.FontSize="80" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" 
    ContentSource="Content" />
      </Grid>
      <!--Triggers-->
      <ControlTemplate.Triggers>
         <Trigger Property="IsPressed" Value="True">
         <Setter TargetName="bkg" Property="Background" Value="White"/>
         </Trigger>
      </ControlTemplate.Triggers>
   </ControlTemplate>

This Control Template forms part of this script and as you can see I am trying to get the background colour from the button declaration outlined in the main grid.

<Grid>
<Grid.Resources>
   <ControlTemplate x:Key ="cButton" TargetType="{x:Type Button}">
      <!--Styles-->
      <Grid x:Name="bkg">
      <Grid.Background>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
           <GradientStop Color="{TemplateBinding Background}" Offset="0.5"/><!-- Error! -->
           <GradientStop Color="White" Offset="1.0"/>
       </LinearGradientBrush>
      </Grid.Background>
      <ContentPresenter 
    TextBlock.FontSize="80" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" 
    ContentSource="Content" />
      </Grid>
      <!--Triggers-->
      <ControlTemplate.Triggers>
         <Trigger Property="IsPressed" Value="True">
         <Setter TargetName="bkg" Property="Background" Value="White"/>
         </Trigger>
      </ControlTemplate.Triggers>
   </ControlTemplate>
  </Grid.Resources>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions >
  <Button Name="btnIn" Grid.Column="0" Content="IN" Background="Green"  Foreground="White" Template="{StaticResource cButton}"/>
  <Button Name="btnOut" Grid.Column="1" Content="OUT" Background="Red" Foreground="White" Template="{StaticResource cButton}" />
  </Grid>

Ok now Main question is this one..

Question 1: Why is the line marked with an Error Comment in the ControlTemplate of the button NOT retrieving the background colour using the templatebinding? Had I used a solid colour it would have worked fine so I see no reason why it should not work in this manner. And please provide reason why this is happening.

The following are still a bit unclear and I don't know if they may be related to the problem, if someone can clear them out it would be great.

Question 2: What is the difference between these two TargetType values "Button" and "{x:Type Button}". I know that they are a typeof equivalent but is there any difference between the two? I read MSDN but the real difference is not that clear.

Question 3: When would I use x:Name and when would I use Name ? The difference again is unclear.

Question 4: What does x:Static do?

2) http://stackoverflow.com/questions/13558287/what-is-the-difference-for-targettype-xtype-button-and-targettype-button — chameleon, Jan 18 '13 at 07:31
3) http://stackoverflow.com/questions/589874/in-wpf-what-are-the-differences-between-the-xname-and-name-attributes — chameleon, Jan 18 '13 at 07:31
4) http://stackoverflow.com/questions/507942/what-does-xstatic-mean-in-xaml — chameleon, Jan 18 '13 at 07:37
MANY THANKS hameleon86- So in summary for other readers - x:Type is a markup extension and when used within other markup extensions, the former one (which can be used as a property/value attribute within the element) would cause confusion as it might refer to a key rather than the type. x:Name can be accessed from everywhere and can access anything whereas Name can be used within FrameworkElement scope. x:Static for data transfer from constants in code behind to XAML — Falco, Jan 19 '13 at 01:01

chameleon · Answer 1 · 2013-01-21T08:02:34.280

0

I think that your template does not work correctly because Background property is a Brush (class). And you try bind it to Color (struct)

UPD You can use simple converter like this:

public class BrushToColorConverter: IValueConverter{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        SolidColorBrush b = value as SolidColorBrush;
        if (b != null)
        {
            return b.Color;
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Add it to resources:

<wpfApplication1:BrushToColorConverter x:Key="btcConv"/>

And modify your style:

 <Grid.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource btcConv}}" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1.0"/>
                    </LinearGradientBrush>
                </Grid.Background>

Or you can use binding like this (if you sure that Background is SolidColorBrush):

<GradientStop Color="{Binding Path=Background.Color, RelativeSource={RelativeSource TemplatedParent}}" Offset="0.5"/>

edited Jan 21 '13 at 08:02

answered Jan 18 '13 at 07:36

chameleon

984
10
15

The Brush class is making use of the color struct in the gradient stops as seen from the code so I don't think so. – Falco Jan 19 '13 at 00:55
How you can get color form brush without converter? I think that it's impossible because system doesn't know what kind of brush you want use (solid? gradient? custom?) Similar question http://social.msdn.microsoft.com/Forums/en-CA/wpf/thread/611ff0b6-f792-45b9-ba67-deb7b47d5806 – chameleon Jan 19 '13 at 13:35
I am just using the colour (which is solid) in one of the gradient stops. How would I be able to pass in a parameter from the element into the gradient stop to make it change according to the element USING that linear gradient ? Please review the code. It should be possible. – Falco Jan 19 '13 at 14:29
GradientStop is a Color, Background is a Brush. http://blogs.msdn.com/b/mikehillberg/archive/2007/05/07/howtotargetatemplatesetteratnonelementcontent.aspx – chameleon Jan 19 '13 at 14:39
So in a nutshell if I write a converter to extract the color within the Brush would the code work ? I am just doing this because I require the buttons to have a gradient finish to them and a tint according to the value I pass in from within the button element. If there is a more appropriate way of doing it (such as passing some variable from the button into the Linear Gradient) please do let me know cause maybe I am approaching this wrong. – Falco Jan 20 '13 at 20:19

Changing the lineargradient offset colour of content template based on templatebinding background colour WPF

1 Answers1