XAML中的嵌套分組ListView

Question

我正在製作一個類似WhatsApp的聊天應用程序。這是我想要的佈局，

• Me（靜態的HeaderText）
  • MyInformation（資料圖片和名稱）
• Favorites（靜態的HeaderText）
  • 我的最愛朋友資料（Profile＆Image）
  • 我最喜歡的朋友
• Friends（靜態的HeaderText）
  • 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。但隨後scrollview已經消失。

第二個是，當我向下滾動third listview時，標題文本Friends也滾動。它不應該。

如果我可以使用嵌套CollectionViewSource，這可能是可能的。但我認爲沒有這樣的交互。
我該怎麼做佈局這個結構？任何經驗或想法？

P.S Target Platform是Windows Phone 8.1。但是我在WinRT應用程序上捕獲它以向你展示滾動條。

Answer 1

1-對於整個滾動，一個想法是，你可以在scrollview控件中添加你的主網格，在這種情況下，所有的頁面將有一個滾動。

這裏是如何。

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

Answer 2

你可以試試這個：http://winrtxamltoolkit.codeplex.com/ 它有一個叫做TreeView控件。也許這將有助於！