Can you define multiple TargetTypes for one XAML style?

Question

In HTML/CSS you can define a style which can be applied to many types of elements, e.g.:

.highlight {
    color:red;
}

can be applied to both P and DIV, e.g.:

<p class="highlight">this will be highlighted</p>
<div class="highlight">this will also be highlighted</div>

but in XAML you seem to have to define the TargetType for styles, otherwise you get an error:

<Style x:Key="formRowLabel" TargetType="TextBlock">

is there a way to allow a XAML style to be applied to multiple elements or even to leave it open as in CSS?

Answer 1

The setters in WPF styles are checked during compile time; CSS styles are applied dynamically.

You have to specify a type so that WPF can resolve the properties in the setters to the dependency properties of that type.

You can set the target type to base classes that contain the properties you want and then apply that style to derived classes. For example, you could create a style for Control objects and then apply it to multiple types of controls (Button, TextBox, CheckBox, etc)

<Style x:Key="Highlight" TargetType="{x:Type Control}">
    <Setter Property="Foreground" Value="Red"/>
</Style>

...

<Button Style="{StaticResource Highlight}" Content="Test"/>
<TextBox Style="{StaticResource Highlight}" Text="Test"/>
<CheckBox Style="{StaticResource Highlight}" Content="Test"/>

Answer 2

<!-- Header text style -->
<Style x:Key="headerTextStyle">
    <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
    <Setter Property="Label.FontWeight" Value="Bold"></Setter>
    <Setter Property="Label.FontSize" Value="18"></Setter>
    <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
</Style>

<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="0,0,0,5" />
</Style>

I think both of these methods of declaring a style might answer your question. In the first one, there is no TargetType specified, but the property names are prefixed with 'Label'. In the second one, the style is created for Label objects.

Another method to do it is:

<UserControl.Resources>
  <Style x:Key="commonStyle" TargetType="Control">
     <Setter Property="FontSize" Value="24"/>
  </Style>
  <Style BasedOn="{StaticResource commonStyle}" TargetType="ListBox"/>
  <Style BasedOn="{StaticResource commonStyle}" TargetType="ComboBox"/>
</UserControl.Resources>

Answer 3

I wanted to apply a style to a Textblock and a TextBox but the selected answer didn't work for me because Textblock doesn't inherit from Control, in my case I wanted to affect the Visibility property, so I used FrameworkElement

<Style x:Key="ShowIfRequiredStyle" TargetType="{x:Type FrameworkElement}">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding ShowIfRequiredStyle, UpdateSourceTrigger=PropertyChanged}" Value="true">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
</Style>

<TextBlock Style="{StaticResource ResourceKey=ShowIfRequiredStyle}"/>
<TextBox Style="{StaticResource ResourceKey=ShowIfRequiredStyle}"/>

This works for the Visibility property because both items inherit from Frameworkelement and the property is defined there. Of course this will not work for properties defined only in Control, you can search the hierarchy tree and try to find a base class, anyway I thought this could help someone since this is a top search result and the selected answer is a little incomplete.

Answer 4

There is an alternative answer to the question. You CAN leave the TargetType parameter off the style altogether which will allow it to apply to various different controls, but only if you prefix the property name with "Control."

<Style x:Key="Highlight">
    <Setter Property="Control.Foreground" Value="Red"/> 
</Style> 

Obviously, this only works for properties of the base control class. If you tried to set ItemsSource say, it would fail because there is no Control.ItemsSource

Answer 5

I got this working

<Style x:Key="HeaderStyleThin"  TargetType="{x:Type Border}">
    <Setter Property="Background" Value="Black" />

    <Style.Resources>
        <Style TargetType="{x:Type TextBlock}">
               <Setter Property="Background=" Value="Red" />
        </Style>
        </Style.Resources>

</Style>