How to implement MenuItem in Xamarin Forms - Shell

Question

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 !!!

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()
        {
            
        }
    }

Answer 1

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://docs.microsoft.com/nl-nl/xamarin/xamarin-forms/app-fundamentals/shell/

Answer 2

thank you for the effort. My problem is that I have not only two MenuItems but a third button that redirects to the homepage. Your screenshots are actually exactly what I need but currently does not come so. Here is Screenshot:

Here is my Code:

Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyApp"
             x:Class="MyApp.MyShell">

    
       <ShellItem Route="Startpage">
        <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"/>

</Shell>

Answer 3

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"/>

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