This project is read-only.

How to derive custom style from MUI style

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
wpfbutton.png

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
muibutton.png

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
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
<ResourceDictionary Source="/MyStyles.xaml" />

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.


Last edited Sep 17, 2014 at 12:12 PM by kozw, version 4

Comments

No comments yet.