question

JonathanP-4920 avatar image
0 Votes"
JonathanP-4920 asked JarvanZhang-MSFT edited

Shell custom flyout & Shell.TitleView

So I have a few issues with trying to customize Shell with a flyout menu.

The design I need to implement has a logo in the middle of the screen in the Shell.TitleView. In order to get it centered on all devices I've:

  1. Disabled the hamburger menu.

  2. Inside the Shell.TitleView on each screen I've put an absolute layout and inside that put the logo with AbsoluteLayout.LayoutBounds="0.5,0.5" as well as that I've put in my own hamburger menu button. For the button tap for the hamburger I run this code Shell.Current.FlyoutIsPresented = true;

  3. In the AppShell.xaml I've set FlyoutBehavior="Disabled"

So the issues are:

  1. I can no longer swipe or tap on the right side of the screen to dismiss the flyout menu. (For the flyout menu item tap event I navigate to the screen with Current.GoToAsync($"/{nameof(SettingsPage)}", false); and then set Current.FlyoutIsPresented = false; which works.)

  2. I can't find a way to remove the back icon < for the screens that are part of the flyout (except for navigating to them via the PushModalAsync but this means there's no Shell.TitleView at all.

  3. After navigating to a different screen and then back the Shell.TitleView disappears for no reason.

dotnet-xamarin
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, JonathanP-4920. Xamarin.Forms.Shell doesn't provide a property to remove the backbutton directly. Here is a workaround to hide the back button using Shell.BackButtonBehavior. Try to specify a transparent picture for the IconOverride property and then disable the back button by setting IsEnabled to false.

<Shell.BackButtonBehavior>
    <BackButtonBehavior IsEnabled="False" IconOverride="transparent.png"/>
</Shell.BackButtonBehavior>

Here is the relevant doc, you could refer to it.
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation#back-button-behavior

You can also hide the navigation bar and then customize a layout as the 'bar' for the contentPage.

0 Votes 0 ·

1 Answer

egvijayanand avatar image
0 Votes"
egvijayanand answered egvijayanand commented

Hello @JonathanP-4920,

To answer your question, define the SettingsPage as a TabBar item in the AppShell.

In a Shell layout, when there are Flyout items defined, the TabBar items won't be visible. Hence you can't navigate to this page from Flyout menu and relative routing will not work here. You need to use the absolute routing, i.e., with // prefix.

In this scenario, the back button and default flyout menu will disappear from the AppBar Title (it will be in disabled state).

Note: To come out of this page, some manual navigation provision should be in-place as back button won't work due to absolute routing (//).

 <TabBar>
         <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" Route="settings" />
 </TabBar>

To navigate to this page, link it from the MenuItem click event handler as stated in your requirement like

 Shell.Current.GoToAsync("//settings");

Let me know if you've any other queries on this.

Regards,
Vijay Anand E G


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @egvijayanand ,

I do still want to display a back button and logo in the title view (or at least at the top of each screen).
I guess there is no way to do that other than to disable the TitleView and then add it manually inside the <ContentPage> tag of each screen.
Is that what you are recommending?

0 Votes 0 ·

Hi @JonathanP-4920,

No need to repeat the TitleView definition in every other child page, use the base page concept.

Create an intermediary page and define all your customizations over there, then inherit your child pages from that intermediary page instead of inheriting from ContentPage. That way the customization will become part of your child's page.

Regards,
Vijay Anand E G

0 Votes 0 ·