Shell in Xamarin Forms | How to Create Xamarin Forms App Using Shell?
Hi Xamarin Developer, Today I will discuss about Shell, In this article we will see about How to Create Xamarin Forms App Using Shell?, Shell in Xamarin Forms, Shell Flyout Header, Shell FlyoutItem, Tab.
Let’s Start..
What is Shell in Xamarin Forms?
Basically, Shell is container that reduces Complexity mobile app development and provides features that any mobile app requires.
Advantages :
- You can define your app view hierarchy in single place
- Supports URI based navigation
- Provides Common Navigation
- Provides the Integrated Search Handler
- Increases Rendering Speed
- Reduces Memory Consumption
How to Create Xamarin Forms App using Shell ?
Let’s Start,
Step 1: Create blank Xamarin Forms App in Visual Studio (I am using VS2019).
Here, I created Blank Xamarin Forms app, to start with shell you need to install Xamarin.Forms 4.X package from Nuget.
Note: you should install Xamarin.Forms 4.x version.
Step 2 : Add New Content Page (AppShell)
Here, I added a new page called AppShell.xaml
Step 3: Modify Xaml to take advantage of Shell.
Modifying AppShell.xaml
Before :
After :
Here i changed ContentPage class with Shell
Step 4: In Shell you can use Flyout and Tab
What is Flyout ?
Flyout means your app root menus which you can say (Master Page, Drawer Page) which will access by hamburger icon or swiping left.
In shell you can set below Flyout properties
- FlyoutIcon : you can set hamburger icon
- FlyoutBehavior: you can set flyout behavior
- Disabled : once you set FlyoutBehavior = Diasbled, Flyout will be disabled then user cannot access Flyout
- Flyout: once you set FlyoutBehavior = Flyout, user can open and closed
- Locked: once you set FlyoutBehavior = Locked, flyout can't be closed by the user, and that it doesn't overlap content.
Let’s set Flyout Properties:
<Shell
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FirstShellApp.AppShell"
FlyoutBehavior="Flyout"> <!--Here i changed FlyoutBehavior-->
</Shell>
Step 5: Let's define Flyout Header:
What is Flyout Header?
Flyout header means where you can set your header as logo or may be user details or image, like below:
Xaml Code:
You can set FlyoutHeaderBehavior like below:
1. FlyoutHeaderBehavior="CollapseOnScroll" : header will collapse on scroll
2. FlyoutHeaderBehavior="Default" : it will set platform default behavior
3. FlyoutHeaderBehavior="Scroll" : flyout header scrolls out of view as the user scrolls the items
4. FlyoutHeaderBehavior="Fixed" : header will not changed when user scroll
2. FlyoutHeaderBehavior="Default" : it will set platform default behavior
3. FlyoutHeaderBehavior="Scroll" : flyout header scrolls out of view as the user scrolls the items
4. FlyoutHeaderBehavior="Fixed" : header will not changed when user scroll
Step 6 : Let's define FlyoutItems:
here, i added a FlyoutItem which will appears in Flyout as Flyout menu, you can set icon and title using Icon and Title Property.
To define your view used ShellContent , Whenever user clicked on menu your defined view will appear.
You can set below Properties to FlyoutItem:
1. FlyoutDisplayOptions="AsSingleItem" : user will see single menu
2. FlyoutDisplayOptions="AsMultipleItems" : user will see group menu
1. FlyoutDisplayOptions="AsSingleItem" : user will see single menu
2. FlyoutDisplayOptions="AsMultipleItems" : user will see group menu
What is ShellContent?
1. ShellContent represents ContentPage object in your shell app
2. ShellContent object is child of Tab.
3. If you are defining more than one ShellContent in Tab then it navigating from top Tab
1. ShellContent represents ContentPage object in your shell app
2. ShellContent object is child of Tab.
3. If you are defining more than one ShellContent in Tab then it navigating from top Tab
Step 7 : Set MainPage in your App.cs class
Let's see result:
Android:
iOS(iPhone):
You can also read about shell from Xamarin official site:
Shell in Xamarin Forms | How to Create Xamarin Forms App Using Shell?
Reviewed by Dev Tech Solution
on
February 01, 2020
Rating:
Your Affiliate Money Making Machine is ready -
ReplyDeleteAnd making profit with it is as easy as 1---2---3!
Here is how it works...
STEP 1. Input into the system what affiliate products the system will advertise
STEP 2. Add some push button traffic (it LITERALLY takes JUST 2 minutes)
STEP 3. Watch the affiliate products system grow your list and up-sell your affiliate products all for you!
Do you want to start making money???
Click here to launch the system
Informative post. Thanks for sharing.
ReplyDeleteFreelance Xamarian App Developer
Nice blog! I really loved reading through this Blog... Thanks for sharing such a very interesting post with us and keep blogging. Visit our website-
ReplyDeleteXamarin App Developers
web and App Development company
ABP .io Development company