Choosing between XAML's ListView and GridView in WinRT

Jerry Nixon picture Jerry Nixon · Jun 5, 2012 · Viewed 11.4k times · Source

The GridView and the ListView in XAML seem to be the same control.

How does a developer choose between the two?

Answer

Jerry Nixon picture Jerry Nixon · Jun 5, 2012

The GridView control typically scrolls horizontally. Also, you will see some native spacing between items that is greater than that in the ListView. This spacing is there because of the intent for how the controls will be used in Windows Store apps. (read on)

  • Like the ListView it inherits from ItemsControl.
  • Like the ListView groups using GroupStyle.
  • Like the ListView it supports the two new Virtualization strategies.
  • Like the ListView it supports the different Selection modes.

Sample syntax:

<GridView>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>

The ListView control typically scrolls vertically.

Sample syntax:

<ListView>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>

THIS IS THE ANSWER

The general differentiation between the two is their occurance in views. A GridView tends to appear in FullView, FillView, and Portait. The ListView, because of its vertical orientation, tends to appear in the SnapView. Either control can appear in either view, but this is the local diversion of the two controls.

enter image description here

MSDN: The ListView and GridView controls are both used to display collections of data in your app. They have similar functionality, but display data differently. They are both derived from the ItemsControl class. When we talk about an ItemsControl, the info applies to both the ListView and GridView controls.

The ListView displays data stacked vertically. It's often used to show an ordered list of items, such as a list of emails or search results. It's also useful in master-detail scenarios, where the list items contain only a small amount of info and the details of the selected item are shown separately.

The GridView displays data stacked horizontally. It's often used when you need to show a rich visualization of each item that takes more space, such as a photo gallery.*