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.
Recent Comments