Wrap Grid with Variable Sized Items for Windows Phone 8.1

In this tutorial I will show you how to wrap variable sized ListView Items in Windows Phone 8.1. This is how our end product looks.


Here are the steps:

Step 1: Create a custom WrapGrid

Firstly we would be creating a custom WrapGrid by overriding MeasureOverride and ArrangeOverride methods of Panel. So we have added a new class WrapPanel in our project under Controls folder.

The WrapGrid class to be added is as follows.

Step 2: Define ItemsPanelTemplate

We will be defining the ItemsPanelTemplate for the ListView to be used. Define this as local resources.

Step 3: Define DataTemplate for the ListView

Next we arbitrarily define a DataTemplate for the ListView which we are using. Define this as local resources.

Step 4: Define ListView Style

For our convenience and for allowing reusability we will be defining a Style for our ListView as local resource.

Step 5: Add a ListView in MainPage.xaml

Next, we add a ListView in our MainPage.

Step 6: Add a AddItems method to populate items.

We call this function in the OnNavigatedTo event handler to set the ItemSource of our ListView.

That’s it. Try running the app in the emulator and see the magic for yourself. Download the full source code for your reference.

Windows Phone 8.1/Windows 10 WinRT

Download full project Wrap Grid 8.1

Windows Phone 8.1 Silverlight

Code for implementing it in Windows Phone 8 is quite similar. You can grab the following project if you are working on Windows Phone 8 or Windows Phone 8.1 Silverlight.

Download full project Wrap Grid WP8


Ashish Kumar

I am pursuing my Btech from MIT, Pune and I like to develop and blog about Windows Phone apps.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding