如何在组合的语义缩放ListView上显示文本？

Question

I'm having a bit of trouble with semantic zooms and grouping listviews, hopefully someone can help me out.

When I go into my ZoomedOutView the grouping is there but it's not displaying any the group text.

Here's my CollectionViewSource

<CollectionViewSource x:Name="ControlPanelGroup" IsSourceGrouped="True" Source="{Binding HeaderList}"/>

The Semantic Zoom

<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted" ScrollViewer.ZoomMode="Enabled"  FocusVisualPrimaryBrush="White" FontFamily="Segoe UI" BorderThickness="0,0,0,0" Margin="0,0,0,10" VerticalAlignment="Stretch">
                                <SemanticZoom.ZoomedOutView>
                                    <ListView x:Name="Headers">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding HeaderList.Key}" />
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </SemanticZoom.ZoomedOutView>

                                <SemanticZoom.ZoomedInView>
                                    <ListView x:Name="Links" ItemsSource="{Binding Source={StaticResource ControlPanelGroup}}">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Path=Title}"  Margin="25,5,0,5" />
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                        <ListView.GroupStyle>
                                            <GroupStyle>
                                                <GroupStyle.HeaderTemplate >
                                                    <DataTemplate>
                                                        <TextBlock Margin="10,5,0,5" Text="{Binding Key}" />
                                                    </DataTemplate>
                                                </GroupStyle.HeaderTemplate>
                                            </GroupStyle>
                                        </ListView.GroupStyle>
                                    </ListView>
                                </SemanticZoom.ZoomedInView>
                            </SemanticZoom>

Loading the Data

var HeaderSerializer = new DataContractSerializer(typeof(List<ULSSLinkData>));
        using (var stream = await ApplicationData.Current.LocalFolder.OpenStreamForReadAsync("ControlPanelLinks"))
        {
            HeaderList = (List<ULSSLinkData>)HeaderSerializer.ReadObject(stream);
        }

        var result = from c in HeaderList group c by c.Key;

        this.ControlPanelGroup.Source = result;

        var collectionGroups = ControlPanelGroup.View.CollectionGroups;
        ((ListViewBase)this.semanticZoom.ZoomedOutView).ItemsSource = collectionGroups;

The Values from the list:

public class ULSSLinkData
{     
    public string Title { get; set; }
    public string URL { get; set; }
    public string Key { get; set; }
    public bool EXT { get; set; }
}

Here's a GIF SemanticZoom

Answer 1

I have no idea why but changing the zoomedoutview to this magically fixed it.

<SemanticZoom.ZoomedOutView>
                                <ListView x:Name="Headers">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Group.Key}" />
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </SemanticZoom.ZoomedOutView>