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

Labels:

Comments

Post a Comment

Popular posts from this blog

How to add an icon to a WPF application

In this article we discus about how to add an icon for entire WPF application. Create an Icon File (*.ico) Add the icon file to our project. ( How to Add Image in WPF C# Application ) Open Solution Explorer , Select our Project --> Right Click --> Select Properties From Popup Menu Then We can See Project Properties And We Can set the icon in the Application tab. click Start Without Debugging on the DEBUG menu or run it externally the icon will show correctly. When running our application in debug mode from  Visual Studio, the icon will not be shown.
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

How to Add Image in WPF C# Application ?

WPF Provides an integrated system for building user interfaces with common media elements like images, audio, and video.In These article we discus about how to add image in WPF Application. First Create A WPF Application ( How to Create a WPF application in Visual Studio with C#? ) Open Solution Explorer , it is a tool window in the Visual Studio integrated development environment (IDE) that displays the contents of a solution, which includes the solution's projects and each project's items. If Solution Explorer is not already visible, click Solution Explorer on the View menu How to Create a folder in Visual Studio Project  Select Our Project from Solution Explorer window Then Right Click Then popup a menu then choose Add --> New Folder from that menu. Then a Folder Generated , Rename that as Images  Select and Right click over our new folder Images , then Popup a menu  Choose Add --> Existing Item... Then We Will See A File Brow...
Post a Comment
Read more