How to apply a style to button in WPF?

Question

I am trying to apply a style to button how can we achieve this?

Below is my sample XAML, but it's not working

  <Grid>
    <Button Width="150" Height="50">
        <Button.Template>
            <ControlTemplate>
                <Label Content="Helllo"/>
            </ControlTemplate>
        </Button.Template>

        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Green"/>  
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="AliceBlue"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>

    </Button>
</Grid>

Did you try searching for it? Refer : http://stackoverflow.com/a/12388141/3660930 — Ash, May 24 '14 at 03:52
move everything in button.style to grid.resources outside of the button — bdimag, May 24 '14 at 04:27

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Nothing wrong in your style placement.

ControlTemplate is overridden so you need to template bind background property of Label with button's background property.

This is how you do it:

<ControlTemplate>
    <Label Content="Helllo" Background="{TemplateBinding Background}"/>
</ControlTemplate>

edited Jun 20 '20 at 09:12

Community

1
1

answered May 24 '14 at 08:02

Rohit Vats

79,502
12
161
185

score 0 · Answer 2 · edited May 23 '17 at 12:11

Use ContentTemplate in place of ControlTemplate it will keep your button events stick to its style.And for reference see Difference between ContentTemplate and Template

 <Button Width="150" Height="50">
    <Button.ContentTemplate>
            <DataTemplate>
               <Label Content="Helllo"/>
            </DataTemplate>
        </Button.ContentTemplate>

    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>  
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="AliceBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>

</Button>

score 0 · Answer 3 · answered May 24 '14 at 13:53

When you are overriding control template,you need to implement the whole default control template for that control. Here's link: http://msdn.microsoft.com/en-us/library/ms753328%28v=vs.110%29.aspx

I am providing sample code which is working fine for me:

<Grid>
    <Grid.Resources>
        <SolidColorBrush x:Key="ControlBackground_MouseOver" Color="AliceBlue"/>
    </Grid.Resources>
        <Button Width="150" Height="50" Content="Hello" >
        <Button.Template>

                    <ControlTemplate  TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" Duration="0:0:0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"
                />
                            <ContentControl x:Name="ContentElement"
                IsTabStop="False"
                Content="{TemplateBinding Content}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                Foreground="{TemplateBinding Foreground}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="{TemplateBinding Padding}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                            </ContentControl>
                            <Border
                BorderThickness="1"

                Opacity="0"
                x:Name="FocusState"
                />
                        </Grid>
                    </ControlTemplate>

        </Button.Template>

        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Green"/>

            </Style>
        </Button.Style>

    </Button>

</Grid>

If you want to only display text on button,you can just use content property of button. Please let me know if this was what you were looking for . Thanks.

How to apply a style to button in WPF?

3 Answers3