Mahapps.metro: can't override styles

Created on 18 Sep 2012 · 10Comments · Source: MahApps/MahApps.Metro

I'm trying to override some styles eg. metro button in my app,

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
        <Setter Property="FontFamily" Value="./resources/#Roboto Light"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>

but it doesn't work, if I don't add this, then I get the proper metro style, but when I add this only this style is applied and none of the MetroButton style is merged in. it seems like BasedOn attribute is ignored.

this is the merged dictionaries that i have in my app.xaml

  <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <local:Bootstrapper x:Key="bootstrapper" />
                    <WpfExtentions:BooleanToVisibilityConverter x:Key="HiddenIfTrue" TriggerValue="True" IsHidden="True"/>
                    <WpfExtentions:BooleanToVisibilityConverter x:Key="HiddenIfFalse" TriggerValue="False" IsHidden="True"/>
                    <WpfExtentions:BooleanToVisibilityConverter x:Key="CollapsedIfTrue" TriggerValue="True" IsHidden="False"/>
                    <WpfExtentions:BooleanToVisibilityConverter x:Key="CollapsedIfFalse" TriggerValue="False" IsHidden="False"/>
                    <WpfExtentions:StringNullOrEmptyToVisibilityConverter x:Key="HasValue"/>
                </ResourceDictionary>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
                <ResourceDictionary Source="MyResource.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Source

kayone

Most helpful comment

actually found a work around,

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">

kayone on 18 Sep 2012

👍3

All 10 comments

What happens if you move your ResourceDictionary stuff into your Windows rather than Application?

ghost on 18 Sep 2012

I gave it a shot locally, in either App.Resources or MainWindow.Resources and it works here.

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />

            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
                <Setter Property="FontFamily" Value="Times New Roman"/>
                <Setter Property="FontSize" Value="20"/>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Margin="50">
        <Button Content="hi this is some text" />
        <Button Style="{StaticResource MetroButton}" Content="hi this is some text" />
    </StackPanel>
</Window>

Produces

ghost on 18 Sep 2012

And if I add <Button Style="{x:Null}" Content="hi this is some text" /> into the mix to get the OS native styles for button, I get

ghost on 18 Sep 2012

I found out what the issue was, I was confusing MetroButton with FlatButton. which brings up another question, how can I base a style from FlatButton given it has no key.

also, thanks a lot for the fast and detailed response.

kayone on 18 Sep 2012

Uhh, you probably can't at this stage - the quickest solution would be to copy the entire style into your app and modify it that way. I'll close this issue and open a new one to better identify styles that need keys added for this sort of situation

ghost on 18 Sep 2012

actually found a work around,

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">

kayone on 18 Sep 2012

👍3

I didn't know you could do that, nice find! Still, creating the issue now so that eventually it'll get done ;)

ghost on 18 Sep 2012

Hi,

I've got the same issue. I can't override the style too. If you take your example and replace Window by MetroWindow you can't override style. Can you help me plz?

Wheelskad on 27 Sep 2013

a solution for overriding styles:

make your own Controls resource dictionary:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Base="clr-namespace:YourApplication.Base">

  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />

    <ResourceDictionary Source="pack://application:,,,/YourApplication;component/Resources/CustomControlStyles.xaml" />
    <ResourceDictionary Source="pack://application:,,,/YourApplication;component/Resources/AnotherCustomControlStyles.xaml" />

    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <Style x:Key="CustomMetroCircleButtonStyle"
         TargetType="{x:Type Button}"
         BasedOn="{StaticResource MetroCircleButtonStyle}">
  </Style>

  <Style TargetType="Base:CustomControl"
         BasedOn="{StaticResource CustomControlStyle}">
  </Style>

  <Style TargetType="Base:AnotherCustomControl"
         BasedOn="{StaticResource AnotherCustomControlStyle}">
  </Style>

</ResourceDictionary>

and put it on MainWindow xaml:

<Controls:MetroWindow.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />

      <ResourceDictionary Source="pack://application:,,,/YourApplication;component/Resources/Controls.xaml" />

      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Controls:MetroWindow.Resources>

punker76 on 27 Sep 2013

I also cannot override styles, in my case the flyout style. I tried to move everything in an own ResourceDictionary and used <Style x:Key="DefaultFlyout" TargetType="controls:Flyout" BasedOn="{StaticResource {x:Type controls:Flyout}}"> like suggested by @kayone , but it always ends up to have only the last styles I applied....

I use it like this:
Controls.xaml:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls">

        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />

            ... <!-- other custom resourceDictionaries -->

            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
        </ResourceDictionary.MergedDictionaries>
        ...
        <Style x:Key="DefaultFlyout" TargetType="controls:Flyout" BasedOn="{StaticResource {x:Type controls:Flyout}}">
            <Setter Property="Theme" Value="Accent" />
        </Style>
    </ResourceDictionary>

The app.xaml:

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/SLtime;component/View/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/SLtime;component/View/CustomAccent.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/baselight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

And the part where i want to use it, inside the <controls:MetroWindow.Flyouts><controls:FlyoutsControl>

    <controls:FlyoutsControl.ItemContainerStyle>
        <Style BasedOn="{StaticResource DefaultFlyout}"
           TargetType="{x:Type controls:Flyout}">
            <Setter Property="Header"
                Value="{Binding Header}" />
            <Setter Property="IsOpen"
                Value="{Binding Visible}" />
            <Setter Property="Position"
                Value="{Binding Position, Converter={StaticResource FlyoutPositionConverter}}" />
            <Setter Property="IsModal"
                Value="{Binding IsModal}" />
        </Style>
    </controls:FlyoutsControl.ItemContainerStyle>

See the result on this screenshot. It should be a blue flyout because i used <Setter Property="Theme" Value="Accent" /> but it doesn't work.

Has anyone an idea why this doesn't work? I don't really like the idea of copying the whole flyout style just to make my changes...