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.

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.

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.

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.

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.