• Article

Exercise 1 – Getting Started

The goal of this exercise is to familiarize the student with the existing starter application and enhance it with new features (DataGrid Column width settings, and grouping support).

  1. Start Visual Studio 2010
  2. On the File menu click OpenProject/Solution…
    1. Alternatively, from Visual Studio Start Page click “Open Project…”
  3. At “Open Project” dialog navigate to the Lab installation folder
  4. Navigate to “EmployeeManager\Source\Ex01\begin” folder
  5. Click “EmployeeManager.sln” file and the click “Open” button
  6. Take some time to familiarize yourself with the Starter application
    1. Points of interest here are:
      • Employee.cs
      • EmployeesManager.cs
      • MainPage.xaml
      • MainPage.xaml.cs (nested under MainPage.xaml in the Solution Explorer)
  7. Set the EmployeeManager.Web project as the startup project, by right clicking the project in the Solution Explorer and selecting “Set as Startup Project”
  8. Press F5 or click DebugStart Debugging to Run the application
  9. Use the application to familiarize yourself with it. When finished close the browser window.

Task 1 – Reshaping a DataGrid Column

  1. If you have not opened the Starter project please open it now (see previous section for detailed instructions).
  2. Open the file "MainPage.xaml" (double click on filename in the Solution Explorer)
  3. Locate the DataGrid control name "dg" and change the "AutoGenerateColumns" attribute to "False" and the "IsReadOnly" attribute to "True"

    XAML

    <DataControls:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="3" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="Column"> </DataControls:DataGrid>
  4. Now let's set the columns we want to display and set their size. Add the following XAML nested inside the DataGrid's XAML: Place cursor in source code press "space bar" to engage intellisense

    XAML

    <DataControls:DataGrid.Columns> <DataControls:DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" /> <DataControls:DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" /> </DataControls:DataGrid.Columns>
  5. Compile and run the application. You'll see that the columns are not spread across the entire width of the browser. Close the browser and return to Visual Studio.
  6. Add the "Width" property to the each of the DataGridTextColumn elements you've added, and set their width to "0.4*" (40% width) and "0.6*" (60%) respectively. The code should look as follows:

    XAML

    <DataControls:DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" Width="0.4*" /> <DataControls:DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" Width="0.6*" />
  7. Compile and run the application. Now the columns cover the entire width of the control.

Task 2 – DataGrid Grouping Support

  1. If the Lab application is running, please stop it now.
  2. To support grouping in the DataGrid, we'll need to change the data source to a more flexible data source – CollectionViewSource. This class was introduced in Silverlight 3, but in Silverlight 4 it has added the capability to group data. Open the file "MainPage.xaml", and add the following XAML to the UserControl Resources element:

    XAML

    <CollectionViewSource x:Key="employeeManagerEmployeesViewSource" Source="{Binding Path=Employees,
  3. Source={StaticResource employeeManagerViewSource}}" />
  4. Locate the Grid named "LayoutRoot" and change the "DataContext" attribute to the following Binding (replace the existing "DataContext" attribute).

    XAML

    DataContext="{StaticResource employeeManagerEmployeesViewSource}"
  5. Now that we can use the CollectionViewSource to group data, we'll need to add some operation buttons to the application. First of all, we need to change the layout of our application. Add the following column and row definitions to the "LayoutRoot" Grid.

    XAML

    <Grid.ColumnDefinitions> <ColumnDefinition Width="400"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>
  6. Next, add a StackPanel to hold all the operation buttons we need. Inside the "LayoutRoot" Grid, paste the following XAML:

    XAML

    <StackPanel Orientation="Horizontal" Margin="3" Grid.Row="1"> <Button Content="New" x:Name="btnNew"/> <Button Content="Update" x:Name="btnUpdate"/> <Button Content="Delete" x:Name="btnDelete"/> <Button Content="Group" x:Name="btnGroup"/> <Button Content="UnGroup" x:Name="btnUnGroup"/> </StackPanel>

  7. For now we'll implement the Grouping buttons. The other buttons will be implemented in the next exercise. Edit the "btnGroup" button and add a new "Click" event handler to it (use the default name by double-clicking the "New Event Handler" option in the drop down which will add "btnGroup_Click" automatically. Alternatively you can double-click the button in the designer to create the event handler.):

    Figure 1

    Event Handler Generation from XAML Editor

  8. Right click the newly created attribute and choose "Navigate to Event Handler" from the context menu.

    Figure 2

    Navigate to Event Handler from XAML Editor

  9. The last action will take you to the source code editor, to the event handler function (located in MainPage.xaml.cs):

    C#

    private void btnGroup_Click(object sender, RoutedEventArgs e) { }

  10. We'll create a group description that will allow us to group objects of type "Employee" by their "Group" property. To create the grouping, we'll use the CollectionViewSource object created previously in step 2. Add the following code to the event handler function:

    C#

    System.Windows.Data.CollectionViewSource cvs = this.Resources["employeeManagerEmployeesViewSource"] as System.Windows.Data.CollectionViewSource; if (cvs.View.GroupDescriptions.Count == 0) cvs.View.GroupDescriptions.Add( new System.Windows.Data.PropertyGroupDescription("Group")); else cvs.View.Refresh();

  11. Compile and run the application – press the "Group" button and notice how the data is grouped into 4 groups ("IT", "Students", "Managers" and a group with no name) based on the Employee class’ Group property.
  12. Return to Visual Studio and open the file "EmployeesManager.cs. This file contains the initialization code for the list of employees. Examine how the same groups we saw in the data grid appear as in the "Group" property of each employee.
  13. In "MainPage.xaml" and locate the "btnUnGroup" button. Add the default event handler for the button's "Click" event and navigate to its event handler. Add the following code to allow the data grid to be ungrouped:

    C#

    System.Windows.Data.CollectionViewSource cvs = this.Resources["employeeManagerEmployeesViewSource"] as System.Windows.Data.CollectionViewSource; cvs.View.GroupDescriptions.Clear();
  14. Compile and run the application. Press the "Group" button, and then the "Ungroup" button and the data grid will group the data and then ungroup it.

< previous | next >

Contents