Expression Blend中的多级网格 [英] Multi level grid in Expression Blend

问题描述

过去几天我一直在玩Expressions Blend 4，现在我开始对它感兴趣.我最近才开始玩Data绑定，发现它真的很简单而且功能强大.出于原型目的，没有更好的应用程序.

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.

我目前正在制作具有潜在多层网格的Silverlight屏幕原型. Blend有什么办法做到这一点?我尝试创建一个多级数据样本(我将收集数据添加到了收集数据中)并将其拖到数据网格中.只有第一级出现.

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.

任何帮助将不胜感激.

推荐答案

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

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:

这是实现它的方法:

1. 向您的Blend项目添加多级示例数据源

1. Add a multi-level sample data source to your Blend project

将ItemsControl添加到布局根元素

Add an ItemsControl to your layout root element

将ItemsControl.ItemsSource属性绑定到父级

Bind the ItemsControl.ItemsSource property to the parent level

使用此选项创建一个空项目模板:

Create an empty item template using this option:

在项目模板中，创建您想要第二级具有的结构.在我的示例中，结构如下所示:

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

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

Bind each of the child elements to properties in the items of the parent collection, like the title for the grid.

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

Bind the DataGrid inside the item to the child collection.

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

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.

此示例的XAML如下:

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>

我希望这会有所帮助.

这篇关于Expression Blend中的多级网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！