Skip to main content

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:

Form with Button
 
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" />
 
Button with Colors 

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:

Button with TextBox
 
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.
Labels:

Comments

Post a Comment

Popular posts from this blog

C# Snippet - Shuffling a Dictionary [Beginner]

Randomizing something can be a daunting task, especially with all the algorithms out there. However, sometimes you just need to shuffle things up, in a simple, yet effective manner. Today we are going to take a quick look at an easy and simple way to randomize a dictionary, which is most likely something that you may be using in a complex application. The tricky thing about ordering dictionaries is that...well they are not ordered to begin with. Typically they are a chaotic collection of key/value pairs. There is no first element or last element, just elements. This is why it is a little tricky to randomize them. Before we get started, we need to build a quick dictionary. For this tutorial, we will be doing an extremely simple string/int dictionary, but rest assured the steps we take can be used for any kind of dictionary you can come up with, no matter what object types you use. Dictionary < String , int > origin = new Dictionary < string , int >();
1 comment
Read more

C# Snippet - The Many Uses Of The Using Keyword [Beginner]

What is the first thing that pops into your mind when you think of the using keyword for C#? Probably those lines that always appear at the top of C# code files - the lines that import types from other namespaces into your code. But while that is the most common use of the using keyword, it is not the only one. Today we are going to take a look at the different uses of the using keyword and what they are useful for. The Using Directive There are two main categories of use for the using keyword - as a "Using Directive" and as a "Using Statement". The lines at the top of a C# file are directives, but that is not the only place they can go. They can also go inside of a namespace block, but they have to be before any other elements declared in the namespace (i.e., you can't add a using statement after a class declaration). Namespace Importing This is by far the most common use of the keyword - it is rare that you see a C# file that does not h
Post a Comment
Read more

C# WPF Printing Part 2 - Pagination [Intermediate]

About two weeks ago, we had a tutorial here at SOTC on the basics of printing in WPF . It covered the standard stuff, like popping the print dialog, and what you needed to do to print visuals (both created in XAML and on the fly). But really, that's barely scratching the surface - any decent printing system in pretty much any application needs to be able to do a lot more than that. So today, we are going to take one more baby step forward into the world of printing - we are going to take a look at pagination. The main class that we will need to do pagination is the DocumentPaginator . I mentioned this class very briefly in the previous tutorial, but only in the context of the printing methods on PrintDialog , PrintVisual (which we focused on last time) and PrintDocument (which we will be focusing on today). This PrintDocument function takes a DocumentPaginator to print - and this is why we need to create one. Unfortunately, making a DocumentPaginator is not as easy as
Post a Comment
Read more