XAML 如何在不干扰导航视图的情况下向应用添加内容？

我是一个WinUI 3的初学者。我正在学习，没有太多的方向。
我尝试在左侧添加导航栏，然后在右侧添加内容（按钮、文本框等）。
我不知道是否应该将导航视图添加到网格中，也不知道如何添加。我尝试了两个代码示例，但它们都没有按照我的要求进行操作。
我希望我的应用程序看起来像的一个例子是WinUI 3 Gallery应用程序。
导航栏按预期添加到应用程序中，但当我尝试添加网格以开始添加按钮和文本框等内容时，我得到了以下代码的错误：

<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>

或者我这么做会把一切都搞砸...

<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>

您得到的错误是因为Window可以有一个内容作为子项。在第一个代码块中，Window有一个NavigationView和一个Grid。
如果你想要类似WinUI 3 Gallery的东西，你可以在GitHub repo中看到实际的代码。
您还应该考虑使用Template Studio for WinUI。您可以通过几次单击实现导航。
下面是一个示例代码，用于了解如何实现一个简单的导航。
假设我们有两个页面，Page1.xaml和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);
    }
}

XAML 如何在不干扰导航视图的情况下向应用添加内容？

1条答案

相关问题

热门标签

最新问答