-
Notifications
You must be signed in to change notification settings - Fork 755
Derive from MUI styles
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.
(c) 2013-2015 First Floor Software
Getting started
- Screenshots
- Getting started
- Getting started without templates
- Predefined page layout
- Handle navigation events
Tips and tricks
Appearance
BBCode