2014-02-07 79 views
0

我有以下XAML代碼:多列的StackPanel或替代

<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2"> 
    <ScrollViewer Margin="30,30,0,30" Height="444"> 
     <ItemsControl Name="ListCountries"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Margin="0,0,10,0" Width="100"> 
        <TextBlock Text="{Binding Key}" Foreground="Red" /> 
        <ItemsControl ItemsSource="{Binding}"> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <StackPanel Margin="0,10,0,0"> 
           <TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" /> 
           <TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" /> 
          </StackPanel> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
        </ItemsControl> 
       </StackPanel> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</StackPanel> 

我設置的ItemsControl命名ListCountries的的ItemSource,用的IEnumerable>和它打印標題的列表,後面的列表OtherClass的對象。

我的問題是,填充的列有時比它們插入的Stackpanel的高度要大,我希望能夠將我的內部列表拆分爲列。

enter image description here ,你可以在圖片中看到,比利時國家被現在我的所有國家都具有垂直滾動單列splited成2列 。

+0

有麻煩可視化你想要什麼,你可以提供一個視覺?那麼它應該是一塊蛋糕。 –

+0

我編輯了我的帖子,希望它會更清晰一點 – Ric

+0

所以你想(比如)比利時的列表將其所有信息都放在同一列,這樣總共有2列而不是4列? –

回答

0

您應該爲此使用GridView。下面是一些代碼從Grid應用程序在Visual Studio

<GridView 
     x:Name="itemGridView" 
     Grid.RowSpan="2" 
     Padding="116,137,40,46" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     SelectionMode="None" 
     Height="600"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Grid HorizontalAlignment="Left" Width="200"> 
        <TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>      
       </Grid> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" /> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 

這裏略作修改有一個什麼這看起來像一個屏幕截圖,有樣本數據

enter image description here