How to create a custom scrolling list, which scrolls to newly added items.

So you want to show a scrollable list n screen but you don’t want to use a ListBox.  One reason for this might be because you want to take advantage of something lie width and Listbox dosn’t use up it’s full width.

Here’s the Shopping basket list from Shoppers calculated, done with a ListBox

LisBox

And here’s the same list done using the system below (no changes to the ItemTemplate). This illustrates one case where you might need to do this – for whatever reason, without specifying the pixel width of elements, the ListBox wouldn’t honor the way the grid was created, or put another way, ListBox items wouldn’t use the full space that they could, even if no size constraints are specified. However, in the example I’m giving you, the grid columns lined up with the headers I’d created for them.

scrollViewer

The simplest way is to use a ScrollViewer.  This allows any content places within it to be scrollable.  However, by itself this won’t scroll to the bottom to show newly added content each time you add something. It’s such a small, simple thing but was frustrating me when I was trying to figure this out for my app, so I thought this might be a good first development post.

So here’s the solution that will scroll properly to new items at the bottom, and allow you to customize the look of your list fully, using space properly, and not scroll back to the top or middle when you use your finger to scroll.

Firstly, the XAML:

<ScrollViewer x:Name="ScrollView">
    <ItemsControl ItemsSource="{Binding MyList}" SizeChanged="MyList_SizeChanged" ItemTemplate="{StaticResource MyTemplate}" />
</ScrollViewer>

We have the ScrollViewer which has been given a name to. Inside it is an items control, bound to a list which comes from a view-model.  There’s also a template, where we define how we want each item to look.  The last thing that’s there is an event handler for the SizeChanged event. Note that the even handler is on the ItemsControl and Not the ScrollViewer.

The event handler lives in the code-behind file.  Here it is:

private void MyList_SizeChanged(object sender, SizeChangedEventArgs e)        
{           
    ScrollView.ScrollToVerticalOffset(ScrollView.ExtentHeight);          
}

So the event handler has just one line, which moves the ScrollViewer bounds to show the bottom, where the new entry is likely to be. I’ll add a little more to this about how to make list item’s selectable for lists created in this manner sometime soon.

Advertisements

About bluechrism

I am a software developer with most professional experience in the Windows .Net realm and I'm currently a WPF developer with Starkey Labs. However, I have wanted for some time to start the mobile developer journey properly and being an N900 owner, this was to be in the realm of QT. Job hunting, moving to Minnesota and changing jobs put my plans on hold 6-12 months but things are starting to settle now, just as I'm getting sorted to start some things, Microsoft and Nokia merge. This blog is about my novice mobile development experiences and hopefully will end up complete with links to download some apps on various platforms, but obviously by the name, Sybian, Maemo/Meego and Windows Mobile. In other stuff, I am English, I support Everton FC, I have visited Glastonbury music festival 5 times and recommend it to anyone. I am married and my wife and i have a dog called Friday.
This entry was posted in Development, Windows Phone and tagged , , , , . Bookmark the permalink.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s