Silverlight User Interface Layout

.Silverlight User Interface

"A layout container holds controls and elements which make up the user interface. Silverlight's layout controls include: Grid, StackPanel, Canvas, DockPanel and WrapPanel."

Silverlight supports the use of Extensible Application Markup Language (XAML) in the creation of user interfaces.

  • Layout controls are derived directly or indirectly from the Panel class. Panels provide for an arrangement of child objects. All types of layout controls have the following properties:
    1. Margin - space around edges (specify 1, 2, 4 values; Left, Top, Right, Bottom) .
    2. Padding - space between boundary and content (on the inside).
    3. HorizontalAlignment - (Left, Center, RIght, Stretch=default)
    4. VerticalAlignment - (Top, Center, Bottom, Stretch=default)
    5. HorizontalContentAlignment
    6. VerticalContentAlignment
    7. Min/MaxWidth
    8. Min/MaxHeight
    9. Width, Height

Fixed Layouts

  1. Canvas
    • Canvas is a fixed layout so the defined area does not change when the screen is resized or the content changes.
    • Canvas defines an area where child elements can be explicitly positioned by using coordinates that are relative to the Canvas area.
    • Canvas is the highest performing layout panel in Silverlight.
    • The position of graphical elements is relative to the top-left corner of the canvas.
    • There are three attached properties for controlling an element inside a canvas:
      • Left - value in pixels from left border of canvas.
      • Top - value in pixels from the top border of canvas.
      • ZIndex - stacking order of elements. The larger the ZIndex value, the closer the element is to the foreground.

Canvas Layout Control

.Canvas Layout Control


Canvas Layout Control

<UserControl x:Class="SilverlightApplication4.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

  <Canvas
   Name="canvas1"
   Margin="29,68,33,78">

  <Button
   Canvas.Left="36"
   Canvas.Top="29"
   Content="Button 1"
   Name="button1"
   Height="22"
   Width="75" />

  <Button
   Canvas.Left="226"
   Canvas.Top="106"
   Content="Button 2"
   Name="button2"
   Height="22"
   Width="75" />
     
  </Canvas>
</UserControl>

Dynamic Layouts

  1. Grid
    • The Grid control allows the space to be allocated in rows and columns (like a table).
    • The Grid is the most used control. It is the default root element for page templates and is the best control to use when you want the contents to shrink/expand to fill available space.
    • Use the Grid's element properties RowDefintions, and ColumnDefinitions to define rows and columns.
    • Add the inline property ShowGridLines="True" to see the Grid boundaries.
    • There are three ways to specify sizes. Sizes for a Grid are the Width of columns and the Height of rows:
      • Absolute - specify the column width or row height in a fixed number of pixels. Absolute sizing takes precedence over the other two sizing options and is always the first one to be calculated.
      • * - star sizing, distribute the available space of the grid equally based on amount of available space (eg. *, 2*, 3*)
      • AUTO - makes the size just big enough to hold contents. The largest element in a row or column dictates the height for that entire row or column. If there is no contents, the size is zero.
    • If you do not specify as size for the grid's dimensions, the grid will resize itself according to the available space.
    • There are four attached properties for positioning an element withing a grid:
      • Row - grid row to place element.
      • Column - grid column to place element.
      • RowSpan - the number of rows the element will span.
      • ColumnSpan - the number of columns and element will span.
    • The number of rows and columns start with 0. If no value is specified, it will default to 0.
    • Attached Properties - a specialized kind of property that gives a child element the ability to specify a value for a property that is actually defined in another element, ususally their parent element (eg. Grid.Row=0, Grid.Column=0)

Grid Layout Control

.Grid Layout Control


Grid Layout Control

<UserControl x:Class="SilverlightApplication4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">


    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="125" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>

        <TextBlock
Name="textBlock1"
Text="The quick brown fox jumped over the lazy dog."
TextWrapping="Wrap" />

        <Ellipse
Grid.Row="1"
Grid.Column="1"
Name="ellipse1"
Stroke="Black"
StrokeThickness="1"
Fill="#FFEF1212" />

        <Rectangle
Grid.Column="2"
Grid.Row="1"
Name="rectangle1"
Stroke="Black"
StrokeThickness="1"
RadiusX="20"
RadiusY="20"
Fill="#FF1D1DE2" />

        <Button
Content="Button"
Grid.Column="1"
Name="button1" />
    </Grid>
</UserControl>

  1. StackPanel
    • The StackPanel is used to position elements in a horizontal or vertical stack.
    • The default orientation is vertical.
    • StackPanel provides as much area as is required for each element.
    • The Grid can take over most the responsibilites of a stack panel. A Grid with one column and all the rows set to AUTO height is the same as a vertical stack panel. The main reason for the StackPanel is that the number of rows does not need to be specified. StackPanel is important for things like a list box where the number of items might change at run time.

Stack Panel Layout Control

.Stack Panel Layout Control


Stack Panel Layout Control

<UserControl x:Class="SilverlightApplication4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">


    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
        <StackPanel>
            <Button Content="Button 1" />
            <Button Content="Button 2" />
            <Button Content="Button 3" FontSize="20"/>
            <Button Content="Button 4" />
            <Ellipse Fill="DarkGoldenrod" Height="30" />
            <Button Content="Button 5" />


            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="Black" Height="25" Width="25"/>
                <Rectangle Fill="Green" Height="45" Width="45" />
                <Ellipse Fill="RoyalBlue" Height="25" Width="25" />
            </StackPanel>

        </StackPanel>

    </Grid>
</UserControl>

Constrained vs Unconstrained Controls

Silverlight has two layout modes (A layout typically contains a mixture of these two modes):

  1. Constrained
    • Fixed Width or Height is specified by a container.
  2. Unconstrained
    • No fixed Width or Height is specified, so elements are free to choose their own size. For example, the StackPanel will always perform unconstrained layout in the direction of stacking .. so elements inside a vertical stack panel are vertically unconstrained. It will provide each element with the height it needs and then crop anything that does not fit into the StackPanel.
    • aka. "Size to Content"
    • Unconstrained layout is important in data binding where the size of the data is not known until runtime. However if there is no data the size becomes zero (not visible) which can make testing without appropriate data difficult.



Reference Articles


Top