Silverlight Panels: How to use Canvas Layout in Silverlight?

Silverlight Panels: How to use Canvas Layout in Silverlight? In this article let us learn how to use Canvas Layout panel in a Silverlight application. Canvas Layout panelis another most useful panel we ever use in Silverlight. Using this we can place any content any where inside the canvas. Canvas is mostly useful whenever we want place any objects in layered fashion. We can put our content in specific location by providing absolute left and top position to Canvas Layout.  As usual, open visual studio and select Silverlight project. We can notice that there is a Grid layout in our MainPage.xaml.  Remove the default Grid layout and just drag and drop the Canvas Layout into our application. The code for this looks like as     <Canvas Name="canvas1">         <Rectangle x:Name="rectFirst" Fill="Blue" Height="100" Width="100" />         <Rectangle x:Name="rectSecond" Fill="red" Height="100" Width="100" />     </Canvas> From the above code we can notice that I placed two rectangles in our canvas layout. If we compile this without using Canvas.Left and Canvas.Right to both the rectangles, then we can able to see only second rectangle. This is because size of both the rectangles are same and we dint give absolute positions to our rectangles, so they both got overlapped each other. Now let us give absolute positions to our rectangles. The code for this looks like as    <Canvas Name="canvas1">         <Rectangle x:Name="rectFirst" Fill="Blue" Height="100" Width="100"         Canvas.Left="50" Canvas.Top="50" />         <Rectangle x:Name="rectSecond" Fill="red" Height="100" Width="100"         Canvas.Left="200" Canvas.Top="100" />     </Canvas> From the above code we can notice that I gave left and top positions to both the rectangles using Canvas.Left and Canvas.Right properties. That's it!!!! Just press F5 and see the result The output for the above code looks like as Note: For the people who find it difficult to integrate the above code, I am pasting the complete code here. MainPage.xaml: <UserControl x:Class="SilverlightTest2.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">         <Rectangle x:Name="rectFirst" Fill="Blue" Height="100" Width="100"         Canvas.Left="50" Canvas.Top="50" />         <Rectangle x:Name="rectSecond" Fill="red" Height="100" Width="100"         Canvas.Left="200" Canvas.Top="100" />     </Canvas> </UserControl> If you have any doubts in this article or have any suggestions for me please don't hesitate to leave a comment. If you like my articles do subscribe to my blog so that you can get my articles directly to your inbox. Thanks for reading!!!!