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?

I think you want to move all of the ControlTemplate work into your Style template and least that's how I remember doing it over year ago. — kenny, Mar 20 '17 at 20:08
I am using the style in some other places too...So in this case i wouldn't want to combine those two — Sabz, Mar 20 '17 at 20:11
A control can have only one Template. Pick one template and use it. Set it in the style or set it on the Button; doesn't matter. Pick one template and make that one do whatever you want done. — 15ee8f99-57ff-4f92-890c-b56153, Mar 20 '17 at 20:11
@sabz You can use Style "inheritance" to customize a base style. update: see http://stackoverflow.com/questions/13016932/how-to-create-a-style-based-on-default-style — kenny, Mar 20 '17 at 21:12

score 1 · Answer 1 · answered Mar 21 '17 at 05:37

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).

answered Mar 21 '17 at 05:37

Mishka

508
3
5

Thanks for your response. However, this does not work. The style with ellipse is not getting applied... – Sabz Mar 21 '17 at 06:58
Can you please post how you used it? – Mishka Mar 21 '17 at 06:59
– Sabz Mar 21 '17 at 07:05
I meant on the instance of the button. Anyway I think I misunderstood you. If you want to see the Ellipse, get that ControlTemplate outside and make it a resource(give it a key), and then reference it either by using a style that has it, or on the Button directly. – Mishka Mar 21 '17 at 07:09

score 1 · Answer 2 · edited May 23 '17 at 11:46

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?

WPF Button - Specifying Template and Style together

2 Answers2