How to Customize WPF Button ?

This article demonstrates how to customize a Button control in WPF - C# Application.

1. Add a Button Control 

Add Button Control in WPF Application from Toolbox.
 then we can see the button in Design Pane with default template

and in XAML Pane we can see the the XAML Code for ebow button.


<Button Content="Button" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75" Margin="21,33,0,0"/>

2.Add Image in Button 

Add an Image in our project (How to Add Image in WPF C# Application ?)

in these section we set an image and a label control as buttons content.
 use the XAML code as shown below

       <Button  HorizontalAlignment="Left"  VerticalAlignment="Top" Width="100" Height="28"  Margin="21,57,0,0">

            <Button.Content>

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Image Source="icons-download.png" Grid.Column="0" Margin="5"/>

                    <Label Content="Download" Grid.Column="1" VerticalAlignment="Center"  FontWeight="Medium" />

                    </Grid>

            </Button.Content>

        </Button>

3.Change Button Template

then we check how to customize the wpf button template.

add XAML Code Shown Below - change shape

        <Button  HorizontalAlignment="Left"  VerticalAlignment="Top" Width="100" Height="28"  Margin="21,89,0,0">

        

            <Button.Template>

                <ControlTemplate TargetType="{x:Type Button}">

                        <Border Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin="0,0" CornerRadius="10">

                            <ContentPresenter HorizontalAlignment="Center"  VerticalAlignment="Center"/>

                        </Border>

                </ControlTemplate>

            </Button.Template>

                <Button.Content>

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <Image Source="icons-download.png" Grid.Column="0" Margin="5"/>

                    <Label Content="Download" Grid.Column="1" VerticalAlignment="Center"  FontWeight="Medium" />

                </Grid>

            </Button.Content>

        </Button>

change button background color - here we use gradient brush to get 3d effect for button



 <Button  HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75" BorderBrush="{x:Null}" Height="28"  Margin="21,120,0,0">

            <Button.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF98D2EF" Offset="0"/>

                    <GradientStop Color="#FF1C839A" Offset="1"/>

                </LinearGradientBrush>

            </Button.Background>

            <Button.Template>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Border Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin="0,0" CornerRadius="4">

                        <ContentPresenter HorizontalAlignment="Center"  VerticalAlignment="Center"/>

                    </Border>

                </ControlTemplate>

            </Button.Template>

            <Button.Content>

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <Image Source="saveWT.png" Grid.Column="0" Margin="5"/>

                    <Label Content="Save" Grid.Column="1" VerticalAlignment="Center" Foreground="White" FontWeight="Medium" />

                </Grid>

            </Button.Content>

        </Button>