Using Grid Layouts
With GridLayout, you can specify rows and columns to display content in a tabular layout. This layout is typically used with the Repeater element to populate the data.
The following example shows how to use the Repeater element with a grid layout.
<Locals>
<ArrayListDataSet Name="Alphabet" >
<Source>
<cor:String String="A"/>
<cor:String String="B"/>
<cor:String String="C"/>
<cor:String String="D"/>
<cor:String String="E"/>
<cor:String String="F"/>
<cor:String String="G"/>
<cor:String String="H"/>
</Source>
</ArrayListDataSet>
</Locals>
<Content>
<Repeater Source="[Alphabet]" Layout="Grid" >
<Layout>
<GridLayout Orientation="Horizontal" Columns="4" Rows="2"
AllowWrap="true" Spacing="10,10"
MajorAlignment="Fill" MinorAlignment="Fill" />
</Layout>
<Content>
<Graphic Content="image://me:ImageLibrary"
Padding="5,5,5,5" SizingPolicy="SizeToChildren" >
<Children>
<Text Font="Arial, 20" Color="White" Content="[RepeatedItem!cor:String]" HorizontalAlignment="Center" />
</Children>
</Graphic>
</Content>
</Repeater>
</Content>
Sample Explorer
- Layout > Grid
- Scrolling > Lists
- Repeater > Grid Layout
See Also