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

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>

CodePudding user response：

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);
    }
}