Multi level grid in Expression Blend

Question

I have been playing with Expressions Blend 4 for the past few days, and I'm starting to get a hang of it. I just recently started playing with the Data binding and find it really easy and powerful. For prototyping purposes, there is no better application.

I'm currently prototyping a Silverlight screen with a potential multi-level grid. Is there any way to do this with Blend? I tried creating a multi-level data sample (I added a collection data to a collection data) and dragged it to a datagrid. Only the first level appeared.

Any help would be appreciated.

Answer 1

You can use an ItemsControl with a grid as its panel and then, in the ItemTemplate, use another ItemsControl and bind it to the second level of data using another grid. Using ItemsControl you have a lot of control over the way things are displayed, much more than using simply a grid.

If you need something that looks like this:

This is how you can make it happen:

1. Add a multi-level sample data source to your Blend project
2. Add an ItemsControl to your layout root element
3. Bind the ItemsControl.ItemsSource property to the parent level
4. Create an empty item template using this option:

5. In the item template, create the structure you want the second level to have. In my example, the structure looks like this:

   

6. Bind each of the child elements to properties in the items of the parent collection, like the title for the grid.
7. Bind the DataGrid inside the item to the child collection.

The end result will be a list of items, and each of the item will contain a StackPanel, a Border with a TextBlock inside and a DataGrid bound to the children data.

The XAML for this example looks like this:

    <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.SampleDataSource" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" mc:Ignorable="d"
        x:Class="ASD_Answer005.MainPage" d:DesignWidth="703" d:DesignHeight="435">

        <UserControl.Resources>
            <SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
            <DataTemplate x:Key="ChildDataTemplate">
                <StackPanel Orientation="Vertical">
                    <Border BorderThickness="0,0,0,2" BorderBrush="Black" Padding="5">
                        <TextBlock TextWrapping="Wrap" Text="{Binding CategoryName}" FontSize="26.667" Height="39"/>
                    </Border>
                    <sdk:DataGrid ItemsSource="{Binding ChildCollection}" BorderThickness="0"/>
                </StackPanel>
            </DataTemplate>
        </UserControl.Resources>
        <d:DataContext>
            <Binding Source="{StaticResource SampleDataSource}"/>
        </d:DataContext>
        <UserControl.DataContext>
            <Binding Source="{StaticResource SampleDataSource}"/>
        </UserControl.DataContext>

        <Grid x:Name="LayoutRoot" Background="White">
            <ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="0" Padding="0">
                <StackPanel Orientation="Vertical" Width="703">
                    <ItemsControl ItemsSource="{Binding ParentCollection}" ItemTemplate="{StaticResource ChildDataTemplate}"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </UserControl>

I hope this helps.