XAML 中的嵌套分组列表视图答案

【问题标题】：Nested Grouped ListView in XAMLXAML 中的嵌套分组列表视图
【发布时间】：2014-04-29 02:36:39
【问题描述】：

我正在制作一个像 WhatsApp 这样的聊天应用程序。这是我想做的布局，

Me(静态标题文本)
- 我的信息（个人资料图片和名称）
Favorites(静态标题文本)
- 我最喜欢的朋友信息（头像和姓名）
- 我最喜欢的朋友
Friends(静态标题文本)
- A
  - 我的朋友信息（他的名字以A开头）
  - 我的朋友
- B
  - 我的朋友

我在Grid 中使用3 listviews（我，收藏夹，朋友）实现了这一点。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <CollectionViewSource x:Name="CollectionGroupedView" IsSourceGrouped="True" ItemsPath="Members" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ListView Grid.Row="0" x:Name="MeView" SelectionMode="None"
        ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
        Header="Me"
        >
    </ListView>
    <ListView Grid.Row="1" x:Name="FavoriteView" SelectionMode="None"
                ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
                Header="Favorite"
                >
    </ListView>
    <ListView Grid.Row="2" x:Name="FriendListView" SelectionMode="None"
                        ItemsSource="{Binding Source={StaticResource CollectionGroupedView}}"
                        ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
                        Header="Friends"
                        >
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Key}" />
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</Grid>

这就是结果。

但是正如你所看到的，它并没有达到我最初的预期。

第一个问题是，each listview 有自己的ScrollView。
我需要一个外部滚动视图。为了解决这个问题，我尝试在列表视图之外使用StackPanel。但随后滚动视图消失了。

第二个是，当我向下滚动third listview 时，标题文本Friends 也滚动了。不应该。

如果我可以使用嵌套的CollectionViewSource，它可能是可能的。但我认为没有这样的相互作用。
我应该如何布局这个结构？有什么经验或想法吗？

P.S 目标平台是 Windows Phone 8.1。但我在 WinRT 应用程序上截屏显示滚动条。

【问题讨论】：

标签： xaml listview windows-phone-8 windows-runtime windows-phone-8.1

【解决方案1】：

1- 对于整个滚动，一个想法是您可以在滚动视图控件中添加主网格，这样所有页面都将有一个滚动。

方法如下。

<ScrollViewer>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
    <CollectionViewSource x:Name="CollectionGroupedView" IsSourceGrouped="True" ItemsPath="Members" />
</Grid.Resources>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" x:Name="MeView" SelectionMode="None"
    ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
    Header="Me"
    >
</ListView> ....  </Grid></ScrollViewer>

【讨论】：

【解决方案2】：

你可以试试这个：http://winrtxamltoolkit.codeplex.com/ 它有一个名为 TreeView 的控件。也许这会有所帮助！

【讨论】：