Search code examples
c#wpftemplatesxamlstyles

How do I bind template with style?


I have a C# WPF application where I need to create a bunch of image/text buttons with different colors. To that end I created an ImageButton derived from Button class.

I want my button to have round corners so I have created the following control template:

<ControlTemplate x:Key="RoundedButtonTemplate" 
  TargetType="{x:Type MyProject:ImageButton}">
  <Grid>
    <Border x:Name="border" 
      Background="WHAT DO I PUT HERE?" CornerRadius="10"/>
  </Grid>           

Now I want to be easily able to change the color of the border above, just by changing styles in XAML. I have the following styles defined.

Green Button Style:

<Style x:Key="GreenButtonStyle" 
  TargetType="{x:Type MyProject:ImageButton}">
  <Setter Property="Background" 
          Value="{DynamicResource GreenButtonBrush}"/>
          RoundedButtonTemplate}"/>
  </Style>

Blue Button Style:

<Style x:Key="GreenButtonStyle" 
  TargetType="{x:Type MyProject:ImageButton}">
  <Setter Property="Background" 
          Value="{DynamicResource BlueButtonBrush}"/>
          RoundedButtonTemplate}"/>
</Style>

My client code looks like this:

<local:ImageButton HorizontalAlignment="Left" 
    Margin="24,19.234,0,20" Width="97" 
    Grid.Row="3" 
    Style="{DynamicResource GreenButtonStyle}" 
    Template="{DynamicResource RoundedButtonTemplate}"/>

My question is how do I make the template know which style to use? I tried adding the following property to my style, but didn't have much success:

<Setter Property="Template" 
    Value="{DynamicResource RoundedButtonTemplate}"/>

Solution

  • I think I figured it out. All that was needed was placing the following text in my template definition:

    Background="{TemplateBinding Background}"
    

    More information can be found in this article: TemplateBinding: a bridge between styles and templates