WPF: how to style a class like in css?

Question

Let's say I have a UserControl with 4 Borders:

<Border />
<Border />
<Border />
<Border />

Now in my Resources I can go:

<Style TargetType="{x:Type Border}">
  ... change some properties here
</Style>

Now this is all good, but it will target all borders in my UserControl. But what if I just want to target a subset of them?

I'd like to go:

<Border Class="Type1" />
<Border Class="Type1" />
<Border />
<Border />

And then go:

<Style TargetType="{x:Type Border}" TargetClass="Type1">
  ... change some properties here
</Style>

But this obviously doesn't exist, is there some other way I can achieve what I'm after? Thanks

Answer 1

Though the syntax isn't quite as clean as in CSS, it is a lot more specific.

To build on your example, what you're looking for is:

<Border Style="{StaticResource Type1}" />
<Border Style="{StaticResource Type1}" />
<Border />
<Border />

And then go:

<Style TargetType="{x:Type Border}" x:Key="Type1">
  ... change some properties here
</Style>

Remember that WPF styles don't actually cascade like CSS does.

A more detailed styling reference: https://web.archive.org/web/20141210000517/http://dotnetslackers.com/articles/wpf/StylesResourcesAndControlTemplatesInWPF.aspx

Answer 2

Something that I find most people are not aware of is WPF's ability to nest Styles within Style.Resources. For example:

<!-- Define a new style for Borders called InfoBox, that will have a red background, 
     and further override all buttons within it to have Yellow Text.  An extra style,
     "Strawberry" is also defined, that lets specific buttons be selected to be styled
     as Green FG on DarkRed BG -->
<Style TargetType="{x:Type Border}" x:Key="InfoBox">
  <Setter Property="Background" Value="Red"/>
  <Style.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="Foreground" Value="DarkYellow"/>
    </Style>
    <Style TargetType="{x:Type Button}" x:Key="Strawberry">
      <Setter Property="Foreground" Value="Green"/>
      <Setter Property="Background" Value="DarkRed"/>
    </Style>
  </Style.Resources>
</Style>

...

<Border Style="{DynamicResource InfoBox}">
   <StackPanel>
     <Button Content="I am a banana!"/>
     <Button Style="{DynamicResource Strawberry}" Content="I am red!"/>
   </StackPanel>
</Border>

While not exactly the same as CSS (There isn't much support for standard pseudo-selectors), this gives you a huge amount of power and flexibility. Couple this with skillful use of ItemsControls and you can do some great things.