C# - Creating Buttons in WPF [Beginner]

XAML is a new XML based markup language developed by Microsoft to help developers quickly and easily create user interfaces for their WPF graphics API. This tutorial will demonstrate basic button design and functionality using XAML and C#.

Creating the Project 

 

Let's get started. I'm going to start with the code Visual Studio creates for you when a new WPF application is created.

<Window x:Class="WPFApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
  <Grid>

  </Grid>
</Window>

At this point, you should see an empty 300x300 form in Visual Studio's form designer.

Creating the Button 

 

To add a button, you simply place a Button tag inside the Grid tags.

<Window x:Class="WPFApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
  <Grid>
    <Button Name="myButton" Content="Click Me" Width="75" Height="23" />
  </Grid>
</Window>

The above XAML code creates a 75x23 button with the text "Click Me". Because we didn't set any positioning attributes, the button is located in the middle of the form. The Name attribute is how you refer to the button in your C# code. In this case, I named the button "myButton".

Positioning the Button 

 

Now lets move the button to where we want it. For this example, I want the button in the bottom right corner of the form.

<Button Name="myButton" Content="Click Me" Width="75" Height="23" 
    VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10,10" />

In older versions of .NET, buttons had to be positioned from the top left. This meant keeping them stuck to the bottom right when the form was resized took a few lines of code. With XAML, I can use the VerticalAlignment and HorizontalAlignment attributes to tell the button it should be positioned from the bottom right. The Margin attribute then tells the button it should be 10 pixels from the bottom and 10 pixels from the right.

Right now, the form designer should look something like this:

 

Setting the Button's Visual Properties 

 

Next, let's change the look of the button.

<Button Name="myButton" Content="Click Me" Width="75" Height="23" Margin="10,10" 
    VerticalAlignment="Bottom" HorizontalAlignment="Right" FontWeight="bold"
    Background="LightBlue" BorderBrush="DarkBlue" Foreground="DarkBlue" />

 

With this XAML code, the button should now look like the button at the right. Just like with buttons in older versions of .NET, there are many visual things that can be customized. I'm not going to go into all of them, but this code should give you an understanding on how to use them.

Adding an Image to the Button 

 

All that is required to put an image in a button is to add an Image tag inside the Button tag.

<Button Name="myButton" Width="75" Height="23" Margin="10,10" 
    VerticalAlignment="Bottom" HorizontalAlignment="Right" FontWeight="bold"
    Background="LightBlue" BorderBrush="DarkBlue" Foreground="DarkBlue">
  <Image Source="F:\Images\myImage.png" />
</Button>

You may have noticed that I removed the Content attribute. That's because the Image tag also counts as content. A button can only have the content set once. If you were to leave the the Content attribute and add the Image tag, you would get the following error: "The property 'Content' is set more than once."

What's really neat about XAML is that you can add almost any control inside another control. You can replace the Image tag with just about any other Control and it will be placed inside the button.

<Button Name="myButton" Width="75" Height="23" Margin="10,10" 
    VerticalAlignment="Bottom" HorizontalAlignment="Right" FontWeight="bold"
    Background="LightBlue" BorderBrush="DarkBlue" Foreground="DarkBlue">
  <TextBox Text="Some Text" FontSize="8" />
</Button>

The above code will display a button with a TextBox inside it:

 

Adding Events to the Button 

 

A button without an event handler is not much use. Fortunately, XAML makes adding event handlers very simple. In the XAML code, events are set just like any other property.

<Button Name="myButton" Content="Click Me" Width="75" Height="23" Margin="10,10" 

VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="myButtonClicked" />

As you can see, I set the Click attribute to "myButtonClicked". As it is right now, this won't compile since "myButtonClicked" isn't defined anywhere in code. What you need to do now is add the function to the C# code-behind to handle the click event.

private void myButtonClicked(object sender, EventArgs e)
{
  MessageBox.Show("Button Clicked");
}

The method that is added needs to match the RoutedEventHandler delegate's signature. Fortunately, it's the exact same format as previous versions of .NET so it's easy to remember. Now when the button is clicked, a message box will be displayed with the message "Button Clicked".

Referencing the Button from C# Code 

 

Any time a control is made in XAML, it can immediately be accessed by it's name in the code-behind.

this.myButton.Background = Brushes.Green;
this.myButton.Content = "OK";

I placed the above code in the constructor of my window. Now when the form is displayed, I see a green button with the text "OK".

That wraps up this tutorial on the basics of the Button control using XAML and C#. As we get more time to work and experiment with XAML, we will continue to post new tutorials.