Многоуровневая сетка в Expression Blend

Я играл с Expressions Blend 4 последние несколько дней и начинаю понимать. Я только недавно начал играть с привязкой данных и считаю, что это действительно легко и эффективно. Для прототипирования лучшего приложения не найти.

В настоящее время я создаю прототип экрана Silverlight с потенциальной многоуровневой сеткой. Есть ли способ сделать это с помощью Blend? Я попытался создать многоуровневую выборку данных (я добавил данные коллекции в данные коллекции) и перетащил ее в сетку данных. Появился только первый уровень.

Любая помощь будет оценена.


expression-blend silverlight-4.0
person johnofcross    schedule 14.10.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать ItemsControl с сеткой в ​​качестве панели, а затем в ItemTemplate использовать другой ItemsControl и привязать его ко второму уровню данных с помощью другой сетки. Используя ItemsControl, вы можете гораздо больше контролировать способ отображения, чем просто сетку.

Если вам нужно что-то похожее на это: Многоуровневое связывание

Вот как это сделать:

  1. Добавьте многоуровневый образец данных в свой проект Blend

  2. Добавьте ItemsControl в корневой элемент макета

  3. Привяжите свойство ItemsControl.ItemsSource к родительскому уровню

  4. Создайте пустой шаблон элемента, используя этот параметр: Шаблон элемента / Создать пустой

  5. В шаблоне элемента создайте структуру, которую должен иметь второй уровень. В моем примере структура выглядит так:

    Структура DataTemplate

  6. Привяжите каждый из дочерних элементов к свойствам в элементах родительской коллекции, например к заголовку сетки.

  7. Привяжите DataGrid внутри элемента к дочерней коллекции.

Конечным результатом будет список элементов, каждый из которых будет содержать StackPanel, Border с 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>

Надеюсь, это поможет.

person Murven    schedule 23.10.2010
comment
Как это сделать? Можно ли это сделать через пользовательский интерфейс Expression Blend или через XAML? - person johnofcross; 25.10.2010
comment
Я отредактировал свой ответ, чтобы добавить некоторые подробности о том, как этого добиться. Надеюсь, это то, что вы ищете. - person Murven; 27.10.2010
comment
Итак, если у родителя было больше полей, мне пришлось бы добавить дополнительные элементы управления и привязать данные к каждому? Были бы данные в том же порядке? - person johnofcross; 04.11.2010
comment
Да, родительский элемент может иметь столько свойств, сколько вам нужно, и вы также можете привязать их к новым элементам управления. Я не совсем понимаю, что вы имеете в виду, когда упоминаете порядок данных. В вашей модели представления вы можете выбрать порядок элементов, а в представлении порядок элементов зависит от выбранного вами макета. - person Murven; 05.11.2010