Silverlight 4.0 表达式混合中的多级网格

在过去的几天里，我一直在玩Expressions Blend 4，我开始掌握它。我最近刚开始玩数据绑定，发现它非常简单和强大。为了原型化的目的，没有更好的应用程序

我目前正在制作一个Silverlight屏幕的原型，该屏幕具有潜在的多级网格。有什么办法可以用Blend来做吗？我尝试创建一个多级数据样本（我将一个集合数据添加到一个集合数据中），并将其拖动到datagrid中。只有第一级出现

---

非常感谢您的帮助。

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

如果您需要这样的东西：

这就是你如何做到这一点的方法：

将多级示例数据源添加到混合项目中

向布局根元素添加ItemsControl

将ItemsControl.ItemsSource属性绑定到父级

使用此选项创建空项目模板：

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

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

将每个子元素绑定到父集合项中的属性，如网格的标题

将项内的DataGrid绑定到子集合

最终结果将是一个项目列表，每个项目将包含一个StackPanel、一个内部带有TextBlock的边框和一个绑定到子数据的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>

---

我希望这能有所帮助。

你怎么做？这可以通过Expression Blend UI或XAML实现吗？我已经编辑了我的答案，添加了一些关于如何实现这一点的细节。我希望这就是您正在寻找的。因此，如果父级有更多字段，我将不得不添加更多控件，并将数据绑定到每个字段？数据的顺序是否相同？是的，父级可以有您需要的任意多个属性，并且您也可以将它们绑定到新控件。当你提到数据的顺序时，我不完全理解你的意思。在视图模型中，您可以决定项目的顺序，而在视图中，元素的顺序取决于您选择的布局。