CODEWITHSUNDEEP
xamlxamarinxamarin.formsflyoutxamarin.forms.shell
Wade Boggs
Wade Boggs

Reputation: 23

Xamarin multiple flyouts in one page

I've been looking at Xamarin.Forms Shell. The flyout available in Shell by default allows a slide from the left side of the screen or a tap on the toolbar menu button to have the flyout appears on the left side of the screen.

I've also seen a variation of this, where the toolbar and flyout are flipped, so the toolbar button and flyout are on the right side of the screen.

My question is - I want to have multiple flyouts available on the screen. Shell works, but it APPEARS that I can only have one flyout if I use Shell (either the left or the right, but not both). Is there a way to use multiple flyouts with Shell?

Or, is there a better solution using something else?

Upvotes: 1

Views: 1615

Answers (1)

Cfun
Cfun

Reputation: 9721

You can use SideMenuViewPage from Xamarin.CommunityToolkit package, it is already available but not documented yet.

You may find the full sample of the code below in SideMenuViewPage.xaml

Sample

<xct:SideMenuView x:Name="SideMenuView">
        <!-- MainView -->
        <StackLayout BackgroundColor="Gold">
              <Label Text="This is the Main view" VerticalOptions="Center" HorizontalOptions="Center"/>
        </StackLayout>

        <!-- LeftMenu -->
        <StackLayout
            xct:SideMenuView.Position="LeftMenu"
            xct:SideMenuView.MenuWidthPercentage=".5"
            xct:SideMenuView.MainViewScaleFactor=".95"
            BackgroundColor="Orange">

              <Label Text="This is the left menu view"/>
        </StackLayout>

        <!-- RightMenu -->
        <StackLayout
            xct:SideMenuView.Position="RightMenu"
            xct:SideMenuView.MenuWidthPercentage=".3"
            xct:SideMenuView.MenuGestureEnabled="False"
            BackgroundColor="LightGreen">

              <Label Text="This is the Right menu view"/>
        </StackLayout>

</xct:SideMenuView>

Available properties

Property Description
MenuWidthPercentage Set the width percentage of your menu relative to it parent.
MainViewScaleFactor Set the scale percentage which MainView will be scaled to when a side menu (left or right) is opened.
Position Specifies position whether it is right or left or main, if not specified it will be considered as the MainView.
MenuGestureEnabled Enable/Disable side swipe gesture option to open/close menu/view.

Open/close side menu views (flyout)

From code

Left and right menus/views are opened either by swiping gesture or by setting the property State of the SideMenuView that you defined in your xaml:

SideMenuView.State = SideMenuState.MainViewShown;    //show main view and close both left and right menu view
SideMenuView.State = SideMenuState.RightMenuShown;   //Open right menu view
SideMenuView.State = SideMenuState.LeftMenuShown;    //Open left menu view

From xaml

By default left and right menus are closed (default value of State property is MainViewShown), if you want initially to have a menu opened, change it value in your xaml:

<xct:SideMenuView x:Name="SideMenuView" State="LeftMenuShown">

A mixed approach would be to bind State to a property and change it in your code according to your logic.

Note

For now it is supported for iOS and Android only (not supported for uwp).

Upvotes: 1

Related Questions