WPF Button

Introduction
 
This article demonstrates how to the WPF Button control using XAML and C#. The article starts with the introduction of XAML Button element and its properties followed by the positioning, styling, and formatting of the control. The article also shows how to use the Button control events.
 
Creating a Button
 
The Button XAML element represents a WPF Button control. 

<Button/>

The Width and Height attributes of the Button element represent the width and the height of a Button. The Content property of the Button element sets the text of a button. The x:Name attribute represents the name of the control, which is a unique identifier of a control. You may also use the Name property to set the name of a control.
 
The code snippet in Listing 1 creates a Button control and sets the name, height, width, and content of a Button control. 

<Button x:Name="DrawCircleButton" Height="40" Width="120"
Content="Draw Circle" >
</Button>

Listing 1
 
The default property of a button is Content.
 
The code snippet in Listing 2 creates the same button as created by Listing 1.

<Button x:Name="DrawCircleButton" Height="40" Width="120" >
Draw Circle
</Button>

Listing 2
 
The output looks like Figure 1.
 


Figure 1
 
Positioning a Button
 
If you place a button on a Grid control, the button will be placed in the center of Grid. If you are using a Canvas as your parent control of Button, the Button will be placed in the left top corner of Canvas.
 
You can use Margin property to position a button control in a container like a Grid. The Margin property takes 4 values that represents left, top, right, and bottom positions. Listing 3 sets the Margin property of the Button control. 

<Button x:Name="DrawCircleButton" Content="Draw Circle"
Margin="60,120,80,120" />

Listing 3
 
The position of the Button control set in Listing 3 generates Figure 2.
 


Figure 2
 
If you are using a Canvas, you may also use Canvas.Left and Canvas.Top properties.
 
You may also use VerticalAlignment and HorizontalAlignment attributes to set vertical alignment, and horizontal alignment of a button.
 
The code snippet in Listing 4 sets the position of the Button control to the left top corner of the Canvas. 

<Button x:Name="DrawCircleButton" Height="40" Width="120"
    Canvas.Left="10" Canvas.Top="10"
    Content="Draw Circle"
    VerticalAlignment="Top"
    HorizontalAlignment="Left">
</Button>

Listing 4

Formatting a Button

Not let’s get a little creative. How about we create a Button control with a border formatting, background, and foreground of the Button?

The BorderBrush property of the Button sets a brush to draw the border of a Button. You may use any brush to fill the border. The following code snippet uses a linear gradient brush to draw the border with a combination of red and blue color.

<Button.BorderBrush>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
        <GradientStop Color="Blue" Offset="0" />
        <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
</Button.BorderBrush>

Listing 5

The Background and Foreground properties of the Button set the background and foreground colors of a Button. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a Button. 

<Button.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
        <GradientStop Color="Blue" Offset="0.1" />
        <GradientStop Color="Orange" Offset="0.25" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
</Button.Background>
<Button.Foreground>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
        <GradientStop Color="Orange" Offset="0.25" />
        <GradientStop Color="Green" Offset="1.0" />
    </LinearGradientBrush>
</Button.Foreground>

Listing 6

The final complete source code looks like this.

<Window x:Class="ButtonSample.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">
    <Canvas Name="LayoutRoot">
        <Button x:Name="DrawCircleButton" Height="40" Width="120"
            Canvas.Left="10" Canvas.Top="10" Click="DrawCircleButton_Click" >

            <Button.BorderBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Blue" Offset="0" />
                    <GradientStop Color="Red" Offset="1.0" />
                </LinearGradientBrush>
            </Button.BorderBrush>
            <Button.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Blue" Offset="0.1" />
                   <GradientStop Color="Orange" Offset="0.25" />
                   <GradientStop Color="White" Offset="0.75" />
                    <GradientStop Color="Red" Offset="1.0" />
                </LinearGradientBrush>
            </Button.Background>
            <Button.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Black" Offset="0.25" />
                    <GradientStop Color="Green" Offset="1.0" />
                </LinearGradientBrush>
            </Button.Foreground>
            Draw Circle
        </Button>
    </Canvas>
</Window>

Listing 7
 
The new Button looks like below:
 


Figure 3
 
Creating a Button Dynamically
 
The code listed in Listing 8 creates a Button control programmatically. First, it creates a Button object and sets its width, height, contents, background and foreground and later the Button is added to the LayoutRoot. 

private void CreateAButton()
{
    Button btn = new Button();
    btn.Height = 80;
    btn.Width = 150;
    btn.Content = "Click ME";
    btn.Background = new SolidColorBrush(Colors.Orange);
    btn.Foreground = new SolidColorBrush(Colors.Black);
    LayoutRoot.Children.Add(btn);
}

Listing 8

Button Content
 
Each XAML object element is capable of displaying different content types. XAML provides a special property called Content that works to display the content of the element depending on the element capabilities. For example, a Content property of a Button can be a set to a string, an object, a UIElement, or even and container. However, the Content property of a ListBox is set using the Items property.
 
Note: Some XAML object elements may not have the Content property available directly. It must be set through a property.

The code snippet in Listing 9 creates a Button control and sets its Content property to a string “Hello XAML”. The output looks like Figure 10.

<Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />

Listing 9

Listing 10 is an alternative way to set the Content property of a Button.

<Button Height="50" Margin="10,10,350,310">Hello XAML</Button>

Listing 10

The output of Listing 10 looks like same as Figure 4.
 


Figure 4

A Button element can display other child elements as its content. The code listed in Listing 11 sets a Rectangle element as the content of the Button.

<Button Height="80" Margin="10,80,300,170">
    <Rectangle Height="60" Width="120" Fill="Green"/>
</Button>

Listing 11
 
The output of Listing 20 looks like same as Figure 5.


Figure 5

Content property can also be a container or a parent element hosting child elements. The code listed in Listing 12 sets a StackPanel container with 5 child elements as the content of the Button.

<Button Margin="10,201,100,40">
    <StackPanel Orientation="Horizontal">
        <Ellipse Height="60" Width="60" Fill="Red"/>
        <TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
        <TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
        <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
        <TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
    </StackPanel>
</Button>

Listing 12
 
The output of Listing 12 looks like same as Figure 6.
 

Figure 6
 
The final XAML code is listed in Listing 13. 

<Window x:Class="ContentPropertySample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="400" Width="500" >
    <Grid x:Name="ParentGrid">
        <Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />
        <Button Height="80" Margin="10,80,300,170">
            <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
        </Button>
        <Button Margin="10,201,100,40">
            <StackPanel Orientation="Horizontal">
                <Ellipse Height="60" Width="60" Fill="Red"/>
                <TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
                <TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
                <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
                <TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
            </StackPanel>
        </Button>
    </Grid>
</Window>

Listing 13
 
The output of Listing 13 looks like same as Figure 7.
 


Figure 7
 
As you can imagine from the above examples, you can pretty much host any user interfaces as content of a XAML element.
 
The code listed in Listing 14 creates the above Button controls dynamically in the code and sets their Content properties to a string, a Rectangle, and a StackPanel respectively. 

// Button with string content
Button helloButton = new Button();
helloButton.Margin = new Thickness(10,10,350,310);
helloButton.Content = "Hello XAML";

// Button with a UIElement
Button buttonWithRectangle = new Button();
buttonWithRectangle.Height = 80;
buttonWithRectangle.Margin = new Thickness(10, 80, 300, 170);
// Create a Rectangle
Rectangle greenRectangle = new Rectangle();
greenRectangle.Height = 60;
greenRectangle.Width = 120;
greenRectangle.Fill = Brushes.Green;
// Set Rectangle as Button.Content
buttonWithRectangle.Content = greenRectangle;

// Button with a Container, StackPanel
Button buttonWithStackPanel = new Button();
buttonWithStackPanel.Margin = new Thickness(10, 10, 350, 310);
// Create a StackPanel and set its orinetation to horizontal
StackPanel stackPanel = new StackPanel();
stackPanel.Orientation = Orientation.Horizontal;
// Create an Ellipse
Ellipse redEllipse = new Ellipse();
redEllipse.Width = 60;
redEllipse.Height = 60;
redEllipse.Fill = Brushes.Red;
// Add to StackPanel
stackPanel.Children.Add(redEllipse);

// Create a TextBlock
TextBlock textBlock1 = new TextBlock();
textBlock1.TextAlignment = TextAlignment.Left;
textBlock1.Text = "Red Circle";
// Add to StackPanel
stackPanel.Children.Add(textBlock1);

// Create a TextBlock
extBlock space = new TextBlock();
space.TextAlignment = TextAlignment.Center;
space.Text = " ";
// Add to StackPanel
stackPanel.Children.Add(space);

// Create a Rectangle
Rectangle greenRectangle2 = new Rectangle();
greenRectangle2.Height = 60;
greenRectangle2.Width = 120;
greenRectangle2.Fill = Brushes.Green;
// Add to StackPanel
stackPanel.Children.Add(greenRectangle2);

// Create a TextBlock
TextBlock textBlock2 = new TextBlock();
textBlock2.TextAlignment = TextAlignment.Left;
textBlock2.Text = "Green Rectangle";
// Add to StackPanel
stackPanel.Children.Add(textBlock2);

// Set StackPaenl as Button.Content
buttonWithStackPanel.Content = stackPanel;

// Add dynamic button controls to the Window
ParentGrid.Children.Add(helloButton);
ParentGrid.Children.Add(buttonWithRectangle);
ParentGrid.Children.Add(buttonWithStackPanel);

Listing 14
 
In this article, we saw the meaning of the Content property available to XAML elements and how to use in our application.
 
Setting Image as Background of a Button

To set an image as background of a Button, we can set an image as the Background of the Button. The code snippet in Listing 15 sets the background of a Button to an image. 

<Button.Background>
    <ImageBrush ImageSource="dock.jpg" />
</Button.Background>

Listing 15

The new output looks like Figure 8.



Figure 8
 
Adding a Button Click Event Handler
 
The Click attribute of the Button element adds the click event handler. The code in Listing 16 adds the click event handler for a Button. 

<Button x:Name="DrawCircleButton" Height="40" Width="120"
    Canvas.Left="10" Canvas.Top="10"
    Content="Draw Circle"
    VerticalAlignment="Top"
    HorizontalAlignment="Left">
    Click="DrawCircleButton_Click"
</Button>

Listing 16
 
The code for the click event handler looks like following:

private void DrawCircleButton_Click(object sender, RoutedEventArgs e)
{

}

Now, whatever code you write in the click event handler that will be executed on the Button click. The code listed in Listing 17 creates a circle on the Button click event handler.

private void DrawCircleButton_Click(object sender, RoutedEventArgs e)
{
    // creates a Circle
    Ellipse circle = new Ellipse();
    circle.Width = 200;
    circle.Height = 200;
    circle.Fill = new SolidColorBrush(Colors.Yellow);
    circle.Stroke = new SolidColorBrush(Colors.Black);
    circle.StrokeThickness = 4;
    LayoutRoot.Children.Add(circle);
}

Listing 17
 
Mouse Rollover Formatting
 
How about giving some affects to your Button control when a mouse is over the Button and mouse leaves the Button area? We can achieve this by adding MouseEnter and MouseLeave event handler.
 
The code snippet in Listing 18 adds Mouse Enter and Mouse Leave event handlers.

<Button x:Name="DrawCircleButton" Height="40" Width="120"
    Canvas.Left="10" Canvas.Top="10" Click="DrawCircleButton_Click"
    MouseEnter="DrawCircleButton_MouseEnter" MouseLeave="DrawCircleButton_MouseLeave">

Listing 18

The code listed in Listing 19 sets the background and foreground colors of a Button on mouse enter and mouse leave event handlers. 

private void DrawCircleButton_MouseEnter(object sender, MouseEventArgs e)
{
    DrawCircleButton.Background = new SolidColorBrush(Colors.Yellow );
    DrawCircleButton.Foreground = new SolidColorBrush(Colors.Green);
}

private void DrawCircleButton_MouseLeave(object sender, MouseEventArgs e)
{
    DrawCircleButton.Background = new SolidColorBrush(Colors.Red);
    DrawCircleButton.Foreground = new SolidColorBrush(Colors.Purple);
}

Listing 19
 
Summary
 
In this article, I discussed how we can create a Button control in WPF and C#. We also saw how we can format a Button by setting its border, background, and foreground properties. After that, we saw you to set an image as the background of a Button. In the end of this article, we saw how to create a Button dynamically.