Xamarin: Tutorial - Page 01

This tutorial assumes at least a little programming experience particularly after the first page.

To begin, install Microsoft Visual Studio for Windows or Xamarin Studio for Mac. As of the writing of this, Xamarin Studio for Mac is the better, faster product.

Note that the terms widget and control are used in place of the user interface object. It is expected that these code samples will be compiled and run in order to test their behavior.

Create a new Cross-Platform => Blank Xaml App (Xamarin.Form Portable) project named "HelloXamarinForms" as pictured below. Frankly, there really is very little difference between "Blank Xaml App" and "Blank App" but this tutorial uses the XAML App.

Open the App.xaml.cs file in the text editor by double clicking it. The exact name may vary due to new releases in Xamarin Studio and Visual Studio.

Become familiar with this file. Notice the OnStart(), OnSleep() and OnResume() methods. Because this file changes rarely, it will not be listed everytime along with the other code files that do change. If it is not shown then assume that it is not different from this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class App : Application
	{
		public App()
		{
			InitializeComponent();

			// HelloXamarinForms.MainPage() was renamed to just MainPageXaml()
			MainPage = new MainPageXaml();
		}

		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
		}
	}
}

Open the main form C# (.cs) file in the text editor by double clicking it. Again, the exact name varies. In Visual Studio it is MainPage.xaml.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace HelloXamarinForms
{
	// MainPage was renamed to MainPageXaml
	public partial class MainPageXaml : ContentPage
	{
		// MainPage was renamed to MainPageXaml
		public MainPageXaml()
		{
			InitializeComponent();
		}
	}
}

Open the main form .xaml file in the text editor by double clicking it. In Visual Studio the file name is MainPage.xaml and in Xamarin Studio for Mac the file name is HelloXamarinFormsPage.xaml. Notice that this is a ContentPage. There are MasterDetailPage, NavigationPage, TabbedPage, and TemplatePage, too.

ContentPage is used to present content to the user like images and text.

The line xmlns="http://xamarin.com/schemas/2014/forms" is an XML namespace declaration and it means that it belongs to Xamarin. It is for elements with no prefix, like ContentPage.

The line xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" is another XML namespace declaration and the :x declares a prefix. It belongs to Microsoft. Any elements prefixed with an x: belong to this namespace. In example x:Class.

Label is a widget/control designed to display text to the user.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:local="clr-namespace:HelloXamarinForms"
			 x:Class="HelloXamarinForms.MainPageXaml">
			<!--	MainPage was changed to MainPageXaml -->

	<Label Text="Welcome to Xamarin Forms!"
			 VerticalOptions="Center"
			 HorizontalOptions="Center" />

</ContentPage>

Modify the ContentPage to have a Button instead of a Label in the middle of the screen. The Button is another widget/control and is designed to be tapped by the user invoking an action/event. The VerticalOptions="Center" and HorizontalOptions="Center" make it center on the screen.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:local="clr-namespace:HelloXamarinForms"
			 x:Class="HelloXamarinForms.MainPageXaml">
			<!--	MainPage was changed to MainPageXaml -->

	<Button Text="Click Here!"
			 VerticalOptions="Center"
			 HorizontalOptions="Center" />

</ContentPage>

Now, modify the Button to have a Clicked event.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:local="clr-namespace:HelloXamarinForms"
			 x:Class="HelloXamarinForms.MainPageXaml">
			<!--	MainPage was changed to MainPageXaml -->

	<Button Text="Click Here!"
			 VerticalOptions="Center"
			 HorizontalOptions="Center"
			 Clicked="Button_Clicked" />

</ContentPage>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace HelloXamarinForms
{
	// MainPage was renamed to MainPageXaml
	public partial class MainPageXaml : ContentPage
	{
		// MainPage was renamed to MainPageXaml
		public MainPageXaml()
		{
			InitializeComponent();
		}

		void Button_Clicked(object sender, System.EventArgs e)
		{
			// do something
		}
	}
}

Add some code that pops up a message to the user when they tap the button and then changed the button text.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class MainPageXaml : ContentPage
	{
		public MainPageXaml()
		{
			InitializeComponent();
		}

		void Button_Clicked(object sender, System.EventArgs e)
		{
			// pop up a message to the user
			DisplayAlert("Xamarin Forms", "Hello Xamarin Forms!", "OK");

			// change the text of the button
			((Button)sender).Text = "Clicked!";
		}
	}
}

Comment