Panels are basic layout mechanism in both Silverlight and WPF. They act as containers for other controls and each panel provides a different way of laying out controls on the screen. In this post we will look at Canvas Panel in Silverlight. Canvas allows us to put controls based on x and y  coordinates. This gives us precise control over where our UI elements e.g buttons, text boxes etc. are placed.

In this example we can see that different ellipses are placed on the canvas using x and y coordinates.

<Canvas x:Name="LayoutRoot" Background="LightGoldenrodYellow">
  <Ellipse Height="50" Width="50" Fill="Coral" 
    Canvas.Left="20" Canvas.Top="20" />
  <Ellipse Height="50" Width="50" Fill="Red" 
    Canvas.Left="70" Canvas.Top="70" />
  <Ellipse Height="50" Width="50" Fill="Pink" 
    Canvas.Left="120" Canvas.Top="120" />
  <Ellipse Height="50" Width="50" Fill="Purple" 
    Canvas.Left="170" Canvas.Top="170" />
  <Ellipse Height="50" Width="50" Fill="RoyalBlue" 
    Canvas.Left="220" Canvas.Top="220" />
</Canvas>

 

Canvas Panel

Tagged with:
 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>