markzzz
markzzz

Reputation: 47995

What's the correct way to inherit from an already custom style in MahApps.Metro?

Here's my (general) custom Button styling for the whole App I'm building:

<Style TargetType="{x:Type Button}"
       BasedOn="{StaticResource MahApps.Styles.Button}">
    <Setter Property="HorizontalAlignment"
            Value="Left" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="BorderThickness"
            Value="2" />
    <Setter Property="Background"
            Value="Red />
</Style

which apply on all Buttons I have on the App.

Now, for some specific CustomNoBorderButtonStyle, I'd like to inherit these actual Button styles properties, and add/overwrite some more. Tried this:

<Style x:Key="CustomNoBorderButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource MahApps.Styles.Button}">
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="controls:ControlsHelper.CornerRadius"
            Value="0" />
</Style>

placing on view as:

<Button Name="buttonPlayPauseVideo"
        Style="{StaticResource CustomNoBorderButtonStyle}" />

but it miss all the style from the main Button (i.e. Red background for example is missing).

What's wrong on this settings?

Upvotes: -1

Views: 60

Answers (1)

Sir Rufo
Sir Rufo

Reputation: 19106

The style can also based on a type like

<Style x:Key="CustomNoBorderButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="controls:ControlsHelper.CornerRadius"
            Value="0" />
</Style>

but I would recommend to do it this way

<!-- Default Button Style -->

<Style x:Key="DefaultButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource MahApps.Styles.Button}">
    <Setter Property="HorizontalAlignment"
            Value="Left" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="BorderThickness"
            Value="2" />
    <Setter Property="Background"
            Value="Red" />
</Style>

<!-- Custom Style based on the default style -->

<Style x:Key="CustomNoBorderButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource DefaultButtonStyle}">
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="controls:ControlsHelper.CornerRadius"
            Value="0" />
</Style>

<!-- set the default style for any button -->

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

Upvotes: 1

Related Questions