WinRT app guide: Step 6: Adding a DataTemplate to the ListView

To read the other steps in the step by step guide for creating a Metr/ WInRT application go here

First! The most important thing! Let’s have some fun. Adding text and coming up with names is tedious and boring. Lets add a few more items to our test data, and add some more text in the comment section so we can see how it would look when we use the program for real. Time to add some ‘ipsum’, bacon style.
I’m going for the bacon one, but I’m sure there are others if you happen to be a vegan (did you know I used to be a vegan?). http://baconipsum.com to get your bacon.

Bacon Ipsum

I’m joking a bit, but it is important to have some decent placeholder data!- so don’t get lazy here and skip it. You might be in for a surprise (what happens if you test with short data and forget to allow text-wrapping? And should there be a title lenght limit or will we use wrapping?)

Using some better placehodler data for testing

[sourcecode language=“csharp”]
void SetListviewSource()
{
itemListView.ItemsSource = new StudyActivityRepository(CreateActivities()).GetAll();
}

    ObservableCollection CreateActivities()  
    {  
        return new ObservableCollection()  
        {  
            new StudyActivity { Title = "Yummy Framework", CategoryName = "Salami", Comment = "Prosciutto spare ribs t-bone ground round, tail ham hock tenderloin venison pork chop. Andouille chicken tongue tenderloin, sirloin chuck shankle tri-tip beef. Frankfurter drumstick prosciutto sirloin bresaola beef. Ball tip fatback venison tenderloin swine spare ribs." },  
            new StudyActivity { Title = "Must Eat", CategoryName = "Salami", Comment = "Tri-tip cow rump chuck turducken frankfurter short ribs meatloaf andouille pancetta filet mignon capicola. Brisket turducken ball tip hamburger shank beef ribs chuck strip steak swine ham flank spare ribs biltong pork loin t-bone. Prosciutto filet mignon chuck tail pancetta bacon " },  
            new StudyActivity { Title = "Bacon Breakfast", CategoryName = "Bacon", Comment = "Bresaola pig leberkas ribeye ham andouille meatball pork chop. Turducken ribeye strip steak, flank chuck shank short ribs frankfurter venison pork." }  
        };  
    }

[/sourcecode]

Time to display the beautiful data!
We have a ListView, and it will contain our items, the ListViewItem(s). So we set ItemsSource of our listview to the collection of activities. Now we need to display the information. To do that we add an ItemTemplate to the ListView.

How to add a datatemplate

The ItemTemplate gets or sets the template for how each item data should be displayed. So we set a DataTemplate. Remember , first ItemTemplate, then DataTemplate. Since we want to add several items we need a control that allows more than on child, so we use a StackPanel a little bit of Margin on the left side (10,0,0,0) helps so we get some space. Inside the StackPanel we add three things to keep it simple for now. The default orientation for the items in a StackPanel is Vertical which means that the controls it owns will be stacked. We add three Textblocks. Setting different FontSize sizes and Foreground colors. We’ll get back to this in a later post when we talk about resources and styles. Notice that we allow wrapping on Title and Comment.

[sourcecode language=“XML”]

<ListView.ItemTemplate>

</ListView.ItemTemplate>

[/sourcecode]

How our data is displayed

To get the data from the items displayed we need to BIND the data. This is called declarative binding and saves us from explicity setting the data of each item one by one. To display data you need three things:
1.Set the DataContext(where does the data come from?) - we did this in the last step
2.Set the ItemsSource(which collection are we using?)
3.Bindto the properties of the items (What from each item do you want me to display?)

If you now run the application the data should be diplayed nicely!

Ain’t it pretty?

Next time we will work more on our repository, I skipped it today since templating can be a mouthful, but next time I will show you how we can group our items nicely by using a CollectionViewSource!- and then we will need to add something more to our repository.

WinRT app guide: Step 6: Adding a DataTemplate to the ListView

Comments