WPF: OnLoad event

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

We know that in Windows, there is an on load event where our code will be initialized and run.

Here, I illustrate how a button is created when the windows event OnLoad is triggered.

The event OnLoad event is defined in line 4 in MainWindow.xaml.

MainWindow.xaml
<Window x:Class="On_Load.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="OnLoad"      
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Name="stack">
        
    </StackPanel>
</Window>

MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;

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

        void OnLoad(object sender, RoutedEventArgs e)
        {
            Button b1 = new Button();
            b1.Content = "New Button";
            stack.Children.Add(b1);
            b1.Height = 25;
            b1.Width = 200;
            b1.HorizontalAlignment = HorizontalAlignment.Center;
        }
    }
}
We create a button using the Button object.  We give the Button instance name as b1.

We have also given an instance name stack to the StackPanel.  To add the Button object into the StackPanel, we simply use:

stack.Children.Add(b1);

onload

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: StackPanel

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

In our example, we have used a button and a textbox to display a message.

We can use a StackPanel control to arrange the Button and Textbox so that they occupy the top and the bottom of the page, each taking 50% of the space.

stackpanel

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="500">
    <StackPanel>
        <TextBox  x:Name="textBox1" HorizontalAlignment="Stretch" Margin="50" Text="This is a text box." Height="60" />
        <Button HorizontalAlignment="Stretch" Margin="120,50" Click="Button_Click" Content="Say Hello"/>
    </StackPanel>

</Window>

In the Textbox control, we have used a margin of 50px. This will give a margin of 50px to the textbox on the left and the right-hand side of the text box.

For the Button, there are 2 values in the margin.  It will give a left margin of 120px and a top margin of 50px to the Button control.

WPF: Grid

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

If you create a WPF application using Visual Studio, Visual Studio will first create a Grid control for us.

Grid, together with StackPanel are indeed commonly used.  Here in the cell, I have put some text inside the cell using TextBlock.

I have used margin to create some padding between the text and the cells.

Notice that we first create the columns and the rows using Grid.ColumnDefinitions and Grid.RowDefinitions and we put the TextBlock inside the cell specified by Grid.Row and Grid.Column.

It is possible to span the column using Grid.ColumnSpan.

<Window x:Class="Grid.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 VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="300" Height="350">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0" Margin="10,10">2005 Products Shipped</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0" Margin="10,10">Quarter 1</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1" Margin="10,10">Quarter 2</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2" Margin="10,10">Quarter 3</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0" Margin="10,10">50000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1" Margin="10,10">100000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2" Margin="10,10">150000</TextBlock>
        <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3" Margin="10,10">Total Units: 300000</TextBlock>
    </Grid>
</Window>

grid

 

WPF: Static Resource

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

A resource is an object that can be reused in different places in the application.

This is somewhat similar to CSS style in HTML where one declaration can be applied to different selected elements.

In XAML, a StaticResource provides a quick way for us to store a value. For example a string or a double value.

To store the value, we need to add an x:Key to the XAML object so as to identify the resource in a resource dictionary.

It is best illustrated by using a simple example.

<Window x:Class="SayHi.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <sys:String x:Key="strSayHello">Say Hello!</sys:String>
        <sys:Double x:Key="strFontSize">36</sys:Double>
    </Window.Resources>
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="106,115,0,0" TextWrapping="Wrap" Text="{StaticResource strSayHello}" VerticalAlignment="Top" Height="74" Width="215" FontSize="{StaticResource strFontSize}"/>

    </Grid>
</Window>

In the above XAML file, line 4 was added to support String and Double namespaces.  xmlns means xml namespace.

Here we have stored a string and a double value in <Window.Resources>.  The x:key is for identifying the string or the double value.

To access the stored string, we have used Text=”{StaticResource strSayHello}”.  This type of declaration is also called Markup Extension in XAML.

The font size is also styled using StaticResource.  This is in a way, similar to using CSS to style HTML elements.

staticr