Apply style for buttons in all Windows in WPF

Question

I have a style setup in my XAML for the creation of round corner Buttons in my WPF window. I would like this style to apply to all buttons on all windows in my application.

Is there a way, similar to CSS, that I could put this into another file and reference it somehow in all my windows? Or do I just need to copy and paste it every time.

Solution 1

You could use the application resources to do that.

Here's a bit of code for example (in app.xaml)

<Application.Resources>
  <Style TargetType="Button" x:Key="GelButton" >
     <Setter Property="Margin" Value="1,2,1,2"/>
     <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>
</Application.Resources>

and then, for your buttons (for example):

<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 1" />
<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 2" />

Hope this will help you to find what you're looking for.

Solution 2

If you want to do it in a clean way, you can create a ResourceDictionary.xaml, that has the same funcion that CSS in Web design.

First, go to your project and add a ResourceDictionary. Inside it you can add styles for all the desired elements you want, for example, change color background of a Button that applies to all your buttons:

// Base style for all buttons
<Style TargetType="Button">
    <Setter Property="Background" Value="Red" />
</Style>

If you don't specify an identifier on each Style, that style will apply to all controls that match with the TargetType you specified. If you want button to look different, you can do the same as above, but also include an identifier to that style, that will be used by each different button:

// Specific style for blue buttons
<Style TargetType="Button" x:Key="BlueButton">
    <Setter Property="Background" Value="Blue" />
</Style>

Then, on each .xaml that you want styles to be applied you have to add the reference to this ResourceDictionary.xaml that you are creating:

<Window.... >
    <Window.References>
        <ResourceDictionary>
           <ResourceDictionary Source="MyResourceDictionary.xaml" />
        </ResourceDictionary>
    </Window.References>

    <Grid>
       <Button Content="Button with red background" />
       <Button Style="{StaticResource BlueButton}" Content="Button with blue background" />
    </Grid>
</Window>

I think this is what you are looking for.

If you want to draw a rounded button, you need to override the Template property of the button. This means that you need to tell button every action he needs to do from the moment you override it. See here. So, in a little and reduced concept, you would like to write something like this:

<Style TargetType="Button">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="DarkBlue" />
    <Setter Property="Width" Value="150" />
    <Setter Property="Height" Value="35" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                    BorderBrush="LightBlue" BorderThickness="1" CornerRadius="15,0,15,0" x:Name="bd">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bd" Property="Background" Value="LightGray"/>
                        <Setter Property="Foreground" Value="White" />
                        <Setter Property="Cursor" Value="Hand" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

See that here I override all basic properties needed to draw a basic funcitonal button, like Foreground, Background, Width... and the MouseOver event, to change colour when passing mouse over it. The CornerRadius property of the Border inside ControlTemplate is the radius you are looking for.

So basically, you are overriding the border property that comes by default for all buttons.

Solution 3

Google Reference Dictionary. You can put all your styles in there. then, just add a "reference" to it in your window/user control.

    <UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/SialTPChat.UI.Design;component/Styles/Styles.xaml" />
    </ResourceDictionary>
    </UserControl.Resources>

Now, all styles in the above referenced XAML file, will be applied to all objects in the user control.

Solution 4

The easiest way according to me is:

1. Right click on a button in design surface

2. Choose Edit Template->Edit a Copy

3. Choose "Define in Application" radio button

4. The Style will be created in App.xaml file

5. Add that resource to every button using "style" tag

View more solutions