Winter sales2 C/C++ week
Get up to 60 % extra points for free! More info
Save up to 80 % on our C/C++ e-learning courses. Only this week!

Lesson 28 - 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

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

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

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

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.


 

Download

Downloaded 0x (571.73 kB)
Application includes source codes in language C#

 

 

Activities (2)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!