YJMPD-UWP/YJMPD-UWP/MainPage.xaml

<Page
    x:Class="YJMPD_UWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YJMPD_UWP"
    xmlns:convert="using:YJMPD_UWP.Helpers.Converter"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <convert:BoolToVisibilityConverter x:Key="BoolToVisConverter" />

        <Style x:Key="NavStackPanel" TargetType="StackPanel">
            <Setter Property="Orientation" Value="Horizontal" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="MinWidth" Value="275" />
        </Style>

        <Style x:Key="NavIcon" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
            <Setter Property="FontSize" Value="28" />
            <Setter Property="Margin" Value="0,5,0,0" />
        </Style>

        <Style x:Key="NavText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="28" />
            <Setter Property="Margin" Value="18,0,0,0" />
        </Style>


        <Style x:Key="GameInfoPanel" TargetType="StackPanel">
            <Setter Property="Orientation" Value="Horizontal" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="10,5,10,0" />
        </Style>

        <Style x:Key="GameInfoIcon" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Margin" Value="5,5,0,0" />
        </Style>

        <Style x:Key="GameInfoText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Margin" Value="15,0,0,0" />
        </Style>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <RelativePanel Grid.Row="0">
            <Button RelativePanel.AlignLeftWithPanel="True" Name="NavButton" Click="NavButton_Click" VerticalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="28" />

            <Viewbox RelativePanel.RightOf="NavButton" RelativePanel.AlignBottomWith="NavButton" StretchDirection="DownOnly" Stretch="UniformToFill" Margin="10,0,10,0">
                <TextBlock FontSize="28" Name="PageTitle" Text="YJMPD-UWP" />
            </Viewbox>
        </RelativePanel>

        <SplitView Grid.Row="1" Name="NavView" DisplayMode="Overlay" OpenPaneLength="275">
            <SplitView.Pane>
                <RelativePanel VerticalAlignment="Stretch"
                      ManipulationMode="TranslateX"
                      ManipulationCompleted="Pane_ManipulationCompleted" Style="{ThemeResource DarkModeFix}">

                    <Viewbox Stretch="Uniform" StretchDirection="DownOnly" HorizontalAlignment="Stretch" RelativePanel.AlignTopWithPanel="True">
                        <ListBox SelectionMode="Single" Name="NavList" SelectionChanged="NavList_SelectionChanged" Tapped="NavList_Tapped">

                            <ListBoxItem Name="NavListHome" ManipulationMode="TranslateX" ManipulationCompleted="Pane_ManipulationCompleted">
                                <StackPanel Style="{StaticResource NavStackPanel}">
                                    <TextBlock Style="{StaticResource NavIcon}" Text="&#xE80F;"/>
                                    <TextBlock Style="{StaticResource NavText}" Text="Game"/>
                                </StackPanel>
                            </ListBoxItem>
                            <ListBoxItem Name="NavListStatistics" ManipulationMode="TranslateX" ManipulationCompleted="Pane_ManipulationCompleted">
                                <StackPanel Style="{StaticResource NavStackPanel}">
                                    <TextBlock Style="{StaticResource NavIcon}" Text="&#xE8F1;"/>
                                    <TextBlock Style="{StaticResource NavText}" Text="Statistics"/>
                                </StackPanel>
                            </ListBoxItem>
                            <ListBoxItem Name="NavListAbout" ManipulationMode="TranslateX" ManipulationCompleted="Pane_ManipulationCompleted">
                                <StackPanel Style="{StaticResource NavStackPanel}">
                                    <TextBlock Style="{StaticResource NavIcon}" Text="&#xE897;"/>
                                    <TextBlock Style="{StaticResource NavText}" Text="About"/>
                                </StackPanel>
                            </ListBoxItem>
                            <ListBoxItem Name="NavListSettings" ManipulationMode="TranslateX" ManipulationCompleted="Pane_ManipulationCompleted">
                                <StackPanel Style="{StaticResource NavStackPanel}">
                                    <TextBlock Style="{StaticResource NavIcon}" Text="&#xE713;"/>
                                    <TextBlock Style="{StaticResource NavText}" Text="Settings"/>
                                </StackPanel>
                            </ListBoxItem>
                            
                        </ListBox>
                    </Viewbox>
                    
                    <StackPanel RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" Background="Gray">
                        
                        <StackPanel Visibility="{Binding GameVisible, Converter={StaticResource BoolToVisConverter}}" HorizontalAlignment="Stretch">
                            <StackPanel Style="{StaticResource GameInfoPanel}">
                                <TextBlock Margin="5,0,0,0" FontSize="16" FontWeight="Bold" Text="Current game"/>
                            </StackPanel>

                            <StackPanel Style="{StaticResource GameInfoPanel}">
                                <TextBlock Style="{StaticResource GameInfoIcon}" Text="&#xE8A1;"/>
                                <TextBlock Style="{StaticResource GameInfoText}" Text="{Binding GameState}"/>
                            </StackPanel>

                            <StackPanel Style="{StaticResource GameInfoPanel}">
                                <TextBlock Style="{StaticResource GameInfoIcon}" Text="&#xE716;"/>
                                <TextBlock Style="{StaticResource GameInfoText}" Text="{Binding Players}"/>
                            </StackPanel>

                            <StackPanel Style="{StaticResource GameInfoPanel}">
                                <Button Content="Back to Game" Click="BackToGame_Click" Style="{StaticResource Green}"/>
                            </StackPanel>
                        </StackPanel>
                        
                        <StackPanel Orientation="Horizontal" Margin="15,5">
                            <TextBlock Text="YJMPD-UWP @"/>
                            <TextBlock Text="{Binding Year}" Margin="5,0,0,0" />
                        </StackPanel>

                    </StackPanel>
                </RelativePanel>
            </SplitView.Pane>
            
            <SplitView.Content>
                <Grid>
                    <Frame Name="Frame"/>

                    <StackPanel ManipulationMode="TranslateX"
                          ManipulationCompleted="Content_ManipulationCompleted"
                          Width="10"
                          Background="Transparent"
                          HorizontalAlignment="Left"
                          VerticalAlignment="Stretch">
                    </StackPanel>

                    <StackPanel Name="BackMessage" Background="LightGray" Opacity="0.7" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="0,0,0,40" Visibility="Collapsed" Height="Auto">
                        <TextBlock Text="Press back again to exit" Margin="5" HorizontalAlignment="Center" TextAlignment="Center"/>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>