Archive for April 15th, 2009

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>