Silverlight Canvas Panel

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>