Grid Layout

When composing an application, construct each view as a user control. Compose the user controls into a grid. This allows each view to be developed independently. At the same time, it allows windows of different orientations and sizes to reuse views.


A page or window contains several views. Each view has its own independent view model.


The page or window contains a grid. The views populate the grid, with row or column span set appropriately.


The window defines an XML namespace to access the views.


The window contains a grid that composes the views.

        <RowDefinition Height="Auto" />
        <RowDefinition Height="21*" />
        <RowDefinition Height="8*" />
        <ColumnDefinition Width="30*" />
        <ColumnDefinition Width="10*" />
    <Views:CategoryView Grid.RowSpan="2" />
    <Views:ProfileView Grid.Column="1" />
    <Views:FeedView Grid.Column="1" Grid.Row="1" />
    <Views:TickerView Grid.Row="2" Grid.ColumnSpan="2" />

The grid allows views to allocate their own vertical or horizontal space by setting the height or width to "Auto".