52 Weeks of Xamarin: Week 2 – Starting the project

 This is the second week of 52 weeks of Xamarin.  To make this all more interesting and practical, we’ll start on building a quasi-real-world application; the iconic To Do List.  

The application shown in this and future columns is based on an application I explore in depth in my forthcoming Pluralsight course, Beginning Mobile Development with Xamarin

Step 1 is to open a new project.  Choose Cross-platform App/ Blank Xamarin.Forms App,  and name it 52ToDo.  As you work your way through the configuration wizard be sure that Use Portable Class Library is selected.  

I like to use the MVVM (Model-View-ViewModel) pattern wherever I can, and Xamarin.Forms is a great place to do so.  In short, MVVM breaks your code up into three groups:

Model – your applications data

View – the display / UI

ViewModel – your program’s logic, the glue between the Model and the View

To facilitate this, add three folders: Model, View and ViewModel.  We’ll come back to MVVM quite a bit in coming weeks.

Open 52ToDo.cs and fix the App() method so that it looks like this:

public App() {
    MainPage = new NavigationPage(new CreatePage());
}

The goal here is to add the Navigation support provided by Xamarin.Forms and to set the starter page as CreatePage, which we’ve not created yet.  Let’s do so…

Right click on the project, and choose Forms/ Forms ContentPage XAML. Name the new form CreatePage.  This creates two files, the CreatePage.xaml and CreatePage.xaml.cs pages.  In CreatePage.xaml we’ll be using a number of Views: Label and Entry, Button and Date and Time pickers. Their names are self-explanatory.  All the rest of the code is StackLayouts.   Here is the code, study it in some detail and see if you can anticipate what the page will look like:

 <ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="ToDo.CreatePage">
    <ContentPage.Content>
        <StackLayout
       Padding="20">
       <Label
         Text="New Task"
         TextColor="Blue"
         FontSize="18" />
       <Entry
         x:Name="ToDo"
         Placeholder="New To Do Item"
         WidthRequest="150" />
       <Entry
         x:Name="Priority"
         Placeholder="Priority"
         WidthRequest="150" />
       <StackLayout
         Orientation="Horizontal">
         <Label
           Text="Due Date"
           VerticalOptions="End"
           TextColor="Green" />
         <DatePicker x:Name="Date"/>
       </StackLayout>
       <StackLayout
         Orientation="Horizontal">
         <Label
           Text="Due Time"
           VerticalOptions="End"
           TextColor="Green" />
         <TimePicker x:Name="Time" />
       </StackLayout>
       <StackLayout
         Orientation="Horizontal" HorizontalOptions="Center">
         <Button
           BackgroundColor="Green"
           TextColor="White"
           WidthRequest="75"
           Text="Save" />
         <Button
           BackgroundColor="Red"
           WidthRequest="75"
           TextColor="White"
           Text="Cancel" />
         <Button
           BackgroundColor="Blue"
           WidthRequest="75"
           TextColor="White"
           Text="Review" />
       </StackLayout>
     </StackLayout>
    </ContentPage.Content>
 </ContentPage>

That’s a lot of code, but it is pretty straight forward.  Sketch out on a piece of paper what you think it will look like.  Take into account the various Stack Layout objects.  Now run the application.  Does it look as you expected?  Make sure you are comfortable with the appearance and how it relates to the XAML before going further.

Click on a date or a time.  Notice that we get the entire interaction with the date and time pickers for free.  We’ll see later in this set of blog posts that things are not quite so easy in Android, and even a bit more difficult in iOS.  But that is for another day.

Notice also that the buttons, Save, Cancel and Review don’t work.  That is because we’ve not yet added events and event handlers, which we will do next week.