Creating a New Project With Xamarin.Forms

Launch VS.

Go to File -> New -> Project.

Choose CrossPlatform -> Blank App Xamarin.Forms Portable (Portable Class Library),

Choose the Name and the Path.

Name

Now, choose the target version.

target version

This is our Start Project.

Project

As we can see in the Solution Explorer, we have one Solution (Boost1.sln) and 6 Projects:

  • Boost1 Portable
  • Boost1.Droid
  • Boost1.iOS
  • Boost1.UWP
  • Boost1.Windows (Windows 8.1)
  • Boost1.WinPhone (Windows Phone 8.1)

This is the initial configuration of our project.

Now, we have to set some parameters,

  • Go to Build -> Configuration Manager
  • Check items as shown in the following picture:

    items

 If we have a Mac, the iOS configuration will be checked only.

Now, we need to implement a simple solution if we want the Start Project to be configured to Boost1.Droid. To do so, right click on the project we want to make our default project, and choose Set as Start Project.

Press CTRL + F5 (Start without debug).

You can see the layouts for Android, Windows 10 and Windows 10 Mobile, here.

Layout  Layout  Layout

OK. Now, we have a simple application in Xamarin.Forms. But, what we need to do is to customize this page. Let’s do it.
  • Right click on Project portable.

  • Add element -> Cross Platform -> Forms XAML Page,

    XAML Page

  • Rename the page with MainPage.

  • Replace the autocreated code with the following one:
    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Boost1.MainPage">  
    3.     <Grid>  
    4.         <AbsoluteLayout BackgroundColor="Blue" />  
    5.         <Label Text="General MainPage" TextColor="White" FontFamily="Garamond" FontSize="68" VerticalTextAlignment="Start" HorizontalTextAlignment="Center" />  
    6.         <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Spacing="50">  
    7.             <Button x:Name="button_Nuova" Text="Nuova" WidthRequest="250" HeightRequest="80" BackgroundColor="Teal" />  
    8.             <Button x:Name="button_Vedi" Text="Vedi" WidthRequest="250" HeightRequest="80" BackgroundColor="Teal" /> </StackLayout>  
    9.     </Grid>  
    10. </ContentPage>  
  • In App.cs,  modify the code as
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5. using Xamarin.Forms;  
    6. namespace Boost1 {  
    7.     public class App: Application {  
    8.         public App() {  
    9.             // The root page of your application  
    10.             MainPage = new MainPage {};  
    11.         }  
    12.         protected override void OnStart() {  
    13.             // Handle when your app starts  
    14.         }  
    15.         protected override void OnSleep() {  
    16.             // Handle when your app sleeps  
    17.         }  
    18.         protected override void OnResume() {  
    19.             // Handle when your app resumes  
    20.         }  
    21.     }  
    22. }  
  • Press CTRL + 5 (Start without debug)
  • Check out the layouts for Android, Windows 10 and Windows 10 Mobile.

    Layout   Layout  Layout

Well, now we have a customized MainPage.