XAML - Nachodzenie NavigationView

Question

Znając C++, rozpocząłem naukę WinUI3. Nigdy wcześniej nie miałem styczności z XAML-em (korzystałem z Win32 API). Próbuję stworzyć prosty kalkulator, niestety komponent NavigationView nachodzi bądź stanowi tło (w zależności od umieszczenia) na resztę przycisków. Powoduje to że tło przycisków jest zmienione, a nawigacja niefunkcjonalna. 

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

    <Grid>
        <!-- Left-side navigation: -->
        <NavigationView x:Name="leftNav" PaneDisplayMode="LeftMinimal" IsBackButtonVisible="Collapsed" HorizontalAlignment="Left" IsTabStop="False" SelectionChanged="leftNavSelectionChanged">
            <NavigationView.MenuItems>
                <!-- Left side nav content: -->
                <NavigationViewItem Content="Standard" Icon="Calculator" ToolTipService.ToolTip="Standard" Tag="StandardCalc" IsSelected="True"/>
            </NavigationView.MenuItems>
            <Frame x:Name="contentFrame8" />
        </NavigationView>
        <!-- Calculation section here: -->
        <Grid Padding="5" HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Margin="0 10 0 10" Orientation="Horizontal" Grid.Row="0" FlowDirection="RightToLeft">
                <Button Width="36" Height="36" Style="{StaticResource DefaultButtonStyle}" Padding="0">
                    <FontIcon FontFamily="Segoe Fluent Icons" FontSize="16" Glyph="&#xe81c;"/>
                </Button>
            </StackPanel>
            <TextBlock Text="1234" Margin="0 10 5 10" FontSize="42" FontWeight="SemiBold" FontFamily="Segoe UI" TextAlignment="Right" Grid.Row="1"></TextBlock>
            <Grid x:Name="StandardInputMode" Grid.Row="2" Width="340" Padding="5" ColumnSpacing="0" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Button Grid.Row="0" Grid.Column="0" Style="{StaticResource ButtonRevealStyle}" Width="65" Height="60">
                    <TextBlock Foreground="Red" FontSize="16" Text="C"/>
                </Button>
                <Button Grid.Row="0" Grid.Column="1" Style="{StaticResource ButtonRevealStyle}" Width="65" Height="60">
                    <TextBlock FontSize="16" Text="( )"/>
                </Button>
                <Button Grid.Row="0" Grid.Column="2" Style="{StaticResource ButtonRevealStyle}" Width="65" Height="60">
                    <TextBlock FontSize="16" Text="%"/>
                </Button>
                <Button Grid.Row="0" Grid.Column="3" Style="{StaticResource ButtonRevealStyle}" Width="65" Height="60">
                    <FontIcon FontFamily="Segoe Fluent Icons" FontSize="16" Glyph="&#xe750;"/>
                </Button>
            </Grid>
        </Grid>
    </Grid>
    
</Window>

 

Z góry dziękuję i przepraszam zarazem za tak długi fragment kodu. Jednak nie jestem w stanie stwierdzić co powoduje to nieprawidłowe zachowanie.

Comments

Chodzi mi o to aby zachowanie NavigationView było zbliżone do zachowania systemowego kalkulatora. Tak jakby NavigationView miał ustawiony position: fixed; ;)

---

Spróbuj dodać do NavigationView - VerticalAlignment i ustaw Height

<NavigationView VerticalAlignment="Top" Height="50" ...>
    <!-- Zawartość NavigationView -->
</NavigationView>

 

możesz dodatkowo spróbować zamienić

HorizontalAlignment="Left"

na

HorizontalAlignment="Stretch"

---

Niestety nie działa

---

Może zapisz tak

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

   <NavigationView x:Name="leftNav" PaneDisplayMode="LeftMinimal" IsBackButtonVisible="Collapsed" HorizontalAlignment="Left" IsTabStop="False" SelectionChanged="leftNavSelectionChanged">
        <NavigationView.MenuItems>
            <!-- Left side nav content: -->
            <NavigationViewItem Content="Standard" Icon="Calculator" ToolTipService.ToolTip="Standard" Tag="StandardCalc" IsSelected="True"/>
       </NavigationView.MenuItems>
       <Frame x:Name="contentFrame8" />
   </NavigationView>
 
   <Grid>
        ...
   </Grid>
     
</Window>

 

---

Niestety, dalej nic.