Using Grid Layouts

  • Article

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. 

An example of a GridLayout.

<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