CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
Yves
Yves

Reputation: 211

How to implement MenuItem in Xamarin Forms - Shell

I am programming an app and would like to implement two menuItems within a shell. The problem is that I just get black background when I start the app. Thank you very much !!!

enter image description here

Here is the XAML File from Shell:

<?xml version="1.0" encoding="utf-8" ?>
<Shell
    x:Class="MyApp.MainShell"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="#9da7d6"
    IconImageSource="NoWifiPic">

    <MenuItem Text="Rate" IconImageSource="RatingStar.png" Clicked="MenuItem_Clicked"/>
    <MenuItem Text="Support" IconImageSource="Feedback.png" Clicked="MenuItem_Clicked_1"/>

</Shell>

Here is the Code File from Shell:

public partial class MainShell : Shell
    {
        public MainShell()
        {
            InitializeComponent();
        }

      
      
        private void MenuItem_Clicked(object sender, EventArgs e)
        {
            //Code
        }

        private async void MenuItem_Clicked_1(object sender, EventArgs e)
        {
           //Code
        }
    }

Here is the Code File from App:

public partial class App : Application
    {

        public App()
        {
            InitializeComponent();
            MainPage = new MainShell();
        }

        protected override void OnStart()
        {
         
        }

        protected override void OnSleep()
        {
          
        }

        protected override void OnResume()
        {
            
        }
    }

Upvotes: 0

Views: 1551

Answers (2)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10958

Any MenuItem objects declared before FlyoutItem objects will appear before the FlyoutItem objects in the flyout, and any MenuItem objects declared after FlyoutItem objects will appear after the FlyoutItem objects in the flyout.

We could not only add the MenuItem. We need a ShellContent to show the default page when you open the app except the MenuItem. But we could hide it like @Bas H said with the FlyoutItemIsVisible property.

 <FlyoutItem FlyoutItemIsVisible="False"  x:Name="aboutItem">
    <ShellContent Title="Test2" ContentTemplate="{DataTemplate local:ItemsPage}"></ShellContent>
</FlyoutItem>
<MenuItem Text="Rate" IconImageSource="tab_about.png" Clicked="MenuItem_Clicked"/>
<MenuItem Text="Support" IconImageSource="tab_about.png" Clicked="MenuItem_Clicked"/>

strong text

If you set the FlyoutItemIsVisible to false and still see the button as screenshot, you could try to uninstall and reinstall the app.

Upvotes: 1

Bas H
Bas H

Reputation: 2216

Try this ,it is starting with Page1. Change it to your own page that you want to start with.

<ShellItem Route="Startpage">
    <ShellContent ContentTemplate="{DataTemplate local:Page1}" Route="home" />
</ShellItem>

After this you can add the MenuItems

 <ShellItem Route="Startpage">
<ShellContent ContentTemplate="{DataTemplate local:Page1}" Route="home" />
</ShellItem>

<MenuItem Text="Rate" IconImageSource="RatingStar.png" Clicked="MenuItem_Clicked"/>
<MenuItem Text="Support" IconImageSource="Feedback.png" Clicked="MenuItem_Clicked_1"/>

Here the documentation https://learn.microsoft.com/nl-nl/xamarin/xamarin-forms/app-fundamentals/shell/

If You want to hide the Startpage or HomePage button in the Flyout use this

FlyoutItemIsVisible="False"

Add this to the ShellItem.

  <ShellItem Route="Startpage" FlyoutItemIsVisible="False" >
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="home"/>
</ShellItem>


<MenuItem Text="Rate" IconImageSource="RatingStar.png" Clicked="MenuItem_Clicked"/>

<MenuItem Text="Support" IconImageSource="Feedback.png" Clicked="MenuItem_Clicked_1"/>

Startpage :

enter image description here

Upvotes: 4

Related Questions