Route, Region and Navigation Issues

[lhLife]

Current behavior

The relationship between Route and Region is chaotic

docs demo

`

<Grid uen:Region.Attached="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <utu:NavigationBar Content="Main Page"
                        Style="{StaticResource MaterialNavigationBarStyle}" />
    <Grid uen:Region.Attached="True"
          uen:Region.Navigator="Visibility"
          Grid.Row="1">
        <Grid uen:Region.Name="One" 
              Visibility="Collapsed">
            <TextBlock Text="One"
                       FontSize="24"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Grid>
        <Grid uen:Region.Name="Two" 
              Visibility="Collapsed">
            <TextBlock Text="Two"
                       FontSize="24"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Grid>
        <Grid uen:Region.Name="Three" 
              Visibility="Collapsed">
            <TextBlock Text="Three"
                       FontSize="24"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Grid>
    </Grid>
    <utu:TabBar Grid.Row="2"
                uen:Region.Attached="True"
                VerticalAlignment="Bottom">
        <utu:TabBar.Items>
            <utu:TabBarItem uen:Region.Name="One" 
                            Style="{StaticResource MaterialBottomTabBarItemStyle}" />
            <utu:TabBarItem uen:Region.Name="Two" 
                            Style="{StaticResource MaterialBottomTabBarItemStyle}" />
            <utu:TabBarItem uen:Region.Name="Three" 
                            Style="{StaticResource MaterialBottomTabBarItemStyle}" />
            <utu:TabBarItem uen:Region.Name="SignUp" 
                            Style="{StaticResource MaterialBottomTabBarItemStyle}" />
        </utu:TabBar.Items>
    </utu:TabBar>
</Grid>

`

1. SelectedIndex="0" Unable to initialize display of Region="One" panel
2. SignUpPage must be implemented through navigation （demo: <local:SignUpPage uen:Region.Name="SignUp" Visibility="Collapsed" /> Unable to load ViewModel）
3. There are navigation issues within SignUp.（After the current navigation, the page is at the same level as SignUp. It should have two possibilities, entering Frame on Shell or entering Frame on SignUp）

This issue is related to it

Can we discuss this issue in detail as it may lead to more complex problems.
How to display the Region section on the URL.
The complexity of URL display in regions after multi-level navigation

Expected behavior

How to reproduce it (as minimally and precisely as possible)

Environment

Nuget Package (s):

Package Version(s):

Affected platform(s):

• iOS
• macOS (AppKit)
• Mac Catalyst
• Android
• WebAssembly
• Windows
• Skia (WPF)
• Skia (GTK on Linux/macOS/Windows)
• Skia (Linux Framebuffer)
• Build tasks

Visual Studio:

• 2019 (version: )
• 2022 (version: )
• Visual Studio Code (version: )
• Rider Windows (version: )
• Rider macOS (version: )

Relevant plugins:

• Resharper (version: )

Anything else we need to know?

[lhLife]

App.Xaml.cs -> RegisterRoutes
`

    routes.Register(
        new RouteMap("", View: views.FindByViewModel<ShellModel>(),
            Nested:
            [
                new ("Main", View: views.FindByViewModel<MainModel>(), IsDefault:true),

                new ("Goods", View: views.FindByViewModel<GoodsModel>(),Nested:[
                    new ("Detail",View:views.FindByViewModel<GoodsDetailModel>())
                ]),
                new ("Setting", View: views.FindByViewModel<SettingModel>(),Nested:[
                    new ("Detail",View:views.FindByViewModel<SettingDetailModel>())
                ]),
            ]
        )
    );

`

Main.xaml

