Expression Blend中的多級網格

Question

過去幾天我一直在玩Expressions Blend 4，我開始琢磨它。我剛剛開始玩數據綁定，並發現它非常簡單而強大。對於原型設計而言，沒有更好的應用。

我目前正在用可能的多級網格原型開發Silverlight屏幕。有什麼辦法可以用Blend來做到這一點？我嘗試創建一個多級數據示例（我將集合數據添加到集合數據）並將其拖到一個數據網格中。只有第一級出現。

任何幫助，將不勝感激。

Answer 1

您可以使用帶有網格的ItemsControl作爲其面板，然後在ItemTemplate中使用另一個ItemsControl並使用另一個網格將其綁定到第二級數據。使用ItemsControl可以很好地控制事物的顯示方式，而不僅僅是使用網格。

如果你需要的東西，看起來像這樣：

這是你如何能做到這一點：

1. 一個多層次的樣本數據源添加到您的Blend項目
2. 添加ItemsControl到您的佈局根元素
3. 將ItemsControl.ItemsSource屬性綁定到父級
4. 創建一個n使用此選項的空項目模板：

5. 在項目模板中，創建您想要第二級別的結構。在我的例子中，結構是這樣的：

   

6. 綁定每個子元素的屬性父集合的項目，如標題爲網格。
7. 將項目內部的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> 

我希望這有助於。