Xamarin.Forms Tiled UI - Part 2

In my previous post I wrote about the SmartThings SmartApp I will be connecting my app to. In this post I will start with creating the app solution and then creating the page to host the UI.

Using Visual Studio 2013 I created a Xamarin.Forms solution by creating a new project and selecting the Blank App (Xamarin.Forms Portable) project template. I named the solution SmartTiles.

The template creates an iOS, Android and Windows Phone 8.0 project. It's always worth compiling the solution and even running it as soon as it's been created, to ensure that it has been set up correctly with all it's dependencies.

I'll be using the MVVM pattern so I created a Views and ViewModels folder in the root of the SmartTiles (Portable) PCL project

The app will initially consist of a single page for showing the tiles so I added a new item to Views folder and selected the Forms Xaml Page template naming the page MainPage. I then added the view-model by adding a Class called MainViewModel to the ViewModels folder.

The XAML created by the template for MainPage looks like this:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SmartTiles.Views.MainPage">
    <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

As you can see it contain a Label which binds it's Text property to a property called MainText. So to prove everything is working I'll add a property called MainText to MainViewModel:

public class MainViewModel
{
    public string MainText { get; private set; }

    public MainViewModel()
    {
        MainText = "Hello SmartTiles!";
    }
}

To bind my view-model to my view I need to set the BindingContext of the view which I will do in the view`s constructor:

public MainPage()
{
    InitializeComponent();
    this.BindingContext = new MainViewModel();
}

Now I just need to change the App class to load and show MainView by commenting out the code added by the template and setting the MainPage property to a new instance of the MainPage view:

public App()
{
    // The root page of your application
    MainPage = new MainPage();
    //MainPage = new ContentPage
    //{
    //    Content = new StackLayout
    //    {
    //        VerticalOptions = LayoutOptions.Center,
    //        Children = {
    //            new Label {
    //                XAlign = TextAlignment.Center,
    //                Text = "Welcome to Xamarin Forms!"
    //            }
    //        }
    //    }
    //};
}

The app is now ready to be run! Here it is running on the Windows Phone emulator:

Conclusion

Displaying a single Label in the middle of a page doesn't seem like a very big achievement! But we do now have three apps for iOS, Android and Windows Phone all running the same code and using the MVVM pattern.

In the next post we will actually start looking at the SmartTiles layout - promise!