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 controlHeight
- The height of the controlBackground
- The background of the controlForeground
- The text colorBorderBrush
- The color of the control's borderBorderThickness
- The thickness of the borderHorizontalAlignment
- The horizontal alignment of the controlVerticalAlignment
- The vertical alignment of the controlHorizontalContentAlignment
- The horizontal alignment of the content (text) inside the controlVerticalContentAlignment
- The vertical alignment of the content (text) inside the controlFontFamily
- The fontFontSize
- The size of the fontFontWeight
- 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 editingToolTip
- A tip text that appears when the user hovers over the controlCursor
- 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 buttonIsCancel
- 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 buttonMouseMove
- Calls the assigned method when the mouse cursor moves over the buttonMouseLeave
- 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 checkboxIsChecked
- Specifies whether the control is checked or notIsThreeState
- Enables the checkbox to have 3 possible states (true
,false
,null
)
Events
Click
- Calls the assigned method when the user clicks the checkboxChecked
- Calls the assigned method when the checkbox has been checkedUnchecked
- 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 radiobuttonGroupName
- Groups individual RadioButtons, allowing to switch between individual RadioButtons in the groupIsChecked
- Determines whether the control is checked or notIsThreeState
- Enables the radiobutton to have 3 possible states (true
,false
,null
)
Events
Click
- Calls the assigned method when the user clicks the buttonChecked
- Calls the assigned method when the radiobutton has been checkedUnchecked
- 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.
Download
By downloading the following file, you agree to the license terms
Downloaded 4x (821.89 kB)
Application includes source codes in language C#