Silverlight – Fixed Layouts

Silverlight – Fixed Layouts

Layout of controls is very important and critical for application usability. It is used to arrange a group of GUI elements in your application. There are certain important things to consider while selecting layout panels. They are −

  • Positions of the child elements.
  • Sizes of the child elements.
  • Layering of overlapping child elements on top of each other.

A fixed pixel arrangement of controls does not work if the application has been used on different screen resolutions. XAML provides a rich set of built-in layout panels to arrange the GUI elements in an appropriate way.

We will start by looking at simple fixed layouts. Then we will look at the Dynamic layout scenarios, which Silverlight has designed to support. We will see the layout-related properties and concepts that permeate all user interface elements.

Fixed Layout

The simplest kind of layout is offered by the Canvas element. The Canvaspanel is the basic layout panel in which the child elements can be positioned explicitly using the coordinates that are relative to any side of the Canvas such as left, right, top and bottom.

 

Typically, the Canvas is used for 2D graphic elements (such as Ellipse, Rectangle etc.). It is not used for UI elements because specifying absolute coordinates give trouble when you resize, localize or scale your XAML application.

Given below are the commonly used properties of Canvas class.

Given below are the commonly used methods of Canvas.

Sr. No. Method & Description
1 GetLeft

Gets the value of the Canvas.Left XAML attached property for the target element.

2 GetTop

Gets the value of the Canvas.Top XAML attached property for the target element.

3 GetZIndex

Gets the value of the Canvas.ZIndex XAML attached property for the target element.

4 SetLeft

Sets the value of the Canvas.Left XAML attached property for a target element.

5 SetTop

Sets the value of the Canvas.Top XAML attached property for a target element.

6 SetZIndex

Sets the value of the Canvas.ZIndex XAML attached property for a target element.

The following example shows how to add child elements into a Canvas. Below is the XAML implementation in which an Ellipse is created inside a Canvas with different offset properties.

<UserControl x:Class = "FirstExample.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"> 
      <Canvas Width = "380" Height = "280" > 
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"  
            Fill = "Gray" Width = "200" Height = "120" />             
      </Canvas>  
   </Grid>
	
</UserControl>

When the above code is compiled and executed, you will see the following output.

add_child_elements_canvas

Was this article helpful?

Related Articles

Leave A Comment?