Styling of WPF Controls

Question

I have a WPF Win forms application. I want to apply styling to all my controls in WPF. For example my current button looks like enter image description here

<Button  Content="Add" Width="147" Height="31" Margin="490,10,10,10" />

I want to style the button, similar to the following (with curved borders) enter image description here

How can I do similar style to all the controls.

See [Style Basics](http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics) on MSDN. — Clemens, Jun 20 '14 at 22:46
The example that they show in the link have the window borders curved, like the button style i wanted. But by default none of my controls are like that. Should I add some theme to have that styling. — user2480288, Jun 20 '14 at 22:52
Try the answer to the [Windows 7 theme for WPF?](http://stackoverflow.com/questions/2075720/windows-7-theme-for-wpf) question. — Sheridan, Jun 20 '14 at 23:09

Alexander Bell · Answer 1 · 2014-06-21T03:16:54.363

First, let's clarify your requirement. My qualified guess is that you are looking for styling solution for WPF Button with rounded corners, like shown in my calculator app here: http://webinfocentral.com/VOLTA/Manual.aspx If so then there are at least 2 solutions as following:

Create the ResourceDictionary file and reference it in your WPF XAML

Add the Button Style as shown in the following code snippet, which makes rounded corners (notice the Property <Border.CornerRadius>2</Border.CornerRadius>) and 3 visual/gradient effects specific to normal appearance, mouse over and pressed Button states:

<Style TargetType="Button" x:Key="Button_Default">
    <Setter Property="Foreground" Value="#202020"/>
<Setter Property="FontSize" Value="12" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="ButtonBackground" BorderBrush="#606060">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    <Border.BorderThickness>0</Border.BorderThickness>
                    <Border.CornerRadius>2</Border.CornerRadius>
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#f5f5f5" Offset="0" />
                            <GradientStop Color="#c5c5c5" Offset="0.93" />
                            <GradientStop Color="#606060" Offset="0.93" />
                            <GradientStop Color="#404040" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter TargetName="ButtonBackground" Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                                    <GradientStop Color="#f5f5f5" Offset="0" />
                                    <GradientStop Color="#c5c5c5" Offset="0.81" />
                                    <GradientStop Color="#606060" Offset="0.81" />
                                    <GradientStop Color="#404040" Offset="1" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                               <Setter TargetName="ButtonBackground" Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                                    <GradientStop Color="#e5e5e5" Offset="0" />
                                    <GradientStop Color="#dfdfdf" Offset="0.75" />
                                    <GradientStop Color="#606060" Offset="0.75" />
                                    <GradientStop Color="#303030" Offset="1" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Note: pertinent to your case, you can add properties:

<Setter Property="Height" Value="147"/>
<Setter Property="Width" Value="31"/>
<Setter Property="Margin" Value="490,10,10,10"/>

Add Button reference to the Style in XAML like following:

Alternatively, you can add Style to the Button In C# by adding reference to ResourceDictionary as follows (in this example you have to assign/use a button name):

[ButtonName].Style = this.Resources["Button_Default"] as Style;

Hope this will help. Rgds, Alex

Kalu Singh Rao · Answer 2 · 2014-06-21T04:26:53.390

You can use this code. It may be helpful you.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication8.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Window.Resources>
    <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
        <Border Height="30" Width="150" BorderBrush="RoyalBlue" BorderThickness="2">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="WhiteSmoke" Offset="0.347"/>
                    <GradientStop Color="#FF7D91C0" Offset="0.656"/>
                </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter TextElement.FontSize="15" TextElement.FontWeight="Bold"  HorizontalAlignment="Center" VerticalAlignment="Center"/>


        </Border>
    </ControlTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="OK" Margin="172,43,269,0" VerticalAlignment="Top" Template="{DynamicResource ButtonControlTemplate1}"/>
</Grid>

Styling of WPF Controls

2 Answers2