<Page
    x:Class="UWP.AppShell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:commons="using:UWP.Commons"
    mc:Ignorable="d" TabNavigation="Cycle">

    <Page.Resources>
        <CollectionViewSource x:Name="SampleViewSource" IsSourceGrouped="True"/>
    </Page.Resources>

    <Grid>
        <SplitView x:Name="SamplesSplitView" DisplayMode="Overlay" x:FieldModifier="Public">
            <SplitView.Pane>
                <Grid>
                    <SemanticZoom>
                        <SemanticZoom.ZoomedInView>
                            <ListView x:Name="SampleList" 
                                      ItemsSource="{x:Bind SampleViewSource.View}"
                                      IsItemClickEnabled="True" SelectionMode="None" ItemClick="SampleList_ItemClick">
                                <ListView.GroupStyle>
                                    <GroupStyle>
                                        <GroupStyle.HeaderTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Key}" FontSize="15" FontWeight="Bold" Foreground="#EC2471"/>
                                            </DataTemplate>
                                        </GroupStyle.HeaderTemplate>
                                    </GroupStyle>
                                </ListView.GroupStyle>
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="{Binding Name}" />
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </SemanticZoom.ZoomedInView>
                        <SemanticZoom.ZoomedOutView>
                            <ListView ItemsSource="{x:Bind SampleViewSource.View.CollectionGroups}" 
                                      ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionMode="None">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Group.Key}" FontSize="15" FontWeight="Bold" Foreground="#EC2471"/>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </SemanticZoom.ZoomedOutView>
                    </SemanticZoom>

                </Grid>
            </SplitView.Pane>
            <Grid>
                <Frame x:Name="ContentFrame" x:FieldModifier="Public"/>
                <Button Style="{StaticResource SplitViewTogglePaneButtonStyle}" Click="Button_Click"/>
            </Grid>
        </SplitView>
    </Grid>
</Page>
