2.2-AreaHunters/YJMPD-UWP/Views/HelpView.xaml

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

    <Page.Resources>
        <Style TargetType="StackPanel" x:Key="HelpPanel">
            <Setter Property="Margin" Value="10,10,10,0" />
            <Setter Property="Padding" Value="0,0,0,10" />
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
            <Setter Property="BorderThickness" Value="0,0,0,2" />
        </Style>

        <Style TargetType="TextBlock" x:Key="HelpText">
            <Setter Property="RelativePanel.AlignTopWithPanel" Value="True" />
            <Setter Property="RelativePanel.AlignLeftWithPanel" Value="True" />
            <Setter Property="TextWrapping" Value="WrapWholeWords" />
            <Setter Property="TextAlignment" Value="Left" />
        </Style>

        <Style TargetType="TextBlock" x:Key="HelpTextImage">
            <Setter Property="RelativePanel.AlignTopWithPanel" Value="True" />
            <Setter Property="RelativePanel.AlignLeftWithPanel" Value="True" />
            <Setter Property="TextWrapping" Value="WrapWholeWords" />
            <Setter Property="Margin" Value="0,0,60,0" />
            <Setter Property="TextAlignment" Value="Left" />
        </Style>

        <Style TargetType="Image" x:Key="HelpImageSmall">
            <Setter Property="RelativePanel.AlignRightWithPanel" Value="True" />
            <Setter Property="RelativePanel.AlignVerticalCenterWithPanel" Value="True" />
            <Setter Property="Width" Value="50" />
            <Setter Property="Height" Value="50" />
            <Setter Property="Stretch" Value="UniformToFill"/>
        </Style>

        <Style TargetType="SymbolIcon" x:Key="HelpSymbolSmall">
            <Setter Property="RelativePanel.AlignRightWithPanel" Value="True" />
            <Setter Property="RelativePanel.AlignVerticalCenterWithPanel" Value="True" />
            <Setter Property="Width" Value="50" />
            <Setter Property="Height" Value="50" />
        </Style>

        <Style TargetType="TextBlock" x:Key="HelpIconSmall">
            <Setter Property="RelativePanel.AlignRightWithPanel" Value="True" />
            <Setter Property="RelativePanel.AlignVerticalCenterWithPanel" Value="True" />
            <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
            <Setter Property="FontSize" Value="40" />
        </Style>

        <Style TargetType="Image" x:Key="HelpImageLarge">
            <Setter Property="Stretch" Value="UniformToFill"/>
            <Setter Property="Margin" Value="0,5,0,0" />
        </Style>
    </Page.Resources>

    <ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalSnapPointsAlignment="Near">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!-- Position -->
            <StackPanel Grid.Row="0" Style="{StaticResource HelpPanel}">
                <TextBlock Text="{Binding HelpItem1Header}" Style="{StaticResource Header}" />
                <RelativePanel>
                    <TextBlock Text="{Binding HelpItem1Text}" Style="{StaticResource HelpTextImage}" />
                    <Image Source="/Assets/CurrentLocationRound.png" Style="{StaticResource HelpImageSmall}" />
                </RelativePanel>
            </StackPanel>

            <!-- Page Navigation -->
            <StackPanel Grid.Row="1" Style="{StaticResource HelpPanel}">
                <TextBlock Text="{Binding HelpItem2Header}" Style="{StaticResource Header}" />
                <RelativePanel>
                    <TextBlock Text="{Binding HelpItem2Text}" Style="{StaticResource HelpText}" />
                </RelativePanel>
                <Image Source="/Assets/Help/HelpItem2Image.png" Style="{StaticResource HelpImageLarge}" />
            </StackPanel>

            <!-- GPS Information -->
            <StackPanel Grid.Row="2" Style="{StaticResource HelpPanel}">
                <TextBlock Text="{Binding HelpItem3Header}" Style="{StaticResource Header}" />
                <RelativePanel>
                    <TextBlock Text="{Binding HelpItem3Text}" Style="{StaticResource HelpText}" />
                </RelativePanel>
                <Image Source="/Assets/Help/HelpItem3Image.png" Style="{StaticResource HelpImageLarge}" />
            </StackPanel>

            <!-- Map + Controls (Tilt,zoom,pan,rotate) -->
            <!-- Route -->
            <!-- Help -->
            <!-- Settings -->
            <!-- Landmark -->
            <!-- Visited / Not Visited -->
            <!-- Starting a route -->
            <!-- Stopping a route -->
            <!-- What happens when you walk -->
            <!-- Buttons and text during navigation -->
        </Grid>
    </ScrollViewer>
</Page>