Expression Blend中的多级网格

时间:2010-10-14 20:33:33

标签: silverlight-4.0 expression-blend

过去几天我一直在玩Expressions Blend 4,而且我开始对它有所了解。我刚刚开始玩数据绑定,发现它非常简单和强大。出于原型设计的目的,没有更好的应用。

我目前正在使用潜在的多级网格对Silverlight屏幕进行原型设计。 Blend有什么方法可以做到这一点吗?我尝试创建一个多级数据样本(我将一个集合数据添加到一个集合数据)并将其拖动到一个数据网格。只出现了第一级。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

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

如果你需要看起来像这样的东西:   Multi-level Binding

这就是你如何做到这一点:

  1. 向Blend项目添加多级示例数据源
  2. 将ItemsControl添加到布局根元素
  3. 将ItemsControl.ItemsSource属性绑定到父级别
  4. 使用此选项创建空项目模板: Item Template/Create Empty
  5. 在项目模板中,创建您希望第二个级别拥有的结构。在我的示例中,结构如下所示:

    DataTemplate Structure

  6. 将每个子元素绑定到父集合的项目中的属性,例如网格的标题。
  7. 将项目内的DataGrid绑定到子集合。
  8. 最终结果将是一个项目列表,每个项目将包含一个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>
    

    我希望这会有所帮助。