This launches 52 Weeks of Xamarin, an opinionated series in which I will post (at least) one instructional blog post on Xamarin a week. In this series I’ll be talking about Xamarin.Forms as well as “Xamarin-native” iOS and Android. We will follow the caterpillar’s advice and start at the beginning, carry on to the end, and then stop (paraphrased). Beginner material will quickly yield to more advanced problems and techniques.
An introduction to Xamarin.Forms.
When a technology takes off in popularity as Xamarin.Forms has, more and more articles are about advanced features, and the beginner has a hard time getting started. Let’s rectify that. What I’m about to show you is not for the feint of heart; I won’t be teaching this nice and easy, I’ll be teaching it nice and hard (with apologies to Ike and Tina Turner). That is, I’ll be moving along quickly, and referring you to the documentation or my own courses and books where things might otherwise bog down.
Prerequisites: We can’t start at scratch, so I assume you know some C# and some XAML. If you don’t know the former, start there, preferably with my Pluralsight C# From Scratch, but any course or book will do. If you don’t know XAML, again you can start with my course or any other course on XAML for Xamarin (be careful, though, as the XAML used in Xamarin can be slightly different from the XAML used elsewhere.
To get started with Xamarin.Forms open either Visual Studio with the Xamarin plug-in or Xamarin Studio, either on Windows or on the Mac. I’ll be using Xamarin on the Mac. You can find out about obtaining Xamarin and Xamarin Studio here, which will also be your source for all sorts of useful information.
Xamarin.Forms is the quickest and by far the easiest way to get a program up and running on iOS and Android and Windows Phone (and arguably, Windows and OS X) there is. Again, we’ll be focusing on iOS and Android, to keep things reasonably simple and because the half dozen of you who are using Windows Phone can generally adapt everything about Xamarin.Forms to your misbegotten platform, while it lasts.[1]
Your first Xamarin.Forms Program
Create a new solution, using the App->Blank Xamarin.Forms App templates. Call it 52Navigation. Take the defaults as you go through the set up wizard, making sure to use PCL and not “shared library.” When you are done you should have 4 projects: 52Navigation, 52Navigation.Droid, 52Navigation.iOS and 52Navigation.UITests.
Later in this series, we’ll look at creating UITests, and for that matter, Test Driven Development. But not yet. The programs we’re going to start out with are too trivial to need it and tests at this point would only be a distraction.
To get started, open 52Navigation.cs. This is a Xamarin convention; the entry point of your application will be in a file named <solutionname>.cs. You’ll find that in the App method there is some code designed to avoid having a blank page when you fire up your first use of the editor. We want to get rid of it. Cut code until your App() method looks like this:
public App() {
MainPage =
}
After MainPage = we’re going to add code to point to our first page. You have lots of options, but the one you’ll use 90% of the time is this:
MainPage = new NavigationPage(new MainPage());
This says, essentially, “create a new instance of MainPage and place it within the Navigation framework (which makes it easy to navigate between pages)”.
Here’s what we’re going to build:
The first page gathers a single task from the user, the second page displays it. Easy peasy.
How Things Work Around Here
The way this series will work is that I’ll show you the code that goes with what we are trying to do, and I’ll explain some but not all of it. Your job, if you choose to accept it, is to figure out what I haven’t explained. There are a number of ways to do so:
- On inspection
- Try alternatives, play with the code
- Look up at Xamarin.com or Google it
The more you work out how it works, the more you’ll internalize it. I hate to take courses where they say “do this, now this, then this” and at the end it works but I have no idea how or why.
<?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="Navigation.MainPage">
<ContentPage.Content>
<StackLayout
Padding="25">
<Label
Text="Tasks"
FontSize="18"
TextColor="Blue" />
<Entry
x:Name="TaskEntry"
Placeholder="Enter a new task" />
<Button
Text="Save"
BackgroundColor="Green"
TextColor="Yellow"
Clicked="OnSaveClick" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Note that all the code is between the ContentPage.Content elements. This element can hold only one view (view?, we’ll come back to that in a minute). We solve that problem by using a layout (layout?) The layout we use is StackLayout, which allows you to stack one view on top of another. In this case we have three views in the StackLayout: a label, an Entry and a Button.
Forms consist of Pages, Layouts and Views. Each XAML file represents a page. Each page can have one or more layout. Each layout can have one or more sub-layouts and one or more Views. Views are widgets/controls like Button and Label.
Layouts can have attributes. Ours has the attribute Padding=“25” Experiment with other values, or with leaving this out altogether.
The rest should be self explanatory except for the Placeholder in Entry. This creates the gray text in the entry that goes away when you start typing.
Notice that the button has a Clicked event pointing to the OnSaveClick event handler. You need to implement that handler for this to compile. You do so (for now) in the code-behind file. In that page, add this method:
public void OnSaveClick(object o, EventArgs e) {
Navigation.PushAsync(new TaskReview(TaskEntry.Text));
}[2]
The effect of this is to navigate to the page TaskReview (which we have not yet created) passing in the Text from the Entry field TaskEntry (see above for the Entry).
Let’s look at the XAML for the TaskReview page,
<?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="Navigation.TaskReview">
<ContentPage.Content>
<StackLayout Padding="30">
<Label x:Name="Message" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
No explanation necessary here, but we do want to know how the value from MainPage gets put into the Label on this page. We saw that we passed the value into the constructor as a parameter. Here’s the constructor receiving the parameter and assigning it to the Text field of the Label.
public TaskReview(string message) {
InitializeComponent();
Message.Text = message;
}
Hey! Presto! your first Xamarin.Forms application, and it is non-trivial since it covers StackLayout, a few views, navigation, XAML and code-behind.
====
[1] I won’t be using smiley faces to take the sting out of sarcasm or to reassure you that I”m kidding. If my words won’t suffice than no emoji can do the job.
[2] You’ll notice that 99% of my code is uncommented. Comments rust, code doesn’t. If you have to explain what or why your are doing something than you have the wrong name for a member, property or method.
6 Responses to 52 Weeks of Xamarin: Week 1