<Grid uen:Region.Attached="True">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition />
  </Grid.RowDefinitions>
  <utu:NavigationBar Content="Main Page" />
  <Grid uen:Region.Attached="True"
            uen:Region.Navigator="Visibility"
            Grid.Row="1">
    <Grid uen:Region.Name="One" 
                Visibility="Visible">
      <TextBlock Text="One"
                         FontSize="24"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center" />
    </Grid>
    <Grid uen:Region.Name="r1">
      <local:GoodsPage  uen:Region.Name="Goods" Visibility="Collapsed" />
    </Grid>
    <Grid uen:Region.Name="r2">
      <local:SettingPage  uen:Region.Name="Setting" Visibility="Collapsed" />
    </Grid>
  </Grid>
  <utu:TabBar Grid.Row="2"
                  uen:Region.Attached="True"
              SelectedIndex="0"
                  VerticalAlignment="Bottom">
    <utu:TabBar.Items>
      <utu:TabBarItem uen:Region.Name="One"     Content="one1" Icon="{ui:FontIcon Glyph='&#xE80F;', FontFamily={StaticResource SymbolThemeFontFamily} }" />
      <utu:TabBarItem uen:Region.Name="r1"  Content="one4" Icon="{ui:FontIcon Glyph='&#xE713;', FontFamily={StaticResource SymbolThemeFontFamily} }" />
      <utu:TabBarItem uen:Region.Name="r2"  Content="one4" Icon="{ui:FontIcon Glyph='&#xE713;', FontFamily={StaticResource SymbolThemeFontFamily} }" />
    </utu:TabBar.Items>
  </utu:TabBar>
</Grid>

GoodsDetail.Xaml

<Grid uen:Region.Attached="True">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition />
  </Grid.RowDefinitions>
  <utu:NavigationBar Content="GoodDetail Page" />
  <Grid uen:Region.Attached="True"
            uen:Region.Navigator="Visibility"
            Grid.Row="1">
    <Grid uen:Region.Name="introduce">
      <TextBlock Text="introduce"
                         FontSize="24"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center" />
    </Grid>
    <Grid uen:Region.Name="attr">
      <TextBlock Text="attr"
                         FontSize="24"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center" />
    </Grid>
    <Grid uen:Region.Name="comment">
      <TextBlock Text="comment"
                         FontSize="24"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center" />
    </Grid>
  </Grid>
  <utu:TabBar Grid.Row="2"
                  uen:Region.Attached="True"
              SelectedIndex="0"
                  VerticalAlignment="Bottom">
    <utu:TabBar.Items>
      <utu:TabBarItem uen:Region.Name="introduce"     Content="one1" Icon="{ui:FontIcon Glyph='&#xE80F;', FontFamily={StaticResource SymbolThemeFontFamily} }" />
      <utu:TabBarItem uen:Region.Name="attr"  Content="one4" Icon="{ui:FontIcon Glyph='&#xE713;', FontFamily={StaticResource SymbolThemeFontFamily} }" />
      <utu:TabBarItem uen:Region.Name="comment"  Content="one4" Icon="{ui:FontIcon Glyph='&#xE713;', FontFamily={StaticResource SymbolThemeFontFamily} }" />
    </utu:TabBar.Items>
  </utu:TabBar>
</Grid>

The URL address is：

• /Main/r1/Goods/Detail/introduce
• /Main/r1/Goods/Detail/attr
• /Main/r1/Goods/Detail/comment
• /Main/r2/Setting/Detail/xxx(xxx is Region)

What about when Detail has parameters?

[DevTKSS]

Hello @lhLife
I did work a bit with navigation but had a bit different attempt, so I would like to compare it, because I am not sure which would be more correct. I am confronted with the issue that with the visibility, I am getting a warn on navigating but its showing as expected. In my current app, working with mvux and the navigator its even more complicated, because when working with x:Bind, the DataContext throws me a NullReferenceException where mvux and navigator should insert the DataContext. You mentioned here, that you have also issues with DataContext... Maybe there are some intersections which could show important details for solving this?

My RegisterRoutes Definition:

private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
    {
        views.Register(
            new ViewMap(ViewModel: typeof(ShellViewModel)),
            new ViewMap<LoginPage, LoginViewModel>(),
            new ViewMap<HomePage, HomeViewModel>(),
            new ViewMap<SettingsPage, SettingsViewModel>(),
            new ViewMap<MainPage, MainViewModel>(),
            new DataViewMap<SecondPage, SecondViewModel, Entity>()
        );

        routes.Register(
            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
                Nested:
                [
                    new ("Login", View: views.FindByViewModel<LoginViewModel>()),
                    new ("Main", View: views.FindByViewModel<MainViewModel>(),IsDefault: true,
                        Nested:
                            [
                                new RouteMap("Home", View: views.FindByViewModel<HomeViewModel>(), IsDefault: true),
                                new RouteMap("Settings", View: views.FindByViewModel<SettingsViewModel>()),
                            ]),
                    new ("Second", View: views.FindByViewModel<SecondViewModel>()),
                ]
            )
        );
    }

