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?