Introduction to WP7 Databound Application

This tutorial is part of the WP7 Databound Application series.

Read Part II, Creating the Pizza App User Interface (Opens in a new window)

In this tutorial, We will see what a Windows Phone 7 databound application is and how to create one. Specifically, we will create a simple pizza ordering application using a Windows Phone 7 databound project.

What is a databound application?

A databound application generates an application in a Model/View/ViewModel (MVVM) style, with sample data exposed in ViewModel classes. It creates a master view and details view which were bound to respective view models.

Why should I use a databound application?

When you create a databound application, it creates the pages with properly hooked up navigation and basic data usage, this includes both design time and run time data. Which means, you can see how the page looks without the need to run the simulator.

All you have to do is focus on your application logic.

Create a New Project

Open Visual Studio. Go to File -> New -> Project.
Under ‘Installed Templates’, go to ‘Silverlight for Windows Phone’ and select ‘Windows Phone Databound Application’.

Windows Phone 7 Databound Application Template

Windows Phone 7 Databound Application Template

Name the solution as ‘OrderPizza’ and Click ‘Ok’. This will create a windows phone databound application.

Notice in the ‘Solution Explorer’ that Visual Studio already created the Views, ViewModel and Sample data.

Solution Explorer

Solution Explorer

Now let’s hit ‘F5’, and see the application running.

Master List View and Details View

The application loads with the ‘MainPage’ showing the items from the view model. Clicking on any item will load ‘DetailsPage’ showing the item’s details.

Now let’s inspect the xaml pages, MainPage.xaml and DetailsPage.xaml, to see how the items were loaded.

MainPage.xaml

MainPage.xaml contains a ListBox with the ItemsSource set to ‘Items’ property and each list item having two TextBlock controls bound the properties LineOne and LineTwo.
MainPage List Code Snippet

DetailsPage.xaml

DetailsPage.xaml shows the selected item name and items details in two TextBlock controls bound to the properties LineOne and LineThree.
Item Detail Code Snippet

The View Model

Let’s see what the view model contains and how the data is loaded in the views.
The MainViewModel.cs contains a list of items of type ItemViewModel.

public MainViewModel()
{
     this.Items = new ObservableCollection();
}

ItemViewModel contains three string properties namely LineOne, LineTwo and LineThree.

The method LoadData is where the dummy data is created.

public void LoadData()
        {
            // Sample data; replace with real data
            this.Items.Add(new ItemViewModel() { LineOne = "runtime one", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime two", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime three", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime four", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime five", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime six", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime seven", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime eight", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime nine", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime ten", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime eleven", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime twelve", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime thirteen", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime fourteen", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime fifteen", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime sixteen", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum" });

            this.IsDataLoaded = true;
        }

The view model is created and loaded from App.xaml.cs as shown,

public static MainViewModel ViewModel
        {
            get
            {
                // Delay creation of the view model until necessary
                if (viewModel == null)
                    viewModel = new MainViewModel();

                return viewModel;
            }
        }
private void Application_Activated(object sender, ActivatedEventArgs e)
        {
            // Ensure that application state is restored appropriately
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
        }

Conclusion

Now that you have understood how a databound application works, in next post we’ll see how to convert this into a real world Pizza Ordering application.

Read Part II, Creating the Pizza App User Interface.

Happy Coding!

http://www.chaitanyavenneti.com/topics/wp7-pizza-app-ui/

2 thoughts on Introduction to WP7 Databound Application

  1. Hi I’m trying to extend this example but I’m failing somewhere.
    I would like to click on an item in the first list that gets me to another list and then finally to a details page.

    I can’t get the second page display another list. do you have any tips?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *