多列堆栈面板或替代品

时间:2014-02-07 16:14:50

标签: c# xaml stackpanel windows-store

我有以下XAML代码:

 <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>

我使用IEnumerable&gt;设置了名为ListCountries的itemsControl的itemSource。它打印一个标题列表,然后是OtherClass的对象列表。

我的问题是,有时填充的列大于它们插入的Stackpanel的高度,我希望能够将我的内部列表拆分为列。

enter image description here 正如你在图片中看到的那样,比利时国家被分为两列 现在我的所有国家都是带有垂直滚动的单列。

1 个答案:

答案 0 :(得分:1)

您应该使用GridView。以下是从Visual Studio

中的Grid应用程序略微修改的一些代码
    <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