Uno 主要布局

Question

我是Uno新手，一直在关注框架导航tutorial。我注意到当框架导航时整个 window 发生变化。这很好但不是最佳的。有没有办法在 Uno 中拥有主布局，就像您在 ASP.Net MVC 项目中看到的那样？我宁愿不在每个页面上实现导航菜单。

Answer 1

虽然不完全是您要找的东西，但我相信 NavigationView control is your closest bet. You can disable CompactView and obtain something like what is showcased in UnoGallery。

Answer 2

为了扩展@matfillion 的回答，如果 NavigationView 不符合您的需求，您可以轻松地滚动自己的导航 shell，同时利用内置的框架导航。 Frame 无需成为应用程序中的顶级控件。

这里举一个超简单的例子来说明原理。在页面之间导航时，导航列表将保持在顶部可见。

Shell.xaml:

<UserControl x:Class="UnoTestbed44.Shell"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListView x:Name="NavigationList"
                  Background="LightGray"
                  ItemsSource="{x:Bind Pages}"
                  Grid.Row="0"
                  DisplayMemberPath="Label"
                  SelectionChanged="NavigationList_SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
        <Frame x:Name="MainFrame"
               Grid.Row="1" />
    </Grid>
</UserControl>

Shell.xaml.cs:

using System;
using System.Linq;
using Windows.UI.Xaml.Controls;

namespace UnoTestbed44
{
    public sealed partial class Shell : UserControl
    {
        public NavigationItem[] Pages { get; } = new[] { 
            new NavigationItem {Label = "First page", PageType = typeof(Page1)},
            new NavigationItem {Label = "Second page", PageType = typeof(Page2)},
        };
        public Shell()
        {
            this.InitializeComponent();
        }

        private void NavigationList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems.FirstOrDefault() is NavigationItem navigationItem)
            {
                MainFrame.Navigate(navigationItem.PageType);
            }
        }

        public class NavigationItem
        {
            public string Label { get; set; }
            public Type PageType { get; set; }
        }
    }
}

覆盖 App.xaml.cs 中的 OnLaunched()：

        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
#if NET5_0 && WINDOWS
            _window = new Window();
            _window.Activate();
#else
            _window = Windows.UI.Xaml.Window.Current;
#endif

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (_window.Content == null)
            {
                _window.Content = new Shell();
            }

#if !(NET5_0 && WINDOWS)
            if (e.PrelaunchActivated == false)
#endif
            {
                // Ensure the current window is active
                _window.Activate();
            }
        }

Uno 主要布局

Uno Main Layout

uno-platform