Wpf CustomControl why is the style setting not overiding the default - wpf

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>

Answer 1

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}" />