How to extend a style in WPF

Question

I've made the default button to look like this:

<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" 
                        SnapsToDevicePixels="true"
                        CornerRadius="0">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And I want for the Login button to be extended from the default button only to change the "CornerRadius" property witch is in border so i could make it round, without making another style/template or using C# code. I want to do it like this or something like it:

 <Style x:Key="loginButton" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="CornerdRadius" Value="10"/>
 </Style>

Possible duplicate of [Set a property of a nested element in an WPF style](https://stackoverflow.com/questions/40657840/set-a-property-of-a-nested-element-in-an-wpf-style) — ASh, Jul 02 '17 at 17:40
Have you tried to add a x:key eg baseButton to the base style and then basing the new style on this key BasedOn="{StaticResource baseButton}"? — Gavin, Jul 02 '17 at 17:42
if I add a x:key to the base style then it wont be a base style anymore, it will become a custom style. — Toody, Jul 02 '17 at 17:59

FatalJamòn · Answer 1 · 2017-07-07T13:19:00.943

3

Give your style a name, then make a key-less style that’s just based on it.

<Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}">
     <Setter ... />
</Style>

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

Then make your second style based on your base style, for your connect button.

<Style x:Key="LoginButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
    <Setter ... />
</Style>

edit :

There is no "CornerRadius" propery in the WPF button. You would have to make a subclass that inherits Button and adds a CornerRadius dependency property. Only then you can inherit your style like you want, and only change one setter.

If you don't want to subclass Button, you'll have to do a second style with another template and rewrite all the triggers, unfortunately.

Another option is to use an existing property like BorderThickness, Padding or Margin, and use that with a TemplateBinding in your ControlTemplate. But it's kind of a "hack" because the name of the property does not equal its function.

edit 2 :

As suggested by ASh, you may also use attached dependency properties to solve your problem. https://stackoverflow.com/a/40663219/1506454

edited Jul 07 '17 at 13:19

answered Jul 03 '17 at 05:24

FatalJamòn

386
2
10

there is no `CornerRadius` in Button class but there are more options than making a derived class: https://stackoverflow.com/a/40663219/1506454 – ASh Jul 03 '17 at 07:34
I know there is no CornerRadius in the button property that's just an example i just need that the second style to be able to change only the CornerRadius from Border without making the hole template again, and the is no problem with BasedOn="{StaticResource {x:Type Button}}" works perfectly fine i don't need to make another keyed style. – Toody Jul 03 '17 at 09:25
Well I don't know, I saw your comments on the other post, so that's why I posted this answer with the BasedOn stuff. ASh is right, you can use an attached DependencyProperty to solve your problem. – FatalJamòn Jul 03 '17 at 10:55
does that mean i have to use C#? because i want to use pure xaml . – Toody Jul 03 '17 at 20:09
Yes, you must use C# to make that attached property. What is wrong with this? – FatalJamòn Jul 04 '17 at 06:04
Because I'm looking to make my app pure xaml only, there has to be a way to do that without c# or making another template from scratch. – Toody Jul 04 '17 at 14:45
But is there a strong xaml only requirement (eg loading it with XamlReader class) or is it just you? Because for the latter I suggest you to drop this requirement, there are plenty of people who think pure xaml is best but honestly it’s not more maintainable or anything. It’s sometimes just making your life harder or even hit a wall like in your case. – FatalJamòn Jul 04 '17 at 15:08
I like challenges and I'm trying to learn hard points of xaml. I'm trying to find somebody that is well-known to this language and give me a few tricks on how could i possible do this. – Toody Jul 07 '17 at 12:31
Okay. But there is no way of doing what you want without a tiny bit of C#. Unless using another property from your control like BorderThickness, like I suggested in my answer. – FatalJamòn Jul 07 '17 at 13:08

How to extend a style in WPF

1 Answers1

Linked

Related