Side Menu View | Xamarin.Forms | Xamarin Community Toolkit
Hello everyone, today I’d like to tell you about one interesting component from the awesome NuGet package Xamarin.CommunityToolkit.
Sometimes your app design requires implementing the left side menu (what can be achieved by FlyoutPage for sure).
Occasionally it requires implementing the right side menu (what can be achieved by switching FlowDirection to RightToLeft, I believe).
But once in a while, you need to implement both at the same time on the same page. And in this case, SideMenuView hurries to rescue your time and nerves.
Let’s figure out how to use it!
First of all, let’s install Xamarin.CommunityToolkit NuGet package to all our projects. Keep in mind that Xamarin.CommunityToolkit requires Xamarin.Forms 5.0.
Then import Xamarin.CommunityToolkit in a XAML file where you are going to use SideMenuView.
<ContentPage
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
...Now we can add SideMenuView to the page. Basically, SideMenuView can be added as a child to any layout (e.g. you can put SideMenuView inside StackLayout or even make every item view in CollectionView be SideMenuView as well).
But in our sample, we will put SideMenuView into ContentPage as the root view. Also, we put three views inside the SideMenuView. These views represent the Main View, the Left Menu, the Righ Menu.
That’s it :) This code replicates the view you saw on the GIF at the beginning of this article.
Let’s explain how to use SideMenuView’s properties.
Attached properties:
xct:SideMenuView.Position | This property identifies where should the child view be placed (LeftMenu, RightMenu, MainView). MainView is the default value, that’s why we needn’t have to specify this property for our main view.
xct:ideMenuView.MenuWidthPercentage | This property specifies how much space should the left/right menu take (percentage of the screen width. From 0 to 1). The default value is -1.0. It means that the size will be calculated automatically (e.g. retrieved from WidthRequest), but I recommend setting this property.
xct:SideMenuView.MenuGestureEnabled | This property manages whether the menu can be opened by swipes or not (True (default) or False).
If you want to open/close the left/right menu programmatically, then you should use the State property of the SideMenuView (of course, you can use bindings as well).
SideMenuView.State = SideMenuState.LeftMenuShown;SideMenuView.State = SideMenuState.RightMenuShown;SideMenuView.State = SideMenuState.MainViewShown;
I hope you will find how to apply this view in your awesome Xamarin.Forms applications!
The sample’s code you can find here: https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/SideMenuViewPage.xaml
If you have any questions, or want to request a feature, or wish to report a bug, please feel free to open tickets on XamarinCommunityToolkit GitHub page. We will be glad to help you! :)
