Lesson 34 - WPF - Basic WPF controls

In the previous lesson, Toast Notifications in C# .NET WPF, we learned to create toast notifications.

Windows Presentation Foundation (WPF) provides a large number of pre-made controls. In the next few lessons, we're going to complete this WPF course by introducing these controls and describing their most important properties and events. This will give you an overview of what is already available, and this knowledge will certainly save you a lot of work, instead of reinventing the wheel

List of Components

Let's start with a list of all WPF components. For easier orientation, I divided the controls into groups according to their type, and sorted them alphabetically.

Button Controls

The following controls are typically used to trigger an action:

• Button
• CheckBox (can also serve for data storage)
• RadioButton

Data Input Controls

For entering data we have:

• Calendar
• ComboBox
• DatePicker
• PasswordBox
• RichTextBox
• TextBox

Descriptive Controls

For describing other controls we can use:

• Label
• ProgressBar
• TextBlock

Controls for Displaying Data

We usually use these to display data:

• DataGrid
• Image
• ListBox
• MediaElement
• TreeView

Menu Controls

To create menus we have:

• Menu
• MenuItem

Containers

We can also use the following container structures:

• Canvas
• DockPanel
• Grid
• StackPanel
• TabControl
• WrapPanel

Dialogs

And we can request the user's interaction through these dialogs:

• MessageBox
• OpenFileDialog
• SaveFileDialog

Common Properties

All these controls have certain properties that can be set either directly in the form designer or in code. In the code, the properties can be changed during form's initialization (it's done only once when the form is initialized) or at any time when the application is running. In that case, it's possible to use data we gathered in the app.

Now let's go through the properties that are common to all or at least most of the WPF controls. Additional properties specific to particular controls are listed in the description of the respective control.

• Width - The width of the control
• Height - The height of the control
• Background - The background of the control
• Foreground - The text color
• BorderBrush - The color of the control's border
• BorderThickness - The thickness of the border
• HorizontalAlignment - The horizontal alignment of the control
• VerticalAlignment - The vertical alignment of the control
• HorizontalContentAlignment - The horizontal alignment of the content (text) inside the control
• VerticalContentAlignment - The vertical alignment of the content (text) inside the control
• FontFamily - The font
• FontSize - The size of the font
• FontWeight - The text thickness (normal, bold, ...)
• FontStyle - The text style (oblique, underline, ...)
• Opacity - The transparency of the control (0 - fully transparent, 1 - opaque)
• Visibility - The visibility of the control (hidden, visible)
• IsEnabled - Whether the control allows editing
• ToolTip - A tip text that appears when the user hovers over the control
• Cursor - Sets the cursor type

Below is a table of WPF controls and these properties, where you can see which are supported by each control:

That was the summary of common control properties. Now let's describe each control individualy.

Button Controls

Let's start with the button controls.

Button

It's a control that responds to mouse clicks and executes the associated method.

Properties

• Content - The text that is displayed on the button
• IsCancel - Specifies whether the button is a Cancel button. It then responds to pressing the Esc key and executes the assigned method.
• IsDefault - Specifies whether the button is the default button. Then it responds to pressing the Enter key and executes the assigned method. This property can be used, for example, in a dialog box with the Yes and No buttons, to specify the predefined option.

Events

• Click - Calls the assigned method when the user clicks on the button
• MouseMove - Calls the assigned method when the mouse cursor moves over the button
• MouseLeave - Calls the assigned method when the mouse cursor leaves the button

Example

For each control, we'll also show you how to use it in both XAML and C# code:

XAML

<Window x:Name="wdwWindow" x:Class="BasicControls.MainWindow
...
<Button x:Name="btn1" Content="Cancel"
    Width="60" Height="30" BorderThickness="1,1,2,2"
    Background="LightGray" BorderBrush="Black"
    HorizontalAlignment="Left" Click="Cancel"
    MouseMove="MoveEvent" MouseLeave="LeaveEvent"/>

C#

The Click event:

// Close the window
private void Cancel(object sender, RoutedEventArgs e)
{
    wdwWindow.Close();
}

The MouseMove event:

private void MoveEvent(object sender, MouseEventArgs e)
{
    btn1.Foreground = Brushes.Red;
    btn1.FontWeight = FontWeights.Bold;
    btn1.FontSize = 14;
}

The MouseLeave event:

private void LeaveEvent(object sender, MouseEventArgs e)
{
    btn1.Foreground = Brushes.Black;
    btn1.FontWeight = FontWeights.Normal;
    btn1.FontSize = 12;
}

CheckBox

This control is also used to control the application's behavior. The application can perform various actions or change the displayed controls in its form, based on the check status of the checkbox. Unlike the RadioButton, checkboxes can't be grouped together.

Properties

• Content - The text that is displayed next to the checkbox
• IsChecked - Specifies whether the control is checked or not
• IsThreeState - Enables the checkbox to have 3 possible states (true, false, null)

Events

• Click - Calls the assigned method when the user clicks the checkbox
• Checked - Calls the assigned method when the checkbox has been checked
• Unchecked - Calls the assigned method when the checkbox has been unchecked

Example

Here's an example:

XAML

<CheckBox Content="CheckBox 1" IsChecked="True"
    VerticalAlignment="Center" Checked="Checked"
    Unchecked="Unchecked"/>

C#

The Checked event:

private void Checked(object sender, RoutedEventArgs e)
{
    if (inic)
    {
       MessageBox.Show("Checked");
    }
}

The Unchecked Event:

private void Unchecked(object sender, RoutedEventArgs e)
{
    if (inic)
    {
       MessageBox.Show("Unchecked");
    }
}

RadioButton

This control is used for the application to perform various actions or change the displayed controls in the form, based on the check status of the RadioButton. The buttons can be grouped into Groups, in which only a single RadioButton can be checked at a time.

Properties

• Content - The text that is displayed next to the radiobutton
• GroupName - Groups individual RadioButtons, allowing to switch between individual RadioButtons in the group
• IsChecked - Determines whether the control is checked or not
• IsThreeState - Enables the radiobutton to have 3 possible states (true, false, null)

Events

• Click - Calls the assigned method when the user clicks the button
• Checked - Calls the assigned method when the radiobutton has been checked
• Unchecked - Calls the assigned method when the radiobutton has been unchecked

Example

XAML

<RadioButton Content="RadioButton 1" GroupName="grRB"
    IsChecked="True" VerticalAlignment="Center"
    Click="DisplayRB"/>


 <RadioButton Grid.Column="1" Content="RadioButton 2"
    GroupName="grRB" VerticalAlignment="Center"
    Click="DisplayRB"/>

 <RadioButton Grid.Column="2" Content="RadioButton 3"
    GroupName="grRB" VerticalAlignment="Center"
    Click="DisplayRB"/>

C#

The Click event:

private void DisplayRB(object sender, RoutedEventArgs e)
{
    RadioButton rbn = sender as RadioButton;
    if (rbn != null)
    {
       MessageBox.Show(rbn.Content + " has been clicked");
    }
}

In the next lesson, WPF - Data Input Controls, we'll continue with the Calendar, ComboBox, DatePicker, and ListBox controls.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.