Windows 8 panels overview

I continue learning Windows 8 programming model and in this post I’ll describe available panels.
Windows 8 provides the following panels for creating UIs:

  • Canvas. Child elements are positioned by relative coordinates.
  • Grid. Consists of columns and rows.
  • StackPanel. Child elements are arranged in a single line which can be either horizontal or vertical.
  • VirtualizingStackPanel. The same class as the StackPanel class but it visualizes only those items which are currently visible.
  • VariableSizedWrapGrid. The similar class to the WrapPanel control which exist in WPF. Elements are positioned in the sequential order and go to the next line if there isn’t enough size.

I’ll explain some panels in detail.
Canvas
This class isn’t different from the WPF class at all. Here is the example with two controls which are situated at different positions.

    <Canvas Background="Black">
        <TextBlock FontSize="22" Canvas.Left="20" Canvas.Top="40">Canvas</TextBlock>
        <Rectangle Canvas.Left="60" Canvas.Top="90" Fill="Green" Height="38" Width="93"  />
    </Canvas>

StackPanel
The obvious difference is that buttons are not stretched by defaults. But in other respects everything is the same.

    <StackPanel Orientation="Vertical" Background="Black">
        <Button>Button 1</Button>
        <Button HorizontalAlignment="Center">Button 2</Button>
        <Button HorizontalAlignment="Stretch">Button 3</Button>
    </StackPanel>

Grid
Almost no difference from its WPF counterpart.

    <Grid Background="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>

        <TextBlock FontSize="20" Margin="5,0,0,0" VerticalAlignment="Center" Text="Row 1"/>
        <TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="5" Margin="0, 0, 5, 0" Text="Column 1" />
        <Button Grid.Row="1">Row 2</Button>
        <Button Grid.Row="1" Grid.Column="1">Column 1</Button>
    </Grid>

VariableSizedWrapGrid
As far as I already said, this class is almost the same as the WPF WrapPanel class. But additionally it has 2 new properties: VariableSizedWrapGrid.ColumnSpan and VariableSizedWrapGrid.RowSpan. The ColumnSpan property is used with the Orientation=Horizontal, and the RowSpan property with the vertical orientation. These properties contain an integer number as a value and if to set it higher than 1, the panel will multiply the space for the element.
Here is the example:

    <VariableSizedWrapGrid Background="Black" Orientation="Horizontal">
        <Button>Button 1</Button>
        <Button VariableSizedWrapGrid.ColumnSpan="2">Button 2</Button>
        <Button>Button 3</Button>
        <Button VariableSizedWrapGrid.ColumnSpan="3" HorizontalAlignment="Stretch">Button 4</Button>
        <Button>Button 5</Button>
    </VariableSizedWrapGrid>

And that’s how it is displayed depending on the available size.
800px

if to narrow to 400px

and 300 px

There are two additional panels: CarouselPanel and WrapGrid. But the CarouselPanel class can’t be used outside the ComboBox class (it is used as the default ItemsPanelTemplate), and the WrapGrid class also should be situated inside a ItemsControl class. Maybe in the release version they will be available for using in any places, but so far we can use only 5 above described panels.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: