Home > DeveloperSection > Beginner > Button control in WPF

Button control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 5435  View(s)
Rate this:

Button control in WPF

In this article I will discuss how to create a button control in WPF. Further I will discuss how to create a button control which holds Textbox, Image etc. Finally I will discuss how to create a button control dynamically.

Creating a button control

<Grid>

        <Button x:Name="SampleButton" Width="300" Height="100">Sample Button</Button>

</Grid>

The output is looked like following figure:

Button control in WPF

In code you can see that I marked the Button tag inside the Grid tag. Actually Grid tag is a container control which is by default provided by Visual Studio editor.
In case Button tag I used certain properties such as

Ø   X: Name – Which gives a unique identifier to your button control. This property worked as ID for the button control. We can use this control in code behind file by using SampleButton.

 Width—Width is another property of the button control which determines or set the width of your button control.

 Height—Height is another property of button control which is used to set the height of your button control.

You have seen in this example that “Sample Button” text that is displayed on button control is placed inside the button tag not in the form of any property.  This is another feature of WPF Button control. Every WPF control is derived from a base container control. We can use control as a container control also.

Next button control that I am going to show contains an image control. With the help of this example I show you that we can contain another control in Button control.

<Grid>

        <Button x:Name="SampleButton" Width="300" Height="100">

            <Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />

        </Button>

</Grid>

 

The output is looked like following figure:

Button control in WPF

Image – Tag is used to add any image in control. With the help of Source property we tell the path of the image.

Creating Event Handler for Button Control

We can easily create click event handler for button control which is provided by default. Just double click on the button control and event for button is created. When you create any event for button object then some changes are also reflect in xaml file.

Code:

<Grid>

<Button x:Name="SampleButton" Width="300" Height="100" Click="SampleButton_Click">

            <Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />

        </Button>

</Grid>

Here we see that a new property named Click is added in Button control which specify named of the event that is raised by Button control.

Code:

private void SampleButton_Click(object sender, RoutedEventArgs e)

{

       MessageBox.Show("Sample Button is Clicked", "Clicked");

}

 

When user clicks the button then a message is showed named Sample button is clicked with title Clicked.

Output

Button control in WPF

Creating button control dynamically through C# code

/// <summary>

        /// This event is raised when window is loaded in the memory. At the load

        /// event of the window we create a button object and register this object

        /// with click event.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            Button button = new Button();//Creating the button object

            button.Width = 130;//Setting width of the button object

            button.Height = 30;//Setting height of the button object

            button.Content = "Click Me";//Providing content to the button that is                    displayed by the object

            this.Content = button;// Adding button object to a container

            button.Click += btn_click;//Registering button object with click event.

        }

 

        /// <summary>

        /// This event is raised when ever user click on button control and it display a                   message Button is clicked

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        void btn_click(object sender, RoutedEventArgs e)

        {

            MessageBox.Show("Button is clicked.", "Clicked Message");

        }

 

Output:

Button control in WPF

 

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick