Xamarin.Forms pages presentation

Xamarin.Forms provides 5 basic types of pages. Depending on type of page navigation between pages in application is a little different.

To be more familiar with Xamarin.Forms capabilities I prepared a small application where I used all of them.

Here is App class of this application:

    public partial class App : Application
    {
        public static List<NamedColor> Colors { get; set; } = new List<NamedColor>();

        public App()
        {
            InitializeComponent();

            Colors.Add(new NamedColor() {Name = "Red", Color = Color.Red });
            Colors.Add(new NamedColor() { Name = "Green", Color = Color.Green });
            Colors.Add(new NamedColor() { Name = "Yellow", Color = Color.Yellow });
            Colors.Add(new NamedColor() { Name = "Blue", Color = Color.Blue });
            Colors.Add(new NamedColor() { Name = "Pink", Color = Color.Pink });

            MainPage = new MainPage();
        }
    }

Every page in application is build according the collection of NamedColor objects.
MainPage of application is simple, only 5 buttons which navigate to different pages.

<?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="FormsPresenter.Pages.MainPage">
    <ContentPage.Content>
		<StackLayout Orientation="Vertical" Margin="0,16,0,0">
			<Button x:Name="contentPageBtn" Text="Content page" />
			<Button x:Name="mdPageBtn" Text="Master detail page" />
			<Button x:Name="navigationPageBtn" Text="Navigation page" />
			<Button x:Name="tabbedPageBtn" Text="Tabbed page" />
			<Button x:Name="carouselPageBtn" Text="Carousel page" />
		</StackLayout>
    </ContentPage.Content>
</ContentPage>

And MainPage.xaml.cs file:

namespace FormsPresenter.Pages
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            contentPageBtn.Clicked += ContentPageBtn_Clicked;
            mdPageBtn.Clicked += MdPageBtn_Clicked;
            navigationPageBtn.Clicked += NavigationPageBtn_Clicked;
            tabbedPageBtn.Clicked += TabbedPageBtn_Clicked;
            carouselPageBtn.Clicked += CarouselPageBtn_Clicked;
        }

        void ContentPageBtn_Clicked(object sender, EventArgs e)
        {
            Application.Current.MainPage = new SimpleContentPage();
        }

        void MdPageBtn_Clicked(object sender, EventArgs e)
        {
            Application.Current.MainPage = new SimpleMasterDetailPage();
        }

        void NavigationPageBtn_Clicked(object sender, EventArgs e)
        {
            Application.Current.MainPage = new NavigationPage(new SimpleNavigationPage());
        }

        void TabbedPageBtn_Clicked(object sender, EventArgs e)
        {
            Application.Current.MainPage = new SimpleTabbedPage();
        }

        void CarouselPageBtn_Clicked(object sender, EventArgs e)
        {
            Application.Current.MainPage = new SimpleCarouselPage();
        }
    }
}

Here is a short presentation of application on iOS:

And the same on Android:

As you can see there are some differences between platforms especially in TabbedPage but everything works fine.

If you want to try it, application is available here https://github.com/bradlak/Samples/tree/master/FormsPresenter. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *