Skip to content
This repository has been archived by the owner on Sep 2, 2021. It is now read-only.

Derive from MUI styles

Charles Milette edited this page Jun 5, 2015 · 3 revisions

The following steps explain how to create a custom style that is based on the implicit MUI styles. Let's create a new implicit button style with Foreground set to Red.

<StackPanel>
  <StackPanel.Resources>
    <Style TargetType="Button">
      <Setter Property="Foreground" Value="Red" />
   </Style>
  </StackPanel.Resources>

  <Button Content="I'm a red button" />
</StackPanel>

Result

Since the style does not explicitly derive from the implicit MUI style, the default WPF style is used as base. We need to set the Style.BasedOn to the control type:

<StackPanel>
  <StackPanel.Resources>
    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
      <Setter Property="Foreground" Value="Red" />
   </Style>
  </StackPanel.Resources>

  <Button Content="I'm a red button" />
</StackPanel>

Result

This looks much better, our style is now deriving from the implicit MUI style. Now when you move the custom style to App.xaml, the button again is based on the default WPF style and incorrectly rendered. Not sure why this is the case, but to solve this you need to move your custom MUI styles to a separate ResourceDictionary, and reference that ResourceDictionary in your App.xaml like so:

MyStyles.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="Foreground" Value="Green" />
  </Style>
</ResourceDictionary>

App.xaml

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
      <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
      <ResourceDictionary Source="/MyStyles.xaml" />
   </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
 </Window.Resources>

And then it works. So in short; deriving from implicit MUI styles? Make sure your styles are defined in local resources dictionaries, or in a separate dictionary, referenced in App.xaml.