View Categories

2. Basic Controls

3 min read

User interface (UI) controls are the building blocks of every WPF application. Whether you’re creating a simple login form or a complex enterprise application, you’ll frequently use controls like Label, TextBox, Button, and CheckBox.

In this article, you’ll learn:

  • What each control is used for
  • Key properties
  • Common events
  • XAML examples
  • Best practices
  • Real-world usage

1. Label #

A Label displays descriptive text for another control. It helps users understand the purpose of an input field.

For example:

Username:
[____________]

Here, Username is typically displayed using a Label.

Basic Syntax #

<Label Content="Username"/>

Setting Font #

<Label Content="Username"
       FontSize="18"
       FontWeight="Bold"
       Foreground="Blue"/>

Associating Label with a Control #

<StackPanel>

    <Label Content="Email"
           Target="{Binding ElementName=txtEmail}"/>

    <TextBox Name="txtEmail"/>

</StackPanel>

Clicking the label focuses the textbox.

Important Properties #

PropertyDescription
ContentText or object displayed
FontSizeFont size
FontWeightBold/Normal
ForegroundText color
BackgroundBackground color
TargetLinks label to another control

Best Practice #

Use Label only for captions.

2. TextBlock #

A TextBlock displays read-only text.

Unlike Label, it is optimized for showing formatted text.

Examples:

  • Instructions
  • Titles
  • Status messages
  • Paragraphs

Basic Syntax #

<TextBlock Text="Welcome to WPF"/>

Formatting #

<TextBlock
    Text="Hello World"
    FontSize="24"
    FontWeight="Bold"
    Foreground="DarkBlue"/>

Multiline Text #

<TextBlock
    TextWrapping="Wrap"
    Width="250"
    Text="WPF makes desktop application development easier and more powerful."/>

Using Inline Formatting #

<TextBlock>

    Welcome to
    <Bold>WPF</Bold>

</TextBlock>

Important Properties #

PropertyDescription
TextDisplay text
TextWrappingWrap text
FontSizeFont size
FontStyleItalic
FontWeightBold
ForegroundText color

Label vs TextBlock #

LabelTextBlock
Can target another controlCannot
Uses Content propertyUses Text property
Slightly heavierLightweight
Used for captionsUsed for displaying text

3. TextBox #

A TextBox allows users to enter text.

Examples:

  • Name
  • Email
  • Address
  • Search

Basic Syntax #

<TextBox Width="200"/>

Setting Initial Text #

<TextBox Text="John Doe"/>

Multiline TextBox #

<TextBox
    Width="300"
    Height="120"
    AcceptsReturn="True"
    TextWrapping="Wrap"/>

ReadOnly TextBox #

<TextBox
    Text="Cannot edit"
    IsReadOnly="True"/>

Important Properties #

PropertyDescription
TextCurrent text
MaxLengthMaximum characters
IsReadOnlyPrevent editing
AcceptsReturnMultiple lines
TextWrappingWrap text

Common Event #

<TextBox TextChanged="TextBox_TextChanged"/>

4. PasswordBox #

A PasswordBox hides characters while typing.

Example:

************

Basic Syntax #

<PasswordBox Width="220"/>

Setting Maximum Length #

<PasswordBox
    MaxLength="20"/>

Detect Password Changes #

<PasswordBox PasswordChanged="PasswordChanged"/>

Important Properties #

PropertyDescription
PasswordCurrent password
MaxLengthMaximum length
IsEnabledEnable/Disable

Best Practice #

Avoid storing passwords in plain text. Handle the password securely and clear it from memory as soon as practical.

5. Button #

A Button executes an action when clicked.

Examples:

  • Save
  • Login
  • Delete
  • Update

Basic Syntax #

<Button Content="Save"/>

Button with Size #

<Button
    Content="Submit"
    Width="120"
    Height="40"/>

Click Event #

<Button
    Content="Login"
    Click="BtnLogin_Click"/>

Disable Button #

<Button
    Content="Delete"
    IsEnabled="False"/>

Important Properties #

PropertyDescription
ContentDisplay text
WidthWidth
HeightHeight
IsEnabledEnable/Disable

6. CheckBox #

A CheckBox lets users select multiple options independently.

Example:

☑ Remember Me

☑ Receive Notifications

Basic Syntax #

<CheckBox Content="Remember Me"/>

Checked by Default #

<CheckBox
    Content="Accept Terms"
    IsChecked="True"/>

Three-State CheckBox #

<CheckBox
    Content="Optional"
    IsThreeState="True"/>

Possible values:

  • True
  • False
  • Null

Important Properties #

PropertyDescription
ContentDisplay text
IsCheckedChecked state
IsThreeStateAllow null state

7. RadioButton #

RadioButtons allow users to select only one option from a group.

Example:

( ) Male

( ) Female

( ) Other

Basic Syntax #

<RadioButton Content="Male"/>

Grouping #

<StackPanel>

    <RadioButton Content="Male"
                 GroupName="Gender"/>

    <RadioButton Content="Female"
                 GroupName="Gender"/>

</StackPanel>

Only one RadioButton can be selected within the same group.

Important Properties #

PropertyDescription
ContentDisplay text
IsCheckedSelection state
GroupNameRadio group

8. ToggleButton #

A ToggleButton behaves like an on/off switch.

Each click changes its state.

OFF

↓

ON

↓

OFF

Basic Syntax #

<ToggleButton Content="WiFi"/>

Checked by Default #

<ToggleButton
    Content="Bluetooth"
    IsChecked="True"/>

Common Events #

Checked

Unchecked

Important Properties #

PropertyDescription
IsCheckedCurrent state
ContentDisplay text

Common Uses #

  • Dark Mode
  • Wi-Fi
  • Bluetooth
  • Enable Feature

9. Hyperlink #

A Hyperlink displays clickable text.

It is placed inside a TextBlock.

Basic Syntax #

<TextBlock>

    <Hyperlink NavigateUri="https://example.com">
        Visit Website
    </Hyperlink>

</TextBlock>

Opening the Browser #

<TextBlock>

    <Hyperlink
        NavigateUri="https://example.com"
        RequestNavigate="Hyperlink_RequestNavigate">

        Open Website

    </Hyperlink>

</TextBlock>

Code Behind

private void Hyperlink_RequestNavigate(
    object sender,
    RequestNavigateEventArgs e)
{
    Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri)
    {
        UseShellExecute = true
    });
}

Important Properties #

PropertyDescription
NavigateUriTarget URL
RequestNavigateNavigation event

Complete Example #

<StackPanel Margin="20">

    <Label Content="Username"/>

    <TextBox Width="220"/>

    <Label Content="Password"/>

    <PasswordBox Width="220"/>

    <CheckBox Content="Remember Me"/>

    <RadioButton
        Content="Admin"
        GroupName="Role"/>

    <RadioButton
        Content="User"
        GroupName="Role"/>

    <ToggleButton
        Content="Dark Mode"
        Width="120"
        Margin="0,10"/>

    <Button
        Content="Login"
        Width="120"
        Margin="0,10"/>

    <TextBlock Margin="0,15">

        <Hyperlink
            NavigateUri="https://example.com">

            Forgot Password?

        </Hyperlink>

    </TextBlock>

</StackPanel>

Summary #

These controls form the foundation of nearly every WPF application:

  • Label displays captions and can associate with input controls.
  • TextBlock is ideal for showing formatted, read-only text.
  • TextBox captures user input and supports single-line or multi-line editing.
  • PasswordBox securely masks password entry.
  • Button initiates actions when clicked.
  • CheckBox allows independent multiple selections.
  • RadioButton limits the user to one choice within a group.
  • ToggleButton represents an on/off state.
  • Hyperlink provides clickable navigation within text.

Mastering these controls will make it much easier to build professional, user-friendly WPF applications. In the next tutorial, you’ll learn about ComboBox, ListBox, ListView, DataGrid, DatePicker, Calendar, Slider, ProgressBar, and other essential WPF controls.

Updated on July 28, 2026

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top