WPF Button - Specifying Template and Style together

Question

I have a button:

<Button x:Name="someButton"
    Template="{StaticResource aButtonTemplate}"                        
    Command="{Binding MyCommand}"
    Style="{StaticResource ButtonStyle1}" >

Now, the aButtonTemplate looks like:

<ControlTemplate x:Key="aButtonTemplate" TargetType="{x:Type Button}">
        <Border Name="border" Background="Transparent" BorderBrush="Transparent" BorderThickness="2">
            <ContentPresenter x:Name="content" />
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="border" Property="BorderBrush" Value="Red"/>
            </Trigger>            
        </ControlTemplate.Triggers>
    </ControlTemplate>

Then I have the ButtonStyle1

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Viewbox>
                        <Grid>
                            <Ellipse Stroke="#f2f2f0" StrokeThickness="3" Fill="red" Width="77" Height="77"/>
                        </Grid>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Now the problem is, due to the line Template="{StaticResource aButtonTemplate}" the Style ButtonStyle1 is not getting applied. I am not seeing any Ellipse.

How can I get the Style to work along with the Template ?

EDIT: As I am specifying the ControlTemplate again in the Style ButtonStyle1, is there a way to combine both the styles into ButtonStyle2 using BasedOn? How can I do it?

Answer 1

<Style x:Key="StyleButton2"
       TargetType="Button"
       BasedOn="{StaticResource StyleButton1}">
<Setter Property="Template"
        Value="{StaticResource aButtonTemplate}"/>
</Style>

Then use just this style on the Button instance.

Obviously, have both StyleButton1 and aButtonTemplate defined before this style(cause the use of StaticResource).

Answer 2

How can I get the Style to work along with the Template?

The are both being applied but the Template property that you set to {StaticResource aButtonTemplate} overrides the value of the Template property that the Style sets. Local values takes precedence over values set by style setters: https://msdn.microsoft.com/en-us/library/ms743230(v=vs.110).aspx .

EDIT: As I am specifying the ControlTemplate again in the Style ButtonStyle1, is there a way to combine both the styles into ButtonStyle2 using BasedOn? How can I do it?

You can base a Style on another Style but you cannot base a ControlTemplate on another ControlTemplate . A ControlTemplate must be defined as a whole:

WPF: Is there a way to override part of a ControlTemplate without redefining the whole style?