PROWAREtech
![](/img/wait2.gif)
![](/img/wait2.gif)
![](/img/wait2.gif)
![](/img/wait2.gif)
![](/img/wait2.gif)
![](/img/wait2.gif)
![](/img/wait2.gif)
![](/img/wait2.gif)
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!";
}
}
}