Lesson 37 - WPF - Data Displaying Controls

In the previous lesson, WPF - Data Storage and Descriptive Controls, we went through WPF controls for data input and descriptive controls. This lesson is going to describe WPF controls which can display user's data. These are:

• DataGrid
• Image
• MediaElement
• TreeView

DataGrid

DataGrid displays data in form of a table, as is known from Excel, for example. There are rows that represent records, and columns that contain individual items of the record (cells). The table can be sorted by clicking any column name, and the columns width can be resized with mouse. In addition, you can disable or enable data editing, use certain controls such as Button, ComboBox, CheckBox, etc., and group records (see the PreviewDataGrid project, which you can download below).

Properties

• AlternatingRowBackground - Sets the background color of alternating rows, which can be e.g. every other row. This makes the "zebra" pattern and the table rows are more readable.
• AlternationCount - Sets the number of rows of the zebra background (the value is usually 2, meaning every other row is alternated)
• AutoGenerateColumns - When enabled, the columns are generated automatically from the source (when defining columns manually, it's necessary to set this property to False)
• CanUserReorderColumns - Enables columns reordering
• CanUserResizeColumns - Enables column resizing
• CanUserSortColumns - Enables the user to sort data in the selected column
• FrozenColumnCount - Specifies how many columns from the left should be fixed when the scroll bar is displayed
• HeadersVisibility - Sets how to display column headers. It has 4 different values:
  • None - Only the data will be displayed (without the header and selection column)
  • Column - The data and header will be displayed (without the selection column)
  • Row - Only the data will be displayed (without the header, but with the selection column)
  • All - Displays everything
• IsReadOnly - Sets the control as read-only
• Items - Items of the table (structured record)
• ItemsSource - Data source (collection of structured records)
• SelectedIndex - Index of the selected record
• SelectedItem - The selected record
• SelectedItems - Collection of selected records (if more items are selected)
• SelectedValue - The selected value of the selected record

Events

• SelectionChanged - Calls the assigned method when we change the selection

Example

XAML

<DataGrid x:Name="dgdList" ItemsSource="{Binding}"
   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
   AutoGenerateColumns="False" IsSynchronizedWithCurrentItem="True"
   CanUserReorderColumns="False" CanUserResizeColumns="True"
   AreRowDetailsFrozen="True" AlternatingRowBackground="LightSteelBlue"
   AlternationCount="2" HeadersVisibility="Column" IsReadOnly="True"
   Background="LightSteelBlue" RowBackground="#FFF6F6C2"
   BorderBrush="Black" BorderThickness="2,2,1,1"
   SelectionChanged="DisplaySelectionDgd">
   <DataGrid.Columns>
      <DataGridTextColumn
         Binding="{Binding FirstName}"
         ClipboardContentBinding="{x:Null}"
         Width="80" Header="First name" IsReadOnly="True"/>
      <DataGridTextColumn
         Binding="{Binding LastName}"
         ClipboardContentBinding="{x:Null}" Width="160" Header="Last name"
         IsReadOnly="True"/>
      <DataGridTextColumn
         Binding="{Binding Birthday, StringFormat={}{0:dd.MM.yyyy}}"
         ClipboardContentBinding="{x:Null}" Width="70" Header="Date of birth"
         IsReadOnly="True"/>
   </DataGrid.Columns>
</DataGrid>

C#

The SelectionChanged event:

private void DisplaySelectionDgd(object sender, SelectionChangedEventArgs e)
{
   DataGrid dgd = sender as DataGrid;
   if (dgd != null)
   {
      if (dgd.SelectedIndex > -1)
      {
          Person person = new Person();
          person = dgd.SelectedItem as Person;
          lblSelectedDgd.Content = person.WholeName + "; " + person.Birthday;
      }
   }
}

Image

This controls is used (as the name suggests) for displaying images (see the SampleImage project).

Properties

• Source - The source of the image
• Stretch - Specifies how the control is filled with the image. These display modes are possible:
  • None - Keeps the aspect ratio. If the image is larger than the control, it'll displays only part of the image (the top left corner). When a smaller picture is displayed, the entire image will be displayed, leaving empty margins
  • Fill - Fills the entire space of the control (doesn't keep the image aspect ratio)
  • Uniform - The image will fill either the entire width or height of the area, while keeping the image aspect ratio. Doesn't squeeze the image (leaves blank margins).
  • UniformToFill - Fills the entire available space with the image, while keeping the image aspect ratio. If the available space and image size differ, the image will be cropped from the top left corner. The image isn't squeezed.

Events

No important events.

Example

XAML

MediaElement (Media Player)

MediaElement is used for displaying media files, such as audio or video. It can also display image files (see the PreviewMediaElement project to download below).

Properties

• LoadedBehavior - Used to control the video. If we want to control the video ourselves (play, pause, stop), we have to set this property to "Manual".
• Source - Data source (an audio or video file)
• Stretch - Specifies the media display format. We mostly use the "Uniform" mode, which keeps the aspect ratio of the selected video (see the Image description).
• UnloadedBehavior - Sets the MediaElement mode (releases all resources automatically when "Close" is used, including memory)

Events

No important events.

Example

XAML

<MediaElement x:Name="metVideo" LoadedBehavior="Manual" UnloadedBehavior="Close"/>

TreeView

Another control which displays data is TreeView. It represents a tree structure in which grouped data can be expanded or collapsed. Individual tree items are created using the TreeViewItem control (see the PreviewTreeView project to download below).

Properties

• Header - Text of the header
• Items - Individual items
• ItemsSource - Data source (item collection)

Events

• SelectedItemChanged - Calls the assigned method when the row is changed

Example

XAML

<TreeView SelectedItemChanged="DisplaySelection">
   <TreeViewItem Header="Men" IsExpanded="True">
      <TreeViewItem Header="Aaron Steward"/>
      <TreeViewItem Header="Carl Don"/>
      <TreeViewItem Header="Evan Sikorsky"/>
      <TreeViewItem Header="Gary Grant"/>
      <TreeViewItem Header="Ian Halifax"/>
  </TreeViewItem>
  <TreeViewItem Header="Women" IsExpanded="True">
      <TreeViewItem Header="Bailey Davis"/>
      <TreeViewItem Header="Dana Holden"/>
      <TreeViewItem Header="Franchesca Stevenson"/>
      <TreeViewItem Header="Hannah Little"/>
      <TreeViewItem Header="Julia Horton"/>
   </TreeViewItem>
</TreeView>

or

<TreeView x:Name="tvwTree"
   BorderBrush="Black" BorderThickness="2,2,1,1"
   SelectedItemChanged="DisplaySelection"/>

C#

private void FillTreeView()
{
   TreeViewItem tvMen = new TreeViewItem();
   TreeViewItem tvWomen = new TreeViewItem();

   tvMen.Header = "Men";
   tvMen.ExpandSubtree();
   tvWomen.Header = "Women";
   tvWomen.ExpandSubtree();

   foreach (Person person in PersonList)
   {
       switch (person.Sex)
       {
           case "M":
               TreeViewItem tvMan = new TreeViewItem();
               tvMan.Header = person.WholeName;
               tvMen.Items.Add(tvMan);
               break;
           case "F":
               TreeViewItem tvWoman = new TreeViewItem();
               tvWoman.Header = person.WholeName;
               tvWomen.Items.Add(tvWoman);
               break;
           default:
               break;
       }
   }
   tvwStrom.Items.Add(tvMen);
   tvwStrom.Items.Add(tvWomen);
}

The SelectedItemChanged event:

private void DisplaySelection(object sender, RoutedPropertyChangedEventArgs<object> e)
 {
    var tv = sender as TreeView;
    if (tv != null)
    {
       TreeViewItem tvi = new TreeViewItem();
       tvi = tv.SelectedItem as TreeViewItem;
       lblSelectedTvw.Content = tvi.Header;
    }
 }

In the next lesson, WPF - Menu and Dialog Controls, menus and dialogs await us.