Data Grid

A Table is an essential component for displaying information to the user.

Luckily, Material Design has an outstanding DataGrid style that allows us to make our GUI look great and be informative as well as productive, and the nicest thing is that it comes right out of the box. Just put a DataGrid control in your Xaml file and you are all set. There are tweaks of course to further extend its look and feel, but sometimes the basic one is enough.

Download Example4.ps1 and Example4.xaml from here and let us go through the code.

In this example we retrieve a list of windows services showing four fields.

Play a bit with the different controls in the window. Try to reorder the columns, resize their width, sort the table by each field and use the two types of filters located above the table.

The table is placed inside a "Card" control which I will cover on one of my future posts. Note the shadow that the card casts. It is a part of its design.

Some notes about my Xaml:

1. I've split the Grid into two rows and put the title and filters on the first row while the card is on the second one. Look at lines 31-34 and "Grid.Row="

2. I've changed the size of the window (lines 7,8)

3. The TextBlock has a "materialDesign:HintAssist.Hint" attribute that makes the help text disappear when the users enters any character.

4. The icon (line 39) is simply a "<materialDesign:PackIcon>" control and the "Kind" value is its shape. You can select any icon from MDIX demo app under "Icons" (See this post). Just copy and paste to your Xaml code.

5. On every DataGrid column, the "Binding" attribute is the one that links the data to be populated and it is bound to the exact name of the data set field we defined in our PS script. For example {Binding Name} will set the data from the "Name" field on the data set. This is how we connect the "code behind" to the Xaml.

6. The green and red colors of the status are implemented by style triggers.

The PS script also has some notable points:

1. (lines 28,29) We define a new DataTable object which will contain all of the table information and populate the DataGrid, and we also define its fields.

2. The function "FilterServices" will filter the DataTable by running a query just like on a database. Explore this function to better understand its role.

3. Getting the services data is done with Get-CimInstance CmdLet and not Get-Service because I wanted to include the "StartMode" field.

4. The Row.Add method (line 49) is inserting rows into the DataTable.

5. The code in line 52 - $Services_DataGrid.ItemsSource = $Services_Datatable.DefaultView Is the one that actually populates the DataGrid.

6. Lines 54-56 are the events attached to the filter TextBox and the two states of the ChkBox (checked and unchecked).

7. I did not implement data validation for the TextBox yet. It is vital to do so, however for the sake of simplicity I've skipped it for now. Be sure we will get back on that.

So DataGrid is the GUI implementation of a table (defined in Xaml), and DataTable is the table that hold the actual data (defined in PowerShell).

For those of you who are already writing code following my posts, take a challenge: Try to implement a "Refresh" Button that will re-retrieve and display the services information every time a user clicks on it.

I hope this post will serve you on your future DataGrid usage. I'm sure we will meet the DataGrid control again on the upcoming posts.