Wpf CustomControl why is the style setting not overiding the default

Question

Consider the following really simple CustomControl:

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


    <Style TargetType="{x:Type local:VtlCustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:VtlCustomButton}">
                    <Grid>
                        <Button  Content="Hi" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

And if I add a couple of these to a test project I get the following:

So far so good. Now I decide that in fact I'd prefer to set the background colour of each button to be red. Obviously I could set each button's background property individually;

 <Button  Content="Hi" Background="Red" />

And that will work. Logic dictates however that if I want all buttons to have a red border then clearly a style would make more sense, so to that end I alter the code of the control like so:

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

    <Style TargetType="{x:Type Button}">
        <Setter Property="Background"
                Value="Red" />
    </Style>
    <Style TargetType="{x:Type local:VtlCustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:VtlCustomButton}">
                    <Grid>
                        <Button  Content="Hi" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

However this is having no effect. I'm sure that the principle is correct but applying it to the specifics of a custom control is constantly frustrating me. Why is this as it currently is failing to produce the expected result. Is it because of where I put the style, or something more fundamental that I have failed to grasp?

Edit

I've been trying to get to grips with creating Custom (NOT user) controls and the way to apply styles and templates to them. The control I really want to influence is made up of several different element (buttons, images, panels textboxes etc) but for the sake of this question I opted for a a custom control based on the standard vs template resulting in the code shown above. Using based on definitely hasn't appeared to work, but I did find that the following amendment did work. I'd love to know why this works over my original and what I'm really doing incorrectly in the first place (ie there's probably a more efficient way to go about this especially as there are several elements whose style I'd like to amend).

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

    <Style x:Key="vtlstyle"
           TargetType="{x:Type Button}">
        <Setter Property="Background"
                Value="Red" />
    </Style>
    <Style TargetType="{x:Type local:VtlCustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:VtlCustomButton}">
                    <Grid>
                        <Button  Content="Hi"
                                 Style="{StaticResource vtlstyle}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Possible duplicate of [inherit style from default style](http://stackoverflow.com/questions/11581475/inherit-style-from-default-style) — Jose, Nov 16 '15 at 12:10

Jose · Answer 1 · 2015-11-16T13:34:09.260

0

Use BasedOn:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Red" />
</Style>

<Style x:Key="myButtonStyle" TargetType="{x:Type local:VtlCustomButton}" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="Content" Value="Hi"/>
</Style>

EDIT>>>>>

Using the style on a button(out of resources):

<local:VtlCustomButton Style="{StaticResource myButtonStyle}" />

edited Nov 16 '15 at 13:34

answered Nov 16 '15 at 12:06

Jose

1,857
1
16
34

Thank you but that suggestion doesn't work and gives the following error when tried, 'Can only base on a style with a target that is base type 'VtlCustomButton''. I'm fairly certain that this all revolves around the fact that it's a custom control, but I've not found a way to achieve something which I would have thought was relatively simple. – Dom Sinclair Nov 16 '15 at 12:21
Have you defined your CustomButton as Button? like this: `public class VtlCustomButton: Button` – Jose Nov 16 '15 at 12:22
No I hadn't, I'd inherited from control. So I changed that to inherit from button, and whilst that does remove the error it does not result in buttons with a red background unfortunately. – Dom Sinclair Nov 16 '15 at 12:29
Last comment was wrong...I mean, why are you using a control template? – Jose Nov 16 '15 at 13:02
Truth is that I don't know enough about styles and templates to give you a straight answer to that. The point of the whole exercise is to try and teach myself just when and where I should be using these during the development of a custom control. – Dom Sinclair Nov 16 '15 at 13:13
I think that you can use Styles or Templates, but not both at the same time. Look at my updated answer. – Jose Nov 16 '15 at 13:18

Wpf CustomControl why is the style setting not overiding the default

1 Answers1