calculator/src/Calculator/Views/MainPage.xaml

<Page x:Class="CalculatorApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:automation="using:CalculatorApp.Common.Automation"
      xmlns:common="using:CalculatorApp.Common"
      xmlns:controls="using:CalculatorApp.Controls"
      xmlns:converters="using:CalculatorApp.Converters"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:CalculatorApp"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:vm="using:CalculatorApp.ViewModel"
      x:Name="pageRoot"
      Background="{ThemeResource AppChromeAcrylicHostBackdropMediumLowBrush}"
      Loaded="OnPageLoaded"
      Unloaded="OnPageUnLoaded"
      mc:Ignorable="d">

    <Page.Resources>
        <automation:NarratorNotifier x:Name="NarratorNotifier"/>
        <Style x:Name="CalculatorBaseStyle" TargetType="local:Calculator">
            <Setter Property="Margin" Value="0,0,0,0"/>
        </Style>
        <Style x:Name="UnitConverterBaseStyle" TargetType="local:UnitConverter">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Setter Property="IsEnabled" Value="False"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
        </Style>
        <Style x:Key="AboutFlyoutPresenterStyle" TargetType="FlyoutPresenter">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="AutomationProperties.AccessibilityView" Value="Raw"/>
        </Style>
        <Style x:Key="NavViewItemStyle" TargetType="muxc:NavigationViewItem">
            <Setter Property="KeyTipPlacementMode" Value="Right"/>
        </Style>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <!--
                This row is padding for the SystemFocusVisuals,
                otherwise the focus rectangles render under the title bar controls.
            -->
            <RowDefinition x:Name="FocusVisualMargin" Height="3"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Mode">
                <VisualState x:Name="ConverterWide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="{StaticResource AppMinWindowHeight}" MinWindowWidth="640"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="DockVisible">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="{StaticResource AppMinWindowHeight}" MinWindowWidth="560"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="MinSizeLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="{StaticResource AppMinWindowHeight}" MinWindowWidth="{StaticResource AppMinWindowWidth}"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="DefaultLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel Visibility="Collapsed">
            <!--
                These buttons are only here to serve as the target for copy/paste commands
                they are not to be shown, only to have the command and shortcut assigned to them.
            -->
            <Button x:Name="copyButton"
                    x:Uid="copyButton"
                    Command="{x:Bind Model.CopyCommand}"/>
            <Button x:Name="pasteButton"
                    x:Uid="pasteButton"
                    Command="{x:Bind Model.PasteCommand}"/>
            <Button x:Name="copyButtonAlternate"
                    x:Uid="copyButtonAlternate"
                    Command="{x:Bind Model.CopyCommand}"/>
            <Button x:Name="pasteButtonAlternate"
                    x:Uid="pasteButtonAlternate"
                    Command="{x:Bind Model.PasteCommand}"/>
        </StackPanel>

        <!-- Title Bar -->
        <local:TitleBar x:Name="CustomTitleBar"
                        Grid.Row="0"
                        Visibility="Collapsed"/>

        <muxc:NavigationView x:Name="NavView"
                             x:Uid="NavView"
                             Grid.Row="2"
                             CompactModeThresholdWidth="Infinity"
                             DataContext="{x:Bind Model}"
                             ExpandedModeThresholdWidth="Infinity"
                             IsBackButtonVisible="Collapsed"
                             IsSettingsVisible="False"
                             Loaded="OnNavLoaded"
                             MenuItemsSource="{x:Bind CreateUIElementsForCategories(Model.Categories), Mode=OneWay}"
                             OpenPaneLength="{StaticResource SplitViewOpenPaneLength}"
                             PaneClosed="OnNavPaneClosed"
                             PaneOpened="OnNavPaneOpened"
                             PaneOpening="OnNavPaneOpening"
                             SelectionChanged="OnNavSelectionChanged"
                             TabIndex="1"
                             UseSystemFocusVisuals="True">
            <muxc:NavigationView.PaneFooter>
                <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical">
                    <muxc:NavigationViewList x:Name="NavFooter"
                                             Width="{x:Bind NavView.OpenPaneLength, Mode=Oneway}"
                                             x:Load="False"
                                             IsItemClickEnabled="True"
                                             ItemClick="OnAboutButtonClick">
                        <muxc:NavigationViewList.Items>
                            <muxc:NavigationViewItem x:Name="AboutButton"
                                                     x:Uid="AboutButton"
                                                     Style="{StaticResource NavViewItemStyle}">
                                <muxc:NavigationViewItem.Icon>
                                    <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xe946;"/>
                                </muxc:NavigationViewItem.Icon>
                                <FlyoutBase.AttachedFlyout>
                                    <Flyout x:Name="AboutPageFlyout"
                                            x:Uid="AboutPageFlyout"
                                            Closed="OnAboutFlyoutClosed"
                                            FlyoutPresenterStyle="{StaticResource AboutFlyoutPresenterStyle}"
                                            Opened="OnAboutFlyoutOpened">
                                        <local:AboutFlyout x:Name="AboutPage" x:Load="False"/>
                                    </Flyout>
                                </FlyoutBase.AttachedFlyout>
                            </muxc:NavigationViewItem>
                        </muxc:NavigationViewList.Items>
                    </muxc:NavigationViewList>
                </StackPanel>
            </muxc:NavigationView.PaneFooter>

            <Grid>
                <TextBlock x:Name="Header"
                           Margin="52,6,12,0"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           Style="{StaticResource SubtitleTextBlockStyle}"
                           Text="{x:Bind Model.CategoryName, Mode=OneWay}"/>

                <Border x:Name="CalcHolder">
                    <!-- PLACEHOLDER!!!! This is where the calculator goes when it is delay loaded -->
                </Border>
                <Border x:Name="DateCalcHolder">
                    <!-- PLACEHOLDER!!!! This is where the date calculator goes when it is delay loaded -->
                </Border>
                <Border x:Name="ConverterHolder">
                    <!-- PLACEHOLDER!!!! This is where the converter goes when it is delay loaded -->
                </Border>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>