Xamarin Shell and Material Components

iFour Team -July 05, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

In Xamarin Material visual is a system created, that describe the color, size, spacing, text, and other aspects of how view and layout look and behave. The Xamarin Material are used to apply the Material Design rule in Xamarin.Forms application.

In Xamarin Forms, the design system is responsible for control visualization in each platform. In Xamarin forms code is run on multiple platforms and each has its filesystem. In Xamarin, Material Design was introduced in Xamarin.Forms 3.6. Customize Material Visual is used to customize default controls.

On Android:

It should require a minimum version of 5.0 (API 21) or greater
TargetFramework of version 9.0(API 28)

You can use Visual Material in your project by adding the package Xamarin.Forms.Visual.Material.

Material Visual can support the following controls:

Button
CheckBox
Entry
Frame
Picker
TimePicker
DatePicker
Slider
Stepper
ProgressBar
Editor
ActivityIndicator

Let’s see how to set Visual.

You can set the Visual property on the element or its parent or the page itself, you can set Visual as Material for the root element and override it as default for a specific element if needed.

Xamarin Shell

In Xamarin, Shell is use to create an attract mobile app with C#. In newly Xamarin Shell using fundamental app architecture features can reduce the complexity of building a mobile app.

In this blog, using Xamarin.forms shell we can see different types of navigation schemes and we also see how to navigate to sub-pages.

FlyoutItem has some following methods.

TabIndexDefaultValueCreator = This method is use to set the default value of the TabIndex property and its return an int.
TabStopDefaultValueCreator = This method is use to set the default value of the TabStop property and its return a bool.
OnTabIndexPropertyChanged = This method can occur when the TabIndex property can change.? OnTabStopPropertyChanged = Method occur when the IsTabStop property can change.

Now, let’s see a simple Xamarin Shell Example.

Flyout Menu

Flyout menus are used when you want to side-drawer in your app. To create a side-drawer navigation you need to use FlyoutItem and ShellContent.

Here we can create a View folder and inside the View, create three Content Page (Homepage, about page, contact page). You can create a design for those three Content Pages that you want to design.

Output

Fig: Flyout Menu Example

Fig: Shell Navigated Home Page

Bottom tabs

There are many applications which require bottom tabs for navigation one page to another page. TabBar is used to create bottom tabs. Using FlyoutBehavior= “None” you can explicitly set the behavior of flyout hidden or show.

Output

Fig: Bottom tab Example

Lifting to Top Tabs

Lifting to Top tabs is used when you have to content within a tab and you can display that content in top tabs.

Output

Fig: Bottom tab Example

Fig: Top bar with bottom tab

Above we can see navigation in Flyout, bottom tab, and top bar. Now we can create one application using Flyout, bottom tab, and top bar.

Searching for Reliable Best Xamarin App Development Company ? Your Search ends here.

Connect us now

Step: 1

First, create a one content page AppShell is our content page name. After adding the page change the content page to Shell and add Flyout, Tab bar ShellContent like below.

Add the content page that you want to show in navigation and add related images in Android -> Resources -> drawable.

Step: 2

Open code-behind and change the content page to Shell.

namespace MaterialAndShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

Step: 3

Now, open App.Xaml.cs file to specify the page.

namespace MaterialAndShell
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
     }
}

Now, run your project you will see output something like the below.

Output

Fig: Flyout navigation

Fig: Flyout with Tab bar and Bottom tabs

Conclusion

In this blog, we have seen what is ion-model in the Ionic framework and how to use ion-model in your project. As we see above We can use ion-model as a select component when there are many options to choose from or to filter items in a list.