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.



Now, choose the target version.



This is our Start 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:
  
  
  

 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.

  

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,
  
  
  
  
• Rename the page with MainPage.
  
  
• Replace the autocreated code with the following one:
  

<?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="Boost1.MainPage">
    <Grid>
        <AbsoluteLayout BackgroundColor="Blue" />
        <Label Text="General MainPage" TextColor="White" FontFamily="Garamond" FontSize="68" VerticalTextAlignment="Start" HorizontalTextAlignment="Center" />
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Spacing="50">
            <Button x:Name="button_Nuova" Text="Nuova" WidthRequest="250" HeightRequest="80" BackgroundColor="Teal" />
            <Button x:Name="button_Vedi" Text="Vedi" WidthRequest="250" HeightRequest="80" BackgroundColor="Teal" /> </StackLayout>
    </Grid>
</ContentPage>

• In App.cs,  modify the code as
  

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using Xamarin.Forms;
  namespace Boost1 {
      public class App: Application {
          public App() {
              // The root page of your application
              MainPage = new MainPage {};
          }
          protected override void OnStart() {
              // Handle when your app starts
          }
          protected override void OnSleep() {
              // Handle when your app sleeps
          }
          protected override void OnResume() {
              // Handle when your app resumes
          }
      }
  }

• Press CTRL + 5 (Start without debug)
  
• Check out the layouts for Android, Windows 10 and Windows 10 Mobile.
  
    
  

Well, now we have a customized MainPage.