Wpf – How to match the controls’ styles to the current theme? (WPF)

I think the simple answer is that you can't do (at least in this version of WPF) what you are trying to do.

That is, for any particular element only one Style can be applied.

However, as others have stated above, maybe you can use BasedOn to help you out. Check out the following piece of loose xaml. In it you will see that I have a base style that is setting a property that exists on the base class of the element that I want to apply two styles to. And, in the second style which is based on the base style, I set another property.

So, the idea here ... is if you can somehow separate the properties that you want to set ... according the inheritance hierarchy of the element you want to set multiple styles on ... you might have a workaround.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <Style x:Key="baseStyle" TargetType="FrameworkElement">
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
        <Style TargetType="Button" BasedOn="{StaticResource baseStyle}">
            <Setter Property="Content" Value="Hello World"/>
        </Style>
    </Page.Resources>
    <Grid>
        <Button Width="200" Height="50"/>
    </Grid>
</Page>

Hope this helps.

Note:

One thing in particular to note. If you change the TargetType in the second style (in first set of xaml above) to ButtonBase, the two Styles do not get applied. However, check out the following xaml below to get around that restriction. Basically, it means you need to give the Style a key and reference it with that key.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <Style x:Key="baseStyle" TargetType="FrameworkElement">
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
        <Style x:Key="derivedStyle" TargetType="ButtonBase" BasedOn="{StaticResource baseStyle}">
            <Setter Property="Content" Value="Hello World"/>
        </Style>
    </Page.Resources>
    <Grid>
        <Button Width="200" Height="50" Style="{StaticResource derivedStyle}"/>
    </Grid>
</Page>

Your best bet, to ensure a consistent behavior and appearance across operating systems, would be to re-template the TabItem control and then use a Trigger to modify a part of your new template when a TabItem is selected. Try something like the following:

<Grid>
<Grid.Resources>
  <Style x:Key="Custom">
    <Setter Property="Control.Background" Value="#FF47C7C8"/>
    <Setter Property="Control.BorderBrush" Value="#FF47C7C8"/>
    <Setter Property="Control.Foreground" Value="White"/>
  </Style>
  <Style BasedOn="{StaticResource Custom}" TargetType="TabControl"/>
  <Style TargetType="TabItem">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type TabItem}">
          <Grid>
            <Border
              Name="Border"
              Background="#FF47C7C8"
              BorderBrush="#FFFFFF"
              BorderThickness="1,1,1,1"
              CornerRadius="2,2,0,0">
              <ContentPresenter
                x:Name="ContentSite"
                HorizontalAlignment="Center"
                Margin="12,2,12,2"
                VerticalAlignment="Center"
                ContentSource="Header"
                RecognizesAccessKey="True"/>
            </Border>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="True">
              <Setter Property="Panel.ZIndex" Value="100"/>
              <Setter TargetName="Border" Property="Background" Value="#FF47C7C8"/>
              <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Grid.Resources>
<TabControl>
  <TabItem Header="Item 1"/>
  <TabItem Header="Item 2"/>
  <TabItem Header="Item 3"/>
  <TabItem Header="Item 4"/>
</TabControl>

Bon chance!