Uno Main Layout

user_2002076 0
Viewed 119

I am new to Uno and I have been following the frame navigation tutorial. I noticed that when the frame navigates the entire window changes. This is good but not optimal. Is there a way in Uno to have a Main Layout, like you would see in a ASP.Net MVC project? I would rather not implement the navigation menu on each page.

uno-platform
2 Answers

To extend on @matfillion's answer, if NavigationView doesn't suit your needs, you can easily roll your own navigation shell whilst leveraging the built-in frame navigation. There's no requirement for Frame to be the top-level control in your application.

Here's an ultra-simple example, to illustrate the principle. The navigation list will stay visible at the top whilst navigating between pages.

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

Override OnLaunched() in App.xaml.cs:

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

While not exactly what you are looking for, I believe the NavigationView control is your closest bet. You can disable CompactView and obtain something like what is showcased in UnoGallery.

user_7780660
Related