Share via

Windows Store App displaying Data in two more columns in ListView

  • Article

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">

    <ListView.ItemTemplate>

        <DataTemplate>

            <Image Source="{Binding Path=ImagePath}" Stretch="Fill" HorizontalAlignment="Left" 

               Margin="10,10,0,0" VerticalAlignment="Top"/>

        </DataTemplate>

    </ListView.ItemTemplate>

    <ListView.ItemsPanel>

        <ItemsPanelTemplate>

            <WrapGrid ItemHeight="100" ItemWidth="150" Orientation="Horizontal" MaximumRowsOrColumns="2"/>

        </ItemsPanelTemplate>

    </ListView.ItemsPanel>

</ListView>

Namoskar!!!

Comments

  • Anonymous
    July 21, 2013
    can u show me example with c# code behind please its been a week I couldn't figure it out my mail id : prasanas14@gmail.com

  • Anonymous
    April 25, 2014
    Nice it helped!

  • Anonymous
    October 17, 2014
    The comment has been removed

  • Anonymous
    May 10, 2015
    Great, thank you!!

  • Anonymous
    May 20, 2015
    Thank you very much. Finally found your example after hours of searching.