Basic Structure Of Mobile App Using Xamarin MVVM

In this blog series, I'll explain the basic structure of a Xamarin mobile app with an MVVM Pattern step-by-step.

Introduction

 

This is part 1 of the MVVM Mobile App series.

 

In this part, I'm going to explain the basic structure of a mobile app built in Xamarin using the MVVM pattern. In this part, I'll create a new project and will let you know about predefined libraries and classes of the Xamarin Android app.

 

MVVM stands for Model View ViewModel. I'm using Visual Studio 2019 in this project.

 

Ok, so here we go.

 

Step 1

 

Run Visual Studio and click 'Create a new project' then type in the search box 'Mobile App' and select and select 'Mobile App(Xamarin.forms)' from the list as shown below in the image, then click Next.

 

 

Step 2

 

Chose your app name, in my case it's MvvmApp. Leave all things showing and click 'Create'. It will take you to the template selection window.

 

Select Tabbed and it will create an MVVM blueprint and create some predefined classes. Next, uncheck iOS, we'll learn only Android app development in this series. Press Create, as shown in the below image.

 

 

 

Step 3

 

Now you can see your solution window, it contains the Model, View, and ViewModel folder. There is one Xaml file AppShell.xaml which contains the main page of the application with tabs. If you'll check your app.xaml.cs you can see that AppShell is registered as MainPage, as shown in the below image.

 

 

 

Step 4

 

We can register our home page in AppShell.xaml, to do so follow the below steps.

1. Add a HomePage.xaml by clicking right on views folder -> add -> new item
2. Select Visual C# Items from the left sidebar under the installed tab select Content Page and give it a name in my case its HomePage.xaml. Then click 'Add' as shown in the below image

 

Step 5

 

Now you can see HomePage.xaml is added in the views folder. Now Update HomePage.xaml with the below code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MvvmApp.Views.HomePage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Home Page of MVVM App!"
                   TextColor="Black" FontSize="20"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 6

 

This step is last but not least. Go to AppShell.xaml and update AppShell.xaml with the below code:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MvvmApp.Views"
       Title="MvvmApp"
       x:Class="MvvmApp.AppShell">

    <!--
        The overall app visual hierarchy is defined here, along with navigation.

        https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
    -->

    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Shell.Resources>

    <TabBar>
        <!--<ShellContent Title="About" Icon="tab_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
        <ShellContent Title="Browse" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />-->
    </TabBar>

    <ShellContent Route="HomePage"
                  ContentTemplate="{DataTemplate local:HomePage}">
    </ShellContent>
    <!--
        If you would like to navigate to this content you can do so by calling
        await Shell.Current.GoToAsync("//LoginPage");
    -->
    <ShellContent Route="LoginPage" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:LoginPage}" />


</Shell>

Now build your app for the first time and click run with an Android emulator.