WPF: Introduction

This entry is part 1 of 54 in the series Learn WPF

WPF or Windows Presentation Foundation is part of the Microsoft .Net Framework for designing graphical user interface.

At its core is a set of XAML based language that we use to design the desktop UI.  XAML is a declarative markup language just like HTML.

WPF was released only in 2006 and prior to that, we have been using Microsoft Foundation Class and WinForms to design the user interface.

With XAML, it makes designing user interface more like using HTML to design a web page and its user interface.

Since 2006, Microsoft has been improving WPF and now you can do most things in WPF without resorting to using WinForms.

When you first started learning WPF, you could be easily overwhelmed.  There are just so many little things to take care of.

Now, when I compare using WinForms and Foundation Classes, I am just glad that we are now using WPF which is a lot more easy.

 

WPF: Creating an application

This entry is part 2 of 54 in the series Learn WPF

If you have not downloaded Visual Studio Express IDE, you can download it from this link.

Launch the Visual Studio and select New Project.

Select Visual C# Wpf Application as in the screenshot below.

wpf

You might also want to name this application as Wpf.

Once you have created the Wpf application, you will see a window similar to the screenshot below.

mainwindow

In the Visual Studio, you can see that it has already created for us MainWindow.xaml and MainWindow.xaml.cs.

The MainWindow.xaml is the main xaml file and the MainWindow.xaml.cs is the so called C# code behind file.

Click on the start button or key in F5 and you will see that an empty window is created.  This doesn’t do much and I know.

 

WPF: Partial class

This entry is part 3 of 54 in the series Learn WPF

You can see from the first empty application that there are 2 files, MainWindow.xaml and MainWindow.xaml.cs that are created by Visual Studio.

MainWindow.xaml

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Wpf
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Notice the relationship between the 2 files.  In line 21, we say that MainWindow is a partial class.  This is because it needs to combine with the MainWindow in the xaml file (line 4), to form a full class declaration.

In line 4 in MainWindow.xaml, we have some declarations related to the title of the window and the size of the window.  We can make some changes to them to change the characteristics of the window.

We can also add new characteristics such as adding a ResizeMode.  Add the following property and you will find that the window is now fixed.

ResizeMode="NoResize"

 

 

WPF: Controls

This entry is part 4 of 54 in the series Learn WPF

Button, Textbox, Grid or Checkbox etc are called controls in WPF.  They are actually common UI elements in an application.  Those controls are also commonly found in a web page.

More controls can be seen in the screenshot below taken from the left hand side bar of the Visual Studio.

wpf_controls

 

Button Control

We first look at designing a button control using WPF.

A button in WPF can be designed easily with the <Button> tag.  In WPF, controls can be designed with only XAML.

Note that in XAML, all the elements are case sensitive.

<Window x:Class="Control.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button HorizontalAlignment="Stretch" Margin="100,180,100,80">Button 1</Button>

    </Grid>
</Window>

We have set the margins of the button on the application to be:

Margin="100,180,100,80"

These are the left, top, right and bottom of the layout.  You can refer to the screenshot below in regard to the 4 margin declarations.

margin

In the HorizontalAlignment property, we have used stretch.  With stretch, child elements are stretched to fill the parent element’s allocated layout space.

To learn more about alignment and margins, you can refer to this page from MSDN.

When you click on the start button in the Visual Studio, the application will run as below.

button

 

WPF: Code behind

This entry is part 5 of 54 in the series Learn WPF

We have mentioned that once we create a WPF application, there are 2 main files that are created by Visual Studio.

  1. MainWindow.xaml
  2. MainWindow.xaml.cs

The second file, MainWindow.xaml.cs is called the code behind file.

Text box is also a very common WPF control.  Now we will add a text box so that once we click on a button, a text will be displayed in the text box.

sayhello

MainWindow.xaml
<Window x:Class="SayHello.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button HorizontalAlignment="Stretch" Margin="180,180,160,100" Click="Button_Click">Say Hello</Button>
        <TextBox  Name="textBox1" HorizontalAlignment="Stretch" Margin="100,50,120,200" Text="This is a text box." />

    </Grid>
</Window>
MainWindow.xaml.cs
using System.Windows;

namespace SayHello
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            textBox1.Text = "Hello There!";
        }
    }
}

Now we look at what we have added to the xaml file and and code behind file to have made the application works.

<Button HorizontalAlignment="Stretch" Margin="180,180,160,100" Click="Button_Click">Say Hello</Button>
<TextBox  Name="textBox1" HorizontalAlignment="Stretch" Margin="100,50,120,200" Text="This is a text box." />

In the Buttun control, we have added a Click event and the method Button_Click.

In the TextBox control, we have also added an instance called textBox1.

So once the button is clicked, the Text in the TextBox control will be updated by the Button_Click method in the code behind file.

textBox1.Text = "Hello There!";

hellothere