Introduction to Xamarin
Xamarin is an open-source platform and it is a cross-platform development technology where we can build native user interfaces for iOS, Android, and Windows Phone using a single codebase with C#. Xamarin is considered among the top hybrid mobile application platforms. In this blog, we will try to understand about different types of pages in Xamarin
Xamarin can be divided into two parts Xamarin native and Xamarin Forms. In Xamarin the app built on Xamarin native can run on a specific platform and the app built on Xamarin forms runs on all platforms (Android, iOS, Windows).
In Xamarin, there are six types of pages are available.
- Content Page.
- Master-Detail Page.
- Navigation Page.
- Tabbed Page.
- Template Page
- Carousel Page.
Content Page
The Content Page is the simplest page and most common type of page. Add content property to the view and we can use the layouts like Stack Layout, Grid, and can also add Scroll View.
Start visual studio and select the Xamarin app to create an app and select a blank project.
<?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=”ContentPageBlog.MainPage”>
<StackLayout>
<Frame BackgroundColor=”#2196F3″ Padding=”24″ CornerRadius=”0″>
<Label Text=”Welcome to Xamarin.Forms!” HorizontalTextAlignment=”Center” TextColor=”White” FontSize=”36″/>
</Frame>
<Label Text=”Start developing now” FontSize=”Title” Padding=”30,10,30,10″/>
<Label Text=”Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!” FontSize=”16″ Padding=”30,0,30,0″/>
<Label FontSize=”16″ Padding=”30,24,30,0″>
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text=”Learn more at “/>
<Span Text=”https://aka.ms/xamarin-quickstart” FontAttributes=”Bold”/>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage>
In the above example it’s a default created content page example you can customize this page with the requirement. With the help of a scroll view, stack layout, and grid you can change the layout of the content page.
Master-Detail Page
Master-Detail Page can create a menu to navigate the page like Home, Setting, Logout, etc. Master-Detail Page consists of Menu and Details that can show the currently selected pages in the Master-Detail Page.
There are two ways to create a Master-Detail Page, one is right-clicking the project and add a new item, and select the Master-Detail Page and the second way is dynamically creating Master-Detail Page. Adding Master-Detail Page in our project, right-click the project and add a new item, and select Master-Detail Page.
<?xml version=”1.0″ encoding=”utf-8″ ?>
<MasterDetailPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”ContentPageBlog.MasterDetailPage1″
xmlns:pages=”clr-namespace:ContentPageBlog”>
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name=”MasterPage” />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPage1Detail />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Fig: Master-Detail Page ExampleThis can be to create automatic menus and detail pages. You can customize it or you can create a dynamically Master-Detail Page.
Steps to create a dynamic Master-Detail Page.
Step – 1:
Add the below code to MainPage.xaml.
<MasterDetailPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”MasterExample.MainPage”
Title=”Master”>
<MasterDetailPage.Master >
<ContentPage Padding=”10″ BackgroundColor=”Gray” Title=”Master” Icon=”hamburger.png”>
<ContentPage.Content>
<StackLayout Padding=”10″ VerticalOptions=”StartAndExpand”>
<Label Text=”Master Page” FontSize=”Large” TextColor=”Yellow”>
</Label>
<Button Text=”Add Student” BackgroundColor=”Aqua” x:Name=”AddStudent” Clicked=”AddButton_Clicked”></Button>
<Button Text=”Contact Us” BackgroundColor=”Aqua” x:Name=”ContactPage” Clicked=”ContactButton_Clicked”></Button>
<Button Text=”Setting” BackgroundColor=”Aqua” x:Name=”SettingPage” Clicked=”SettingButton_Clicked”></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding=”10″>
<ContentPage.Content>
<StackLayout Margin=”5,30,5,5″>
<Label Text=”Detail Page”>
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Now, open MainPage.Xaml.CS and navigate page on button click event.
namespace MasterExample
{
public partial class MainPage : MasterDetailPage
{
public MainPage()
{
InitializeComponent();
Detail = new NavigationPage(new HomePage());
IsPresented = false;
}
private void AddButton_Clicked(object sender, EventArgs e)
{
Detail = new NavigationPage(new AddStudent());
IsPresented = false;
}
private void ContactButton_Clicked(object sender, EventArgs e)
{
Detail = new NavigationPage(new ContactUsPage());
IsPresented = false;
}
private void SettingButton_Clicked(object sender, EventArgs e)
{
Detail = new NavigationPage(new SettingPage());
IsPresented = false;
}
}
}
Add those pages we can use to navigate on button click event. Add page AddStudent.Xaml.
<ContentPage.Content>
<StackLayout Orientation=”Vertical” Padding=”40″>
<Label Text=”Add new Student”></Label>
<Label Text=”Enter Name : “></Label>
<Entry x:Name=”studentname” Placeholder=”Enter Name”></Entry>
<Label Text=”Enter Address : “></Label>
<Entry x:Name=”studentaddress” Placeholder=”Enter Address”></Entry>
<Label Text=”Enter Standard : “></Label>
<Entry x:Name=”studentstandard” Placeholder=”Enter Standard”></Entry>
<Button Text=”Submit” Clicked=”SubmitButton_Clicked”></Button>
</StackLayout>
</ContentPage.Content>
Add ContactPage.Xaml.
<ContentPage.Content>
<StackLayout>
<Label Text=”Contact Us”
FontSize=”Large”
VerticalOptions=”CenterAndExpand”
HorizontalOptions=”CenterAndExpand” />
</StackLayout>
</ContentPage.Content>
Add HomePage.Xaml.
<ContentPage.Content>
<StackLayout>
<Label Text=”Welcome to Home Page”
FontSize=”Large”
VerticalOptions=”CenterAndExpand”
HorizontalOptions=”CenterAndExpand” />
</StackLayout>
</ContentPage.Content>
Add SettingPage.Xaml.
<ContentPage.Content>
<StackLayout>
<Label Text=”Setting Page”
FontSize=”Large”
VerticalOptions=”CenterAndExpand”
HorizontalOptions=”CenterAndExpand” />
</StackLayout>
</ContentPage.Content>
Navigation Page
Navigation page contains multiple pages this page is used to navigate from one page to another page. The navigation page consists of two types of property Push and Pop. Push is used to go to the next page and Pop is used to go to the previous page.
Navigate from one page to another using button then use:
Navigation.PushModelAsync(New ContactPage());
Or go to the current page to the previous page then use:
Navigation.PopModelAsync();
By default, MainPage.Xaml is the default run page we can change the priority of the page to run the current page as the default page using Navigation Page. Just change the code in App.Xaml.cs
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new HomePage());
}
Now, we can see how to move MainPage.Xaml to another page.
<?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=”MasterExample.MainPage”
Title=”Master” BackgroundColor=”Beige”>
<StackLayout HorizontalOptions=”CenterAndExpand” VerticalOptions=”CenterAndExpand”>
<Button Text=”NextPage” TextColor=”Yellow” BackgroundColor=”Gray” Clicked=”NavigateButton”/>
</StackLayout>
</ContentPage>
On this page, we can add one button to move to the next page on the button click event.
private async void NavigateButton(object sender, EventArgs e)
{
await Navigation.PushModalAsync(new HomePage());
}
Add this code in MainPage.Xaml.CS when we click the button it will be moved to the HomePage.Xaml.
Tabbed Page:
In Tabbed Page there are multiple pages or tabs. This page can allow navigation between pages or tabs.
Now, let’s create an example of a tabbed page.
First, create a project and change ContentPage to TabbedPage in MainPage.Xaml then adds the below code.
<?xml version=”1.0″ encoding=”utf-8″ ?>
<TabbedPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”MasterExample.MainPage”
Title=”TabbedPage”>
<ContentPage BackgroundColor=”Aqua” Title=”Home”>
<Label HorizontalOptions=”Center” VerticalOptions=”Center” Text=”Home” FontSize=”Large”/>
</ContentPage>
<ContentPage BackgroundColor=”Aqua” Title=”Contact Us”>
<Label HorizontalOptions=”Center” VerticalOptions=”Center” Text=”Contact Us” FontSize=”Large”/>
</ContentPage>
<ContentPage BackgroundColor=”Aqua” Title=”About Us”>
<Label HorizontalOptions=”Center” VerticalOptions=”Center” Text=”About Us” FontSize=”Large”/>
</ContentPage>
<ContentPage BackgroundColor=”Aqua” Title=”Help”>
<Label HorizontalOptions=”Center” VerticalOptions=”Center” Text=”Help” FontSize=”Large”/>
</ContentPage>
</TabbedPage>
Template Page:
Using this template page, you can change the font color, size, text, and many others for the whole application.
Add the below code in App.Xaml file and then you can use it over-all application.
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key=”TemplatePage”>
<Grid>
<BoxView/>
<Label Text=”Template Page Example”
TextColor=”White”
FontSize=”Large”
HorizontalOptions=”Center”
VerticalOptions=”Center”/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key=”Temp”>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
Carousel Page:
Carousal Page is used to swiping the pages from left to right or right to left this can also use for navigation between pages using swipe.
<CarouselPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”MasterExample.MainPage”
Title=”Carousel”>
<ContentPage>
<StackLayout BackgroundColor=”Aqua” VerticalOptions=”Center” HorizontalOptions=”Center” >
<Frame VerticalOptions=”CenterAndExpand” HorizontalOptions=”Center”>
<Label Text=”Page 1″ TextColor=”Red” FontSize=”Large” VerticalOptions=”Center”/>
</Frame>
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Frame VerticalOptions=”CenterAndExpand” HorizontalOptions=”Center”>
<Label Text=”Page 2″ TextColor=”Red” FontSize=”Large” VerticalOptions=”Center”/>
</Frame>
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Frame VerticalOptions=”CenterAndExpand” HorizontalOptions=”Center”>
<Label Text=”Page 3″ TextColor=”Red” FontSize=”Large” VerticalOptions=”Center”/>
</Frame>
</StackLayout>
</ContentPage>
</CarouselPage>
Conclusion:
In this blog, we have learned about different Xamarin pages, know about how to navigate between each other, how to swipe the pages, how to modify the page on click of the page (tabbed page) and more. In fact, these would be very helpful while creating a mobile app to enhance productivity.
Author Bio:
Ajay Patel – Technical Director, iFour Technolab Pvt. Ltd.
A Seasoned technocrat with years of experience building technical solutions for various industries using Microsoft technologies. Wish sharp understanding and technical acumen, have delivered hundreds of Web, Cloud, Desktop and Mobile solutions and is heading the technical department at Mobile Application Development Company – iFour Technolab Pvt. Ltd.