How can I prevent window titles from overlapping in a Maui app with shell navigation and modals?

Ansh 0 Reputation points
2024-04-25T16:52:05.36+00:00

I'm developing a Maui app with shell navigation and modals, and I'm encountering an issue with overlapping window titles. When navigating from the main page to another page using shell navigation, a back button appears, causing the window title to shift slightly to the right. However, when I push a modal on that page, the window title on the modal page remains in its original position. This results in both window titles overlapping and creating a visually awkward effect.

I've attached images for reference

MainPage:
Mainpage

Navigated to another page using shell navigation:
backbutton

Pushed Modal Page:
Overlap

Any insights, code snippets, or suggestions would be immensely helpful. Thank you!

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,997 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Ansh 0 Reputation points
    2024-04-26T12:57:28.39+00:00

    it is a Tab app. First I am in the CartsView then I click a button that shell navigates

      public async Task NavigateAsync<T>(ShellNavigationQueryParameters? param) where T : Page
      {
          try
          {
              if (param is null)
                  await Shell.Current.GoToAsync(typeof(T).Name);
              else
                  await Shell.Current.GoToAsync(typeof(T).Name, param);
          }
          catch (Exception ex)
          {
              throw new InvalidOperationException($"Exception in Navigation: {ex.Message}");
          }
      }
    

    to ReturnCartView. After that in the ReturnCartView I pushed a modal page (using PushModalAsync) which is PartsInformationView.

    Here is my Appshell.xaml

    <?xml version="1.0" encoding="UTF-8" ?>
    <Shell
        x:Class="SmartCart.AppShell"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:SmartCart"
        xmlns:views="clr-namespace:SmartCart.Views"
        Title="Smart Cart">
        <TabBar>
            <ShellContent 
                 x:Name="HomeView"
                 Title="Home"
                 ContentTemplate="{DataTemplate views:HomeView}"
                 Route="HomeView"
                 Icon="home.png" />
            
            <ShellContent 
                  x:Name="Cart"
                  Title="Carts"
                  ContentTemplate="{DataTemplate views:CartsView}"
                  Route="CartsView"
                  Icon="cart.png" />
        </TabBar>
        <Shell.ToolbarItems>
            <ToolbarItem Text="Settings" 
                     Order="Secondary"  
                     Clicked="ToolbarItem_Clicked" />
        </Shell.ToolbarItems>
    </Shell>
    
    

    Mainpage

    The <Shell.TitleView> just changes the above circled title and not the WindowTitle

    I was able to remove the Back button in the ReturnCartView using this it fixes the visual effect

      <Shell.BackButtonBehavior>
          <BackButtonBehavior IsVisible="False" />
      </Shell.BackButtonBehavior>
    

    Or I could just remove the title from the Shell then it does not overlap
    User's image

    0 comments No comments