Xamarin.Forms - TabbedPage View App Using Visual Studio 2017

What are Xamarin and Xamarin Forms?

  • Xamarin is a Cross-Platform to develop Multi-Platform applications
  • Xamarin is a Shared code(C#) but Separately Designs UIs Android(java), Windows(C#), IOS (Objective – C & XCODE).
  • Xamarin forms UIs & Shared code(C#) are the same. To Develop multi-platforms applications, Run the all projects (Android, Windows, IOS) at the Same Time.

Prerequisites

  • Visual Studio 2017 Enterprise.
  • The steps are given below are required to be followed in order to Design TabbedPage View Application Using Xamarin Forms.

Step 1

  • Go to the Visual Studio
  • Click File -> New -> Project

    Xamarin

Step 2

  • In this step as, Create Project
  • Click C# -> Cross Platform(Android, IOS, Windows) -> Cross Platform App(Native orXamarin forms).
  • Enter the Application Name, followed by clicking OK

    Xamarin

Step 3

  • Afterwareds go to New Cross Platform app Click Blank App ->
  • UIs Technology as Click Xamarin forums ->
  • Code sharing statergy is Click PCL(Portable Class Library) ->
  • Click OK

    Xamarin

Step 4

  • In UWP Project Select Target version & Minimum Version, followed by Clicking OK

    Xamarin

Step 5.1

  • In this step,
  • Go to Solution Explorer -> Portable Class Library, followed by Right Clicking Portable Class Library->Add -> Select New Item

    Xamarin

 Select Visual C# -> Click Cross Platform -> Followed by Clicking Forms Tabbed Page Xaml and Enter the Page Name then Click Add

Xamarin

Aterwards Go to New Added Page of myTabbedPage and insert the code Given Below and save it

Xamarin

Xamarin

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="TPage.MyTappedPage"  
  5.              xmlns:pages="clr-namespace:TPage;assembly=TPage"  
  6.              Title="TabbedPage">  
  7.     
  8.     
  9.   <ContentPage Title="Green">  
  10.     <StackLayout>  
  11.       <Label Text="Green"   
  12.  HorizontalTextAlignment="Center"  
  13.  HorizontalOptions="FillAndExpand"  
  14.  Margin="5" />  
  15.       <BoxView Color="Green"   
  16. VerticalOptions="FillAndExpand" />  
  17.     </StackLayout>  
  18.   </ContentPage>  
  19.   <ContentPage Title="Blue">  
  20.     <StackLayout>  
  21.       <Label Text="Blue"  
  22.  HorizontalTextAlignment="Center"   
  23. HorizontalOptions="FillAndExpand"   
  24. Margin="5"  />  
  25.       <BoxView Color="Blue"  
  26.  VerticalOptions="FillAndExpand" />  
  27.     </StackLayout>  
  28.   </ContentPage>  
  29.     <ContentPage Title="Orange">  
  30.         <StackLayout>  
  31.             <Label Text="Orange"  
  32.  HorizontalTextAlignment="Center"   
  33. HorizontalOptions="FillAndExpand"  
  34.  Margin="5"  />  
  35.             <BoxView Color="Orange"  
  36.  VerticalOptions="FillAndExpand" />  
  37.         </StackLayout>  
  38.     </ContentPage>  
  39.     <ContentPage Title="Maroon">  
  40.         <StackLayout>  
  41.             <Label Text="Maroon"   
  42. HorizontalTextAlignment="Center"   
  43. HorizontalOptions="FillAndExpand"   
  44. Margin="5"  />  
  45.             <BoxView Color="Maroon"  
  46.  VerticalOptions="FillAndExpand" />  
  47.         </StackLayout>  
  48.     </ContentPage>  
  49.     <ContentPage Title="Navy">  
  50.         <StackLayout>  
  51.             <Label Text="Navy"  
  52.  HorizontalTextAlignment="Center"   
  53. HorizontalOptions="FillAndExpand"   
  54. Margin="5"  />  
  55.             <BoxView Color="Navy"   
  56. VerticalOptions="FillAndExpand" />  
  57.         </StackLayout>  
  58.     </ContentPage>  
  59.     <ContentPage Title="Lime">  
  60.         <StackLayout>  
  61.             <Label Text="Lime"  
  62.  HorizontalTextAlignment="Center"  
  63.  HorizontalOptions="FillAndExpand"  
  64.  Margin="5"  />  
  65.             <BoxView Color="Lime"   
  66. VerticalOptions="FillAndExpand" />  
  67.         </StackLayout>  
  68.     </ContentPage>  
  69. </TabbedPage>  

 

Step 5.2

  • In this step,
  • Go to Solution Explorer -> Portable Class Library, followed by Clicking Xaml-> Then Open App.xaml.cs Page and edit to change MainPage is tapped Page

    Xamarin
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5.   
    6. using Xamarin.Forms;  
    7.   
    8. namespace TPage  
    9. {  
    10.     public partial class App : Application  
    11.     {  
    12.         public App()  
    13.         {  
    14.             InitializeComponent();  
    15.   
    16.             MainPage = new TPage.MyTappedPage();  
    17.         }  
    18.   
    19.         protected override void OnStart()  
    20.         {  
    21.             // Handle when your app starts  
    22.         }  
    23.   
    24.         protected override void OnSleep()  
    25.         {  
    26.             // Handle when your app sleeps  
    27.         }  
    28.   
    29.         protected override void OnResume()  
    30.         {  
    31.             // Handle when your app resumes  
    32.         }  
    33.     }  
    34. }  

Step 6

  • Click Build menu and go to Configuration Manager
  • Configure your Android, Windows, IOS Depoly & Build Settings, followed by clicking Close

    Xamarin

Step 7

  • Go to the Solution Explorer -> Click UWP Application, ->Right Click and Add the Reference

    Xamarin

Click Cross Platform ->Extension->add the Extention given below

  • Windows Desktop Extensions for UWP 10.0.143953

    Xamarin

Step 8

  • In this step, select Build & Deploy option, followed by clicking start your Application
  • Now, go to Run option,choose debug from the list of Android or IOS or UWP simulators, which are available.You can choose any simulator and run it. (you can be choosing an IOS, first add your MAC device to Visual Studio).

    Xamarin

  • If you want to start up the multiple projects, Steps are given below
  • Right Click to the Solution Explorer -> then select set start up project

    Xamarin

In this step go to startup Project-> Select Multiple Startup Project -> then Select Startup Projects -> Click Apply then OK

It is a feature of Xamarin Forms that it gets the output at the same time

Xamarin

Step 9

Output

  • After a few seconds, the app will start running on your Android simulator and UWP app. You will see your application working successfully.
  • The Outputs are Given below, Click or Swap the TabbedPages
  • The Android Output Given Below,

    Xamarin

The UWP Table View Outputs is given below,

Xamarin

  • Your TabbedPages View Application Created Succesfully.

Conclusion

Thus, we have learned how to design TabbedPages View Application in Xamarin Forms using Visual Studio 2017.