MainPage.xaml

<Page
    x:Class="WordWeaver.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:WordWeaver.Models"
    xmlns:sk="using:SimpleKit.WindowsRuntime.UI.Controls"
    xmlns:uc="using:WordWeaver.UserControls"
    d:Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    NavigationCacheMode="Enabled"
    Unloaded="OnPageUnloaded"
    mc:Ignorable="d">

    <Grid x:Name="RootGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <sk:TitleBar
            x:Name="CustomTitleBar"
            Title="WordWeaver"
            Grid.ColumnSpan="2"
            Padding="8,0,0,0"
            VerticalAlignment="Stretch"
            Canvas.ZIndex="1">
            <sk:TitleBar.Icon>
                <BitmapIcon Height="16" Width="16" ShowAsMonochrome="False" UriSource="ms-appx:///Assets/AppIcon.png" />
            </sk:TitleBar.Icon>
        </sk:TitleBar>

        <ListView
            Grid.Row="1"
            Margin="4,0"
            ItemsSource="{x:Bind NavigationItems}"
            SelectedIndex="{x:Bind SelectedNavigationItemIndex, Mode=TwoWay}">
            <ListView.ItemContainerStyle>
                <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
                    <Setter Property="MinWidth" Value="0" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:NavigationItem">
                    <uc:NavigationItemControl IconGlyph="{x:Bind IconGlyph}" Label="{x:Bind Label}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Frame
            x:Name="MainFrame"
            Grid.RowSpan="2"
            Grid.Column="1"
            Padding="48,0"
            Background="{ThemeResource LayerFillColorDefaultBrush}"
            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
            BorderThickness="1,0,0,0" />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SizeStates">
                <VisualState x:Name="SmallState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootGrid.ColumnDefinitions[0].Width" Value="Auto" />
                        <Setter Target="CustomTitleBar.Title" Value="      WordWeaver" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="DefaultState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>