Silverlight Layout Container Panel: Grid

Grid is one of the Silverlight container layout panel that enable complex layout. By default grid contains one row and one column. RowDefinations and ColumDefinations collections also be used to define more rows and columns in Grid. RowDefination and ColumnDefination objects are used to define the size of each row and column inside Grid. In Silverlight Grid is designed to use for your application it is not design for displaying the data, it’s not like GridView in Visual Studio.

Grid.Column and Grid.Row properties are used to position objects in specific cells.

For scenarios that require application layout that is not possible using any of the predefined Panel elements, custom layout behaviors can be achieved by inheriting from Panel and overriding the default measure and arrange behavior by using the MeasureOverride and ArrangeOverride methods. For more information

Example

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="#DCDCDC" Width="400" Height="300" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" Margin="10" FontWeight="Bold"  Foreground="Blue"  Text="Silverlight Grid Demo" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <Grid x:Name="FormLayoutGrid" Grid.Row="1" Grid.Column="0" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="0" Grid.Column="1" Margin="10" />
            <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="1" Grid.Column="1" Margin="10" />
            <TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="2" Grid.Column="1" Margin="10" />
            <TextBlock Grid.Row="3" Grid.Column="0" Text="Email Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="3" Grid.Column="1" Margin="10" />
        </Grid>
    </Grid>


</UserControl>

Silverlight Grid Demo

Silverlight Layout Container Panels : Stack Panel

Stack Panel is one of the Silverlight panel elements enable layout. Stack panel arranges objects in a list, list can be vertical or horizontal depending upon the direction. Orientation property determined the direction of list, default value of orientation property is vertical.

Example

<StackPanel Margin="20">
    <Rectangle Fill="Brown"  Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Yellow"  Width="50" Height="50" Margin="5" />
</StackPanel>

Silverlight Layout Container Panels – Canvas Panel

When you start creating Silverlight based applications, one of first things you will need to choose how your Silverlight application layout. Silverlight provides five layout panels. The default panel is Grid panel.

Canvas Panel

Canvas is one of the Silverlight panel, that enables layout of your Silverlight applications. Control positing inside Canvas in controlled by specifying the X and Y coordinates of  controls. These coordinates are in pixel. Canvas.Left and Canvas.Top properties can also be use for specifying X and Y coordinates. Canvas objects can also be nested. Each child element must be UIElementChildren property is used for accessing Canvas child elements in code. Sometimes Canvas is used as a container for other objects in that Canvas does not have any visible property. A Canvas is not visible if any of the following conditions are true:

  • The Height property is equal to 0.
  • The Width property is equal to 0.
  • The Background property is equal to nullNothingnullptrunita null reference (Nothing in Visual Basic).
  • The Opacity property is equal to 0.
  • The Visibility property is equal to Visibility..::..Collapsed.
  • One of the ancestor objects of the Canvas is not visible.

Canvas Example

<Canvas Width="640" Height="480" Background="White">
    <Rectangle Canvas.Left="30" Canvas.Top="30" 
           Fill="blue" Width="250" Height="150" />
    <Rectangle x:Name ="CanvasRect" Canvas.Left="60" Canvas.Top="60"  Height="50" Width="100" Fill="Red" ></Rectangle>
</Canvas>

Canvas Example

In Next we will discuss about Silverlight  Dock Panel Container