Skip to main content

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>


Labels:

Comments

Post a Comment

Popular posts from this blog

What is SQL?

SQL stands for Structured Query Language. SQL is used to communicate with a database. According to American National Standards Institute (ANSI), it is the standard language for relational database management systems. SQL statements are used to define and manipulate data on a database.  Some common relational database management systems that use SQL are: Oracle, Microsoft SQL Server, Access, etc.
Post a Comment
Read more

How to Create Database in SQL Server

This article demonstrates how to Create Database in SQL server This steps is based on  SQL Server 2017 Express Edition (2008 edition is almost same )  Open Microsoft SQL Server Management Studio   Connect to Server (Login with id and password)    Right click over Databases Folder in Object Explorer Window     Select New Database... Then Open a New Database Window Then Enter a Name For  Database Then click OK then we can see our new data base under Databases folder in Object Explorer. See Our YouTube Video And Subscribe Our Channel For More Details 
Post a Comment
Read more

What is C# ?

C# is pronounced as "C-Sharp". It is an object-oriented programming language provided by Microsoft that runs on .Net Framework. We can develop different types of Window and Web applications by the help of C# programming language. C# is designed for CLI (Common Language Infrastructure). CLI is a specification that describes executable code and runtime environment. C# is approved as a standard by ECMA and ISO.
Post a Comment
Read more