Windows Phone Layout Panels

Grid

Grid is the default container where we can arrange the elements in table format.

<Grid>  

    <Grid.ColumnDefinitions>  

        <ColumnDefinition Width="*"></ColumnDefinition>  

        <ColumnDefinition Width="*"></ColumnDefinition>  

        <ColumnDefinition Width="*"></ColumnDefinition>  

    </Grid.ColumnDefinitions>  

    <Grid.RowDefinitions>  

        <RowDefinition Height="*"></RowDefinition>  

        <RowDefinition Height="*"></RowDefinition>  

        <RowDefinition Height="*"></RowDefinition>  

    </Grid.RowDefinitions>  

    <Button Grid.Row="0" Grid.Column="0" Content="0-0" HorizontalAlignment="Center" Background="Black"></Button>  

    <Button Grid.Row="2" Grid.Column="2" Content="2-2" HorizontalAlignment="Center" Background="Green"></Button>  

    <Button Grid.Row="1" Grid.Column="1" Content="1-1" HorizontalAlignment="Center" Background="Yellow"></Button>  

</Grid>  

StackPanel

By using StackPanel we can arrange the elements vertically or horizontally.We can arrange child elements in a panel without affecting the size of the lements.

 <StackPanel Background="White" Height="500px">

            <!-- Horizontal Menu-->

            <StackPanel Background="Gray" Orientation="Horizontal" Height="199">

                <TextBlock Text="Text 1" FontSize="30" Margin="2 40" Foreground="Black"></TextBlock>

                <TextBlock Text="Text 2" FontSize="30" Margin="2 40" Foreground="Red"></TextBlock>

            </StackPanel>

            <!-- Vertical Menu-->

            <StackPanel Background="LightCyan" Orientation="Vertical" Height="199">

                <TextBlock  Text="Text 1" FontSize="30"  Foreground="Black" SelectionHighlightColor="#FF531BD4"></TextBlock>

                <TextBlock Text="Text 2" FontSize="30"  Foreground="Red"></TextBlock>

            </StackPanel>

        </StackPanel>

  

Canvas

Canvas is used to place the control by specifying the position in pixel format.We can use Canvas.Left, Canvas.Right,Canvas.Bottom and Canvas.Top.

 <Canvas x:Name="canvaslayout" Width="300px" Height="600px" Background="GreenYellow"  >

            <Button Canvas.Left="90px" Canvas.Top="250px" Background="Gray" Content="Button Control"   FontSize="30"></Button>

            <TextBlock Canvas.Left="40px" Canvas.Top="100px" Text="TextBlock" FontSize="40"></TextBlock>

        </Canvas>