Expression Blend 中的多级网格

Question

过去几天我一直在使用 Expressions Blend 4，现在我已经开始掌握它的窍门了。我最近刚刚开始使用数据绑定，发现它非常简单且功能强大。对于原型设计来说，没有更好的应用程序。

我目前正在制作一个带有潜在多层网格的 Silverlight 屏幕原型。有什么方法可以用 Blend 做到这一点吗？我尝试创建一个多级数据示例（我将集合数据添加到集合数据中）并将其拖到数据网格中。只出现了第一层。

任何帮助将不胜感激。

Answer 1

您可以使用带有网格作为其面板的 ItemsControl，然后在 ItemTemplate 中使用另一个 ItemsControl 并使用另一个网格将其绑定到第二级数据。使用 ItemsControl，您可以对事物的显示方式进行大量控制，这比仅使用网格要好得多。

如果您需要类似这样的东西：

这是实现这一目标的方法：

1. 将多级示例数据源添加到您的混合项目

2. 将 ItemsControl 添加到布局根元素

3. 将 ItemsControl.ItemsSource 属性绑定到父级别

4. 使用此选项创建一个空项目模板：
   

5. 在项目模板中，创建您希望第二级具有的结构。在我的示例中，结构如下所示：

   

6. 将每个子元素绑定到项目中的属性父集合的名称，例如网格的标题。

7. 将项目内的 DataGrid 绑定到子集合。

最终结果将是一个项目列表，每个项目将包含一个 StackPanel、一个内部带有 TextBlock 的 Border 以及一个绑定到子数据的 DataGrid。

此示例的 XAML 如下所示：

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

我希望这会有所帮助。