2013年4月26日 星期五

[Windows 8] How to design a 2 column XAML ListView in Windows 8 Store App

The WrapGrid replaces the default VirtualizingStackPanel, which arranges items in a single column. To set the WrapGrid.MaximumRowsOrColumns property is arranged in 2 columns.

XAML file

<ListView Height="320" Width="260">
    <ListView.ItemsPanel> 
       <ItemsPanelTemplate> 
          <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
       </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    
    <Rectangle Height="100" Width="100" Fill="Blue" />
    <Rectangle Height="100" Width="100" Fill="Red" />
    <Rectangle Height="100" Width="100" Fill="Yellow" /> 
    <Rectangle Height="100" Width="100" Fill="Green" /> 
    <Rectangle Height="100" Width="100" Fill="Gray" /> 
    <Rectangle Height="100" Width="100" Fill="LightBlue" />
    <Rectangle Height="100" Width="100" Fill="Pink" /> 
    <Rectangle Height="100" Width="100" Fill="YellowGreen" /> 
</ListView>

Result:

Reference:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780650.aspx?cs-save-lang=1&cs-lang=csharp#code-snippet-3

沒有留言:

張貼留言