How do I add content to my app without it interfering with my navigation view? - xaml

Question

I am very much a beginner with WinUI 3. I am learning and don't have much direction at all.
I'm trying to add a navigation bar to the left and then add content (buttons, text boxes, etc) to the right.
I don't know if I should add the navigation view to the grid or how I would do that. I have two code examples that I've tried and neither of them are doing what I want them to do.
An example of what I want my app to look like is the WinUI 3 Gallery app.
The navigation bar is added to the app as expected, but when I try to add the grid to start adding buttons and text boxes and other things, I get an error with this code:
<Window
x:Class="WinUI_3_with_Navigation_and_Grid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI_3_with_Navigation_and_Grid"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<NavigationView x:Name="nvSample" PaneDisplayMode="Auto" Background="#c7cbd1">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
<Grid Background="Gray" ColumnDefinitions="50, Auto, *" RowDefinitions ="50, Auto, *">
<Rectangle Fill="Red" Grid.Column="0" Grid.Row="0" />
<Rectangle Fill="Blue" Grid.Row="1" />
<Rectangle Fill="Green" Grid.Column="1" />
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1" />
<Rectangle Fill="BlanchedAlmond" Grid.Row="2" Grid.Column="0"/>
<Rectangle Fill="DarkCyan" Grid.Row="2" Grid.Column="1"/>
<Rectangle Fill="MidnightBlue" Grid.Row="2" Grid.Column="2"/>
</Grid>
</Window>
Or I do this and it messes everything up...
<Window
x:Class="WinUI_3_with_Navigation_and_Grid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI_3_with_Navigation_and_Grid"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Gray" ColumnDefinitions="50, Auto, *" RowDefinitions ="50, Auto, *">
<NavigationView x:Name="nvSample" PaneDisplayMode="Auto" Background="#c7cbd1">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
<Rectangle Fill="Red" Grid.Column="0" Grid.Row="0" />
<Rectangle Fill="Blue" Grid.Row="1" />
<Rectangle Fill="Green" Grid.Column="1" />
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1" />
<Rectangle Fill="BlanchedAlmond" Grid.Row="2" Grid.Column="0"/>
<Rectangle Fill="DarkCyan" Grid.Row="2" Grid.Column="1"/>
<Rectangle Fill="MidnightBlue" Grid.Row="2" Grid.Column="2"/>
</Grid>
</Window>

Answer 1

The error you are getting is because Window can have one content as a child. In your first block of code, the Window has a NavigationView and a Grid.
If you want something like the WinUI 3 Gallery, you can see the actual code in the GitHub repo.
You also should consider using the Template Studio for WinUI. You can implement navigation with few clicks.
Here's a sample code to understand how to implement a simple navigation.
Let's say we have 2 pages, Page1.xaml and Page2.xaml.
.xaml
<NavigationView SelectionChanged="NavigationView_SelectionChanged">
<NavigationView.MenuItems>
<NavigationViewItem Content="Page1" Tag="Page1"/>
<NavigationViewItem Content="Page2" Tag="Page2"/>
</NavigationView.MenuItems>
<Frame x:Name="ContentFrame"/>
</NavigationView>
.xaml.cs
namespace NavigationSampleApp;
private void NavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
if (args.SelectedItem is NavigationViewItem item &&
item.Tag is string tag &&
Type.GetType($"NavigationSampleApp.{tag}") is Type pageType)
{
this.ContentFrame.Navigate(pageType);
}
}