Get up to 80 % extra points for free! More info:

Lesson 35 - WPF - Data Input Controls

In the previous lesson, WPF - Basic WPF controls, we described common properties and events of WPF framework controls. Today's lesson is about controls we can use to input data into the form. These controls are:

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

Calendar

The calendar is a control which is used for entering dates or date ranges.

Calendar in C# .NET WPF - Form Applications in C# .NET WPF

The calendar works in 4 different modes for selecting the value (these are determined by the SelectionMode property):

  • SingleDate - Selects a single day
  • SingleRange - Selects a continuous range of days
  • MultipleRange - Selects multiple continuous ranges of days
  • None - No days can be selected, the control is read-only

In addition, it has 3 different display modes (determined by the DisplayMode property):

  • Month - Displays the days of the selected month
  • Year - Displays the months of the selected year
  • Decade - Displays decades (year lists)

Properties

  • DisplayDateEnd - Specifies the end date
  • DisplayDateStart - Specifies the start date
  • DisplayMode - Specifies the display mode
  • FirstDayOfWeek - Specifies which day is the first day of week
  • IsTodayHighlighted - Whether the today's day is highlighted (true or false)
  • SelectedDate - Sets or returns the selected day
  • SelectedDates - Sets or returns a collection of selected days
  • SelectionMode - Sets the selection mode

Events

  • SelectedDatesChanged - Calls the assigned method when the date has changed
  • DisplayModeChanged - Calls the assigned method when the display mode has changed

Example

XAML

<Calendar x:Name="calCalendar" BorderBrush="Black" BorderThickness="2,2,1,1"
    SelectedDatesChanged="ShowDay"/>

C#

The SelectedDatesChanged event:

private void ShowDay(object sender, SelectionChangedEventArgs e)
{
    DateTime date = calCalendar.SelectedDate.Value;
    lblDay.Content = date.ToShortDateString();
}

ComboBox

The control that is used to choose a value from a list. Unlike the ListBox, the ComboBox is a drop-down list that allows us to select a single value only.

ComboBox in C# .NET WPF - Form Applications in C# .NET WPF

Properties

  • IsDropDownOpen - Displays the ComboBox as expanded
  • IsEditable - Allows the user to enter a value that isn't in the list
  • Items - The items of the collection (strings or objects)
  • ItemsSource - The data source (a string collection or an object collection)
  • SelectionMode - The current selection mode
  • SelectedIndex - The index of the selected item
  • SelectedItem - The selected item
  • SelectedValue - The value of the selected item

Events

  • SelectionChanged - Is triggered when the selection has changed.

Example

XAML

<ComboBox x:Name="cbxChoice" Grid.Row="13" Width="200"
    HorizontalAlignment="Left" Height="30"
    SelectedIndex="0" VerticalContentAlignment="Center">
    <ComboBoxItem>Item 1</ComboBoxItem>
    <ComboBoxItem>Item 2</ComboBoxItem>
    <ComboBoxItem>Item 3</ComboBoxItem>
    <ComboBoxItem>Item 4</ComboBoxItem>
    <ComboBoxItem>Item 5</ComboBoxItem>
</ComboBox>

Or we can create it similarly as the ListBox control, see below.

C#

The SelectionChanged event:

private void Choice(object sender, SelectionChangedEventArgs e)
{
    if (inic)
    {
       ComboBox cbx = sender as ComboBox;
       lblSelectedCbx.Content = cbx.SelectedValue.ToString();
    }
}

DatePicker

We use this control to enter dates. Although it uses the Calendar control for the selection, only a single value can be entered.

DatePicker in C# .NET WPF - Form Applications in C# .NET WPF

Properties

  • DisplayDateEnd - Sets the end date
  • DisplayDateStart - Sets the start date
  • FirstDayOfWeek - Specifies which day is the first day of week
  • IsTodayHighlighted - Whether the today's day is highlighted (true or false)
  • SelectedDate - Sets or returns the selected day

Events

  • SelectedDateChanged - Calls the assigned method when the date has changed.

Example

XAML

<DatePicker x:Name="dprDate" Width="100" Height="25"
    BorderBrush="Black" BorderThickness="2,2,1,1"
    SelectedDateChanged="ShowDate" />

C#

The SelectedDateChanged event:

private void ShowDate(object sender, SelectionChangedEventArgs e)
{
    DateTime date = dprDate.SelectedDate.Value;
    lblDate.Content = date.ToShortDateString();
}

ListBox

The control that is used for selecting values from a list. The control can be set to select either individual values or multiple values at once.

ListBox in C# .NET WPF - Form Applications in C# .NET WPF

Properties

  • Items - The items of the list (strings or objects)
  • ItemsSource - The data source (a string List or object collection)
  • SelectedIndex - The index of the selected item
  • SelectedItem - The selected item
  • SelectedItems - A collection of the selected items (used when the Multiple property is set to true)
  • SelectionMode - Sets the selection mode. There are 3 different modes:
    • Single - Selects a single item
    • Multiple - Selects multiple items
    • Extended - Selects multiple items using the Ctrl and Shift keys

Events

  • SelectionChanged - Is triggered when the selection has changed.

Example

XAML

<ListBox x:Name="lbxList" Width="200"
    HorizontalAlignment="Left" BorderBrush="Black"
    BorderThickness="2,2,1,1">
        <ListBoxItem>Item 1</ListBoxItem>
        <ListBoxItem>Item 2</ListBoxItem>
        <ListBoxItem>Item 3</ListBoxItem>
        <ListBoxItem>Item 4</ListBoxItem>
        <ListBoxItem>Item 5</ListBoxItem>
</ListBox>

or

<ListBox x:Name="lbxList" Width="200"
    HorizontalAlignment="Left" BorderBrush="Black"
    BorderThickness="2,2,1,1"/>

C#

public MainWindow()
{
    InitializeComponent();
    ...
    lbxList.Items.Add("Item 1");
    lbxList.Items.Add("Item 2");
    lbxList.Items.Add("Item 3");
    lbxList.Items.Add("Item 4");
    lbxList.Items.Add("Item 5");
}

or

public MainWindow()
{
    InitializeComponent();
    ...
    List<string> list = new List<string>();
    list.Add("Item 1");
    list.Add("Item 2");
    list.Add("Item 3");
    list.Add("Item 4");
    list.Add("Item 5");
    lbxList.ItemsSource = list;
}

The SelectionChanged event:

XAML

<ListBox x:Name="lbxList" Width="200" HorizontalAlignment="Left"
    BorderBrush="Black" BorderThickness="2,2,1,1"
    SelectionMode="Extended" SelectionChanged="Selected"/>

C#

private void Selected(object sender, SelectionChangedEventArgs e)
{
    int count = 0;
    foreach (string item in lbxList.SelectedItems)
    {
       count += 1;
    }
    lblSelected.Content = "Selected " + count.ToString() + " items";
}

We'll continue with another input controls in the following lesson WPF - Data Storage and Descriptive 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 3x (571.73 kB)
Application includes source codes in language C#

 

Previous article
WPF - Basic WPF controls
All articles in this section
Form Applications in C# .NET WPF
Skip article
(not recommended)
WPF - Data Storage and Descriptive Controls
Article has been written for you by Tomáš Bitter
Avatar
User rating:
No one has rated this quite yet, be the first one!
Activities