Wriju's BLOG

.NET, Cloud and everything

Windows Store App displaying Data in two more columns in ListView

Windows Store apps comes with some amazing data bound controls. The most favorite among them is ListView and GridView. The ListView shows data in vertical scrolling mode and GridView shows data in horizontal scrolling.

My pal was building an app where she needs to display data in two columns while having the vertical scrolling enabled. This forced to have two data in two columns within ListView. We tried many things on it, even reached at an extent to have two image control in DataTemplate of ListView’s ItemTemplate, but anyways it was obvious that approach was wrong. Because the inside DataTemplate if we click it considers all as one item. Then we found this trick of using WrapGrid this allows the column to be formatted. So we said there will be maximum of 2 columns and the size of the image needs to be defined inside it. The whole magic of displaying data is in MaximumRowsOrColumns

<ListView x:Name="lstData" Grid.Row="1">
            <Image Source="{Binding Path=ImagePath}" Stretch="Fill" HorizontalAlignment="Left" 
               Margin="10,10,0,0" VerticalAlignment="Top"/>
            <WrapGrid ItemHeight="100" ItemWidth="150" Orientation="Horizontal" MaximumRowsOrColumns="2"/>