Important to notice would be for example, You done the Details Route Name as only Details, but your actual Model behind the scenes is SettingsDetailsModel and GoodsDetailsModel and not both DetailModel. So I would maybe do the routeName in your app also with this Prefix, calling it GoodsDetails and SettingsDetails, so there is no doubt in which you want from the navigator. also in my opinion your code readability is suffering from you putting the Nested: in the same line instead of like here (done from the how-To guide) but the functionallity is not interupted from this detail.

my MainPage in this case is including a NavigationView, because I would like to have such thing on the left side and clicking the items (best case i could just do them in the ViewModel or Model via a Databinding, but had problems on WinUI application before, so this is only done with the How to guide again:

<Page x:Class="UnoApp1.Presentation.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoApp1.Presentation"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      xmlns:um="using:Uno.Material"
      NavigationCacheMode="Required"
      Background="{ThemeResource BackgroundThemeBrush}">
  <ScrollViewer>
    <Grid utu:SafeArea.Insets="VisibleBounds" uen:Region.Attached="True">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <utu:NavigationBar HorizontalAlignment="Center" x:Name="NavigationBarControl" Content="{Binding Title}" />
        
        <NavigationView x:Name="NavigationViewControl"
                    Grid.Row="1"
                    PaneDisplayMode="LeftCompact"
                    IsBackButtonVisible="Collapsed"
                    IsSettingsVisible="False"
                    uen:Region.Attached="True">
            
                <NavigationView.MenuItems>
                    <NavigationViewItem Icon="Home" Content="One"
                                        uen:Region.Name="./One"/>
                    <NavigationViewItem Icon="Clock" Content="Two"
                                        uen:Region.Name="./Two"/>
                    <NavigationViewItem Icon="Calendar" Content="Three"
                                        uen:Region.Name="./Three"/>
                    <NavigationViewItem Icon="Home" Name="Home"
                                        uen:Region.Name="./Home"/>
                    <NavigationViewItem Icon="Setting" Name="Settings"
                                        uen:Region.Name="./Settings"/>

                </NavigationView.MenuItems>

                <Grid uen:Region.Attached="True" uen:Region.Navigator="Visibility">
                    <Grid uen:Region.Name="One"
                          Visibility="Collapsed">
                        <TextBlock Text="One"
                   FontSize="24"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
                    </Grid>
                    <Grid uen:Region.Name="Two"
                          Visibility="Collapsed">
                        <TextBlock Text="Two"
                   FontSize="24"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
                    </Grid>
                    <Grid uen:Region.Name="Three"
                          Visibility="Collapsed">
                        <TextBlock Text="Three"
                   FontSize="24"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
                    </Grid>
                </Grid>
            </NavigationView>
    </Grid>
  </ScrollViewer>
</Page>

The One, Two, Three NavigationViewItem is throwing the warn, but still doing what it should do. the thing that makes me wonder on your code, you did not add the ./ which made my navigation work, and without this it is not. I do know, this Qualifyers are not used in the guide (not on every page where it is used, they are done differently, which is really not helping at all. how should I know which one is correct? Why dont we use the Request instead? could request the page? but as you recognized already, the "One" is not shown initially only if you switch forewards/backwards. Tryed to do this also with the codebehind on the Model but to be honest, I really dont know how that should look like.
so for example, we would be on the HomePage, nested in MainPage, clicking the navigation Button on the Headbar, which should bring us to the MainPages Content nested HomePage which is only in the xaml having the Region.Name "GoodsDetails" which also have the deeper "GoodsDetailsAGB" nested. in a path that would be kind of "MainPage/HomePage/GoodsDetails/GoodsDetailsAGB", BUT the problem I do have in mind, I would beleave that the navigator might think Homepage is not !Inside! of the contentArea, it is navigated as full page, also the GoodsDetails and so on. Yes, you might say, hey, we defined the routemap, but how should this know, that the page is not overlaying the whole MainPage?