WPF Button Control

WPF is easy to use; with the help of the WPF, developers can easily create UI based applications.

Here are some points which should be noted:

All the controls of the WPF can be found in the Toolbox. The Toolbox is part of the System.Windows.Controls.
We can create the controls by using the XAML markup language.
We can use the other User Interface controls of the different frameworks through which we can enhance the WPF application.

Now we will talk about Button Controls:

1. Button Control: Every GUI is incomplete without the use of the Button. WPF is very flexible and allows us to do all the things. Just like other WPF control, we can add Button by adding the button tag to our window. Button class shows the basic type of button control.

Namespace used: System.Windows.Controls

The button element shows the WPF Button Control in XAML at the time of the design. Attributes of Button, like width and height, shows the width and height of the Button. The content property of the Button will set the text of the button control.

The x: Name attribute will show the Name of the control. Name is known as the unique identifier of the control.

We will use the XAML code to create the button control. We use this code to set the Name, height, width, and content of the control. We put the text between the tags. Here text will act as the content of the Button. By default, the location of the Button is in the center of the page.

We will write the below code to design the Button and to set the content in the Button.

MainWindow.XAML

  <Window x:Class=”WPFEvent.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFEvent”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Button x:Name=”DrawCircleButton” Height=”80″ Width=”150″ Content=”hey Click on Me”></Button>          </Window>  

OUTPUT

Event handling on Button

The Click attribute of the Button element will add the click event handler. After clicking on the button, button will show us a message which we want to show through the MessageBox. The code written in the click event handler will be executed on clicking the button. For event handling, we will write the below code:

MainWindow.XAML

  <Window x:Class=”WPFEvent.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFEvent”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Button x:Name=”DrawCircleButton” Click=”DrawCircleButton_Click”  Height=”80″ Width=”150″ Content=”hey Click on Me”></Button>          </Window>  

Now we will show the output of the code before clicking on the button control.

Before clicking on the button, the output is shown in the below screenshot:

After clicking on the Button, Button will show us the message as shown in the below screenshot:

Button with the Images

The many user interface framework includes the regular Button and other several features as well. One of the most commonly used features is ImageButton, which means that the Button contains the image before the text. One of the main advantages of the WPF is that the Button itself provides the different controls inside the Button. That is why we can easily add the image control in the WPF button.

For adding the image to the button control with the event handling, we will write the below code:

MainWindow.XAML

  <Window x:Class=”WPFEvent.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFEvent”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Button Height=”30″ Width=”60″ Background=”Aqua” Click=”DrawCircleButton_Click”>          <StackPanel Orientation=”Horizontal”>              <Image Source=”C:UsersHPsourcereposWPFEventWPFEventImagebtnimg.jpg” />              <TextBlock Margin=”4,0″>Help</TextBlock>          </StackPanel>      </Button>    </Window>  

The output of the above code will look as shown in the below screenshot.

OUTPUT

Button with Formatted Content

The text in the content of the Button will change into the TextBlock control, which means that we can control the formatting of the text.

For this, we have different properties on the button control, which includes foreground, background, font-weight, and so on. With the use of the WPF, we can easily change the formatting of the text inside the Button control.

We will write the following code for the content formatting in the button as shown below:

MainWindow.XAML

  <Window x:Class=”WPFEvent.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFEvent”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <!–<Button Height=”30″ Width=”60″ Background=”Aqua” Click=”DrawCircleButton_Click”>          <StackPanel Orientation=”Horizontal”>              <Image Source=”C:UsersHPsourcereposWPFEventWPFEventImagebtnimg.jpg” />              <TextBlock Margin=”4,0″>Help</TextBlock>          </StackPanel>      </Button>–>      <Button Height=”70″ Width=”200″ Background=”Brown”  Foreground=”Blue” FontWeight=”Bold”>Formatted Button</Button>          </Window>  

The output of the above code is as shown in the below screenshot:

OUTPUT

Wrap Up

Above we explained about creating the button control, perform event handling, formatting the content of the button control, add the image in the Button.

Next TopicWPF CheckBox Control

features of wpf what is wpf wpf wpf border wpf canvas wpf controls wpf groupbox wpf imagesource wpf listbox wpf richtextbox wpf timer wpf treeview wpf viewbox wpf vs winforms wpf xaml

WPF Button Control

WPF Button Control

Now we will talk about Button Controls:

Event handling on Button

Button with the Images

Button with Formatted Content

Wrap Up

How to Install WordPress

CDATA PCDATA

You may also like