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
ArrangeOverride methods of
Panel. So we have added a new class WrapPanel in our project under
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
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
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.