WPF: Design the UI using designer

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

Visual Studio provides some tools that make designing the controls rather easy.

label

Now using the designer, we put a button and a label to the application.

From the toolbox on the left hand side of the Visual Studio, we drag a Label control followed by a Button control to the application.

The designer will automatically insert for us the following code into the XAML.

<Label Content="Label" HorizontalAlignment="Left" Height="91" Margin="118,67,0,0" VerticalAlignment="Top" Width="263"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="221,216,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

Now we need to add an instance name to the Label so that we can output a new text to the Label.

Click on the Label box and on the bottom right hand side on the screen, we can see the Properties of the Label box control.

We give a name label1 to the Label box.

properties

Notice that after we have added a name, the designer will update for us a label1 instance in the xaml.

<Label x:Name="label1" Content="Label" HorizontalAlignment="Left" Height="91" Margin="118,67,0,0" VerticalAlignment="Top" Width="263"/>

Now double click on the button in the designer and the visual studio will bring us to MainWindow.xaml.cs where the Button_Click method will be created for us automatically.

private void Button_Click(object sender, RoutedEventArgs e)
        {     
        }

In the method, we just have to add the following line:

label1.Content = "Hi There.";

.The final xaml and code behind will be as follow:

<Window x:Class="HelloLabel.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>
        <Label x:Name="label1" Content="Label" HorizontalAlignment="Left" Height="91" Margin="118,67,0,0" VerticalAlignment="Top" Width="263"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="221,216,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

    </Grid>
</Window>

.

Final code behind:
using System.Windows;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            label1.Content = "Hi There.";
        }
    }
}

Now click on start to run the application and click on the button to see the label text updated.

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