Uno Main Layout - uno-platform

Question

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.

Answer 1

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

Answer 2

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.