Windows 8.1 Design time Data Binding adventures

As I continue to learn XAML and Windows 8.1 phone development, I find some things great, while other things that should be fairly simple, difficult to get going outside of Microsoft’s canned examples. An example of this was learning to “design-time” data bind. For those of you not from the WPF world and are learning along the way to create a great app, “design-time” allows you to see a pretty good idea of what your application screen is going to look like with real data in real time without compiling your backend code and running the application. This can be very helpful especially when the project is getting larger and longer to build or you have a dedicated designer and he wants to make sure his minor changes look how they want it to look.

Data Binding in general

Problem is, there are very few good articles on doing this properly and many of them either fall short on explanation or completing the tutorial with a working project. I’m not a big fan of either. It’s part of why I don’t blog as much as I’d like to. I feel if I do not have enough time to provide a detailed explanation of either my tutorial or development style, I really shouldn’t be writing it until I do.

What Storage Type to Use for Design Time Data?

This was a big decision initially for me, but in the end, it really doesn’t matter that much as long as everything is being abstracted, which is the point of data binding in the first place. You can use JSON, text files, databases, web service etc…

The one thing I can see being useful, is if you will be using that same format to retrieve your data. For example, if your application gets information from a RESTFul service, chances are it has a JSON API. In that case, you may want to have your sample data come from a local JSON file resource within the project because then you can use the code you used to retrieve the data in the sample data classes to retrieve the real data from the RESTFul service. All you would have to do is change the location the code would retrieve the data from. In our case, we will be using a XAML file because it is honestly the simplest to get going and I found JSON to have a little more to it while I was trying to understand the data binding concepts. Since this is for people just learning, I’ll stick with KISS method.

How did I end up ultimately figuring it out

Interestingly, Visual Studio has a sister application for designers called Expression Blend.  This application although best fit for designers, also provides developers a way to make simple changes to the UI and the changes will show up in Visual Studio immediately. I won’t go into the specifics in this blog post, but using Expression Blend, you can create sample data (dummy data) and bind it to the XAML. In this tutorial, I will be skipping this and just data binding from a developers perspective to save time.

Create the Application and Models

First open Visual Studio and Click File->New Project –> Windows Phone Apps –> Blank App. Call the application FirstDesignDataBind.

You will notice that like any other Template for Windows Phone 8.1, there is a MainPage.xaml. This page is where we will be binding the sample data. Just as a side note, sample data is often referred to as Mock or Fake data in software development.

The models we will be using are Student.cs and Classroom.cs. The Classroom class will contain the list of Students that will attend the classroom. The class will look something like this:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace FirstDesignDataBind { public class Student { public string FullName { get; set; } public int Age { get; set; } } }

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace FirstDesignDataBind { public class Classroom { public List<Student> StudentsAttending { get; set; } } }

 

They are pretty basic classes and in design mode there is no need for any property observables for UI updates, so to keep things simple, I did not add them. The next step is to add the xaml file that the design data will come from. To do this, you can right click on the project and Select Add -> New Item –> XAML -> Resource Dictionary. Call the file ClassroomSampleData.xaml This will create a basic XAML file without any backing code behind so that the data file is very light weight.

Resource snippet

Paste the following into the XAML file

<FirstDesignDataBind:Classroom xmlns:FirstDesignDataBind=”using:FirstDesignDataBind”> <FirstDesignDataBind:Classroom.StudentsAttending> <FirstDesignDataBind:Student Age=”59″ FullName=”Cras duis”/> </FirstDesignDataBind:Classroom.StudentsAttending> </FirstDesignDataBind:Classroom>

The data is a normal XAML type syntax that maps the data “Age:59, FullName:Cras duis” to the proper classes. The classes are Classroom and Student where StudentsAttending is the list of students. Everything in the data mapping must be full namespaced as you see above in things like FirstDesignDataBind:Classroom.  The last thing that needs to be done in this file is the

The last part that needs to be done for this data file is to change the Build Action in the file properties. The Build action must be changed to DesignData. See below for a screen shot:

BuildAction

The final update is to our MainPage.xaml. In this tutorial, because we are only discussing “design” data, we will not be concerned with the code behind.

<Page x:Class=”FirstDesignDataBind.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221; xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221; xmlns:local=”using:FirstDesignDataBind” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243; mc:Ignorable=”d” Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <Grid> <Pivot Title=”Classroom Application” Margin=”0,12,0,0″ CommonNavigationTransitionInfo.IsStaggerElement=”True” DataContext=”{Binding }” d:DataContext=”{d:DesignData Source= ClassroomSampleData.xaml}” x:Name=”BlueToothLayout”> <PivotItem> <ListView ItemsSource=”{Binding StudentsAttending }”> <ListView.ItemTemplate> <DataTemplate> <StackPanel Margin=”0,0,0,24″> <TextBox Text=”{Binding FullName}”></TextBox> <StackPanel Margin=”0,0,0,24″> <TextBox Text=”{Binding Age}”></TextBox> </StackPanel> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> </PivotItem> </Pivot> </Grid> </Page>

The above code creates a Pivot control and binds our data to a PivotItem template using a ListView control. What an ItemTemplate does, is alows you to define a template of controls and layouts that the parent control (ListView in this case) must implement. In this case, to keep things simple and obvious in the design view, we are using two StackPanels and two TextBoxes to layout and display the FullName and Age properties of the Student list. There are several important lines of code that should be pointed out.

First we will look at the Data binding for the Pivot control. This is the following:

DataContext=”{Binding }” d:DataContext=”{d:DesignData Source= ClassroomSampleData.xaml}”

The top line is to allow you to dynamically bind for the runtime data. This is not required, but recommended practice, so I added it. The next line, binds the Design DataContext to the XAML source we created that contains the data we bind to. Anything that has a d: prefix has to do with the design time data.

The next binding is to the ListView. This tells the ListView, from the Pivot bound source, what list (you could have multiple lists in your classroom class, maybe TeachersList). This code is as follows:

<ListView ItemsSource=”{Binding StudentsAttending }”>

What you may have noticed, is that the Design (and runtime for that matter) data is handled from top down. in other words, the most top/ parent control contains the data source itself which in turn binds to the top level class being used. Then the next binding handles the list within that object. The final binding will be to bind the properties in that list. In this case, this is the FullName and Age of the Student. This looks like this:

<TextBox Text=”{Binding FullName}”></TextBox> <TextBox Text=”{Binding Age}”></TextBox>

Phew.. This turned out to be quite the post. I hope this helps other developers learning MVVM designs learn and understand how design time development works.

Your end resulting design view should look something like this:

Completed Design Data

Happy Coding 🙂

Advertisements

About Gregg Coleman

I am Senior-level Software Engineer working primarily these days with .NET. I have a good working knowledge of ASP.NET MVC, Web Forms, WCF web services and Windows Services. I spend much of my time in the Web Services (SOAP and REST) world in my current job designing and implementing various SOA architectures. I have been in the software engineering industry for about 6 years now and will not now nor ever consider myself an "expert" in programming because there is always so much to learn. My favorite thing about designing software is there are always new emerging technologies and something to learn every day! My current job has me spending much of my job on the bleeding edge of technologies and changing gears all the time, so I'm never bored and always challenged. On my spare time I enjoy weight training, reading and venturing to new places near by. Of course programing and learning new technologies are another hobby of mine.
This entry was posted in .NET, .NET 4.5, C#, Classes, Coding standards, Computer Technology, Data Binding, Data Mapping, Design Binding, Generics, Programming, Programming Paradims, Views, Windows Phone, Windows Store Apps and tagged , , , , , , . Bookmark the permalink.

One Response to Windows 8.1 Design time Data Binding adventures

  1. Pingback: Dynamic Data Binding to a Pivot Header Table Windows phone 8.1 | Object Reference Hell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s