Nested Grouped ListView in XAML - xaml

Question

I'm making a chatting app like WhatsApp. This is the layout I want to make,
Me(Static HeaderText)
MyInformation(Profile Image and name)
Favorites(Static HeaderText)
My Favorite friend information(Profile Image and name)
My Favorite friend
Friends(Static HeaderText)
A
My friend information(His name starts with A)
My friend
B
My friend
I implemented this with 3 listviews(Me, favorites, friends) in the Grid.
<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>
And this is the result.
But as you can see, it doesn't work what I expected first.
The first problem is, each listview has its own ScrollView.
I need one outer scrollview. To solve this problem I tried to use StackPanel in the outside of listviews. But then scrollview has gone.
The second one is, when I scroll down the third listview, the header text Friends also scrolled. It shouldn't be.
If I can use nested CollectionViewSource, it might be possible. But I think there is no interfact like that.
How should I do layout this structure? Any experience or idea?
P.S Target Platform is Windows Phone 8.1. But I screen-captured it on WinRT application to show you the scrollbar.

Answer 1

1- for the whole scroll, one thought is that you can add your main grid in scrollview control in that case all the page will have one scroll.
here is how.
<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

You could try this: http://winrtxamltoolkit.codeplex.com/
It has a control called TreeView. Maybe that will help!