Post
Ask Question

Canvas Control In WPF

Introduction


We are familiar with a canvas used in a painting, it is used as a surface for oil painting.
 
Artists can paint in any direction at any point, he can even overlap some of his art.
 
The artist has complete control over the canvas. It is up to the artist to decide where to put items on the canvas.

A canvas looks something like this. (The white paper on the board)
 
Canvas Control In WPF
 
WPF canvas panel follows the same rules as per the real-life canvas, it gives complete control to the developer.

It allows child controls to be overlapped or to be placed in any direction as per the developer's wish.

Canvas has 4 attached properties that specify the position of child controls.

Left, Right, Top, Bottom

Canvas.Left="10"
Canvas.Top="10"

Here, 10 specifies the margin from that coordinate, Canvas.left = "10", that control will be positioned on the left side by keeping a margin of 10

Let's see a basic example.

We will draw some basic 2D shapes, and see how to place them in the canvas panel.

Shapes in the following order:
  1. Ellipse
  2. Rectangle
  3. Rectangle with curved edges
  4. Path
  5. Path with heart shape
Order is very important in canvas because canvas overlaps last control over the previous ones, meaning the 2nd Rectangle will be overlapped on the 1st Ellipse

Lets's see how the code will look:
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  4.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         mc:Ignorable="d"    
  7.         Title="MainWindow" Height="320" Width="320">    
  8.     <Window.Resources>    
  9.         <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>    
  10.     </Window.Resources>    

  12.    <Canvas x:Name="CanvasPanel"    
  13.             Background="LightGray">    
  14.         <Ellipse x:Name="TwoDEllipse"        
  15.             Width = "100"         
  16.             Height = "100"         
  17.             Stroke="Black"         
  18.             Margin="10 0 0 0"        
  19.             StrokeThickness="1"    
  20.             Canvas.Left="0"    
  21.             Canvas.Top="18">    
  22.             <Ellipse.Fill>    
  23.                 <RadialGradientBrush>    
  24.                     <GradientStop Offset = "0" Color = "AliceBlue"/>    
  25.                     <GradientStop Offset = "1" Color = "LightBlue"/>    
  26.                     <GradientStop Offset = "2" Color = "DarkBlue"/>    
  27.                 </RadialGradientBrush>    
  28.             </Ellipse.Fill>    
  29.         </Ellipse>    
  30.     
  31.         <Rectangle x:Name="TwoDRectangle"        
  32.              Width="75"         
  33.              Height="75"         
  34.              Margin = "10 0 0 0"        
  35.              Stroke="Black"         
  36.              StrokeThickness="1"    
  37.              Canvas.Left="50"    
  38.              Canvas.Top="65">    
  39.             <Rectangle.Fill>    
  40.                 <RadialGradientBrush>    
  41.                     <GradientStop Offset = "0" Color = "#f1ba82"/>    
  42.                     <GradientStop Offset = "1" Color = "Coral"/>    
  43.                     <GradientStop Offset = "2" Color = "Coral"/>    
  44.                 </RadialGradientBrush>    
  45.             </Rectangle.Fill>    
  46.         </Rectangle>    
  47.     
  48.         <Rectangle x:Name="TwoDRectangle2"        
  49.              Width="75"         
  50.              Height="75"         
  51.              Margin = "10 0 0 0"        
  52.              Stroke="Black"         
  53.              StrokeThickness="1"        
  54.              RadiusX="10"        
  55.              RadiusY="10"    
  56.              Canvas.Left="90"    
  57.              Canvas.Top="100">    
  58.             <Rectangle.Fill>    
  59.                 <RadialGradientBrush>    
  60.                     <GradientStop Offset = "0" Color = "Coral"/>    
  61.                     <GradientStop Offset = "1" Color = "#ff3f33"/>    
  62.                     <GradientStop Offset = "2" Color = "#ff5733"/>    
  63.                 </RadialGradientBrush>    
  64.             </Rectangle.Fill>    
  65.         </Rectangle>    
  66.     
  67.         <Path x:Name="TwoDPath"        
  68.                   Margin = "10 0 0 0"        
  69.                   Height = "80"        
  70.                   Width="80"        
  71.                   Stroke="Black"         
  72.                   StrokeThickness="1"        
  73.                   Stretch = "Fill"    
  74.              Canvas.Left="124"    
  75.              Canvas.Top="134">    
  76.             <Path.Data>    
  77.                 <PathGeometry x:Name="PathGeoMetry">    
  78.                     <PathFigure StartPoint = "50,0" IsClosed = "True">    
  79.                         <LineSegment Point = "100,50"/>    
  80.                         <LineSegment Point = "50,100"/>    
  81.                         <LineSegment Point = "0,50"/>    
  82.                     </PathFigure>    
  83.                 </PathGeometry>    
  84.             </Path.Data>    
  85.             <Path.Fill>    
  86.                 <RadialGradientBrush>    
  87.                     <GradientStop Offset = "0" Color = "#e8e670"/>    
  88.                     <GradientStop Offset = "1" Color = "#eda619"/>    
  89.                     <GradientStop Offset = "2" Color = "#edea19"/>    
  90.                 </RadialGradientBrush>    
  91.             </Path.Fill>    
  92.         </Path>    
  93.     
  94.         <Path x:Name="PathHeart"     
  95.             Data="M 241,200         
  96.                   A 20,20 0 0 0 200,240        
  97.                   C 210,250 240,270 240,270        
  98.                   C 240,270 260,260 280,240        
  99.                   A 20,20 0 0 0 239,200"       
  100.               Stroke="Black"     
  101.               StrokeThickness="1"       
  102.               Canvas.Right="35"    
  103.               Canvas.Bottom="30"    
  104.                   Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}">    
  105.             <Path.Fill>    
  106.                 <RadialGradientBrush>    
  107.                     <GradientStop Offset = "0" Color = "#e88270"/>    
  108.                     <GradientStop Offset = "1" Color = "#ee3514"/>    
  109.                     <GradientStop Offset = "2" Color = "#ee1414"/>    
  110.                 </RadialGradientBrush>    
  111.             </Path.Fill>    
  112.         </Path>    
  113.     </Canvas>    
  114. </Window>    
And this is how the output looks:
 
Canvas Control In WPF
 
Here, we have limited shapes so we can manually put control (which we want to display on top) at the end of the XAML.

It gets really messy when it has more than 20 or 30 shapes.

To overcome this problem, the canvas panel has a property named Z Index. Control with the higher z index overlaps the one with a lower z index.

Note
2 controls can have the same z index, but then last defined control will overlap the previous one.

Let's make changes in our example set Panel.ZIndex of the Rectangle & Path to 2 and this 2 will overlap our centered shape, which is a cornered edge rectangle. To achieve that, set its Panel.ZIndex = 1.
 
So now, the order for ZIndex is 0 - 2 - 1 - 2 - 0. why 0? Because by default, ZIndex is set to 0.
  1. <Rectangle x:Name="TwoDRectangle"        
  2.            Width="75"         
  3.            Height="75"         
  4.            Margin = "10 0 0 0"        
  5.            Stroke="Black"         
  6.            StrokeThickness="1"    
  7.            Canvas.Left="50"    
  8.            Canvas.Top="65"    
  9.            Panel.ZIndex="2">    
  10.           <Rectangle.Fill>    
  11.               <RadialGradientBrush>    
  12.                   <GradientStop Offset = "0" Color = "#f1ba82"/>    
  13.                   <GradientStop Offset = "1" Color = "Coral"/>    
  14.                   <GradientStop Offset = "2" Color = "Coral"/>    
  15.               </RadialGradientBrush>    
  16.           </Rectangle.Fill>    
  17.       </Rectangle>    
  18.     
  19.       <Rectangle x:Name="TwoDRectangle2"        
  20.            Width="75"         
  21.            Height="75"         
  22.            Margin = "10 0 0 0"        
  23.            Stroke="Black"         
  24.            StrokeThickness="1"        
  25.            RadiusX="10"        
  26.            RadiusY="10"    
  27.            Canvas.Left="90"    
  28.            Canvas.Top="100"    
  29.            Panel.ZIndex="1">    
  30.           <Rectangle.Fill>    
  31.               <RadialGradientBrush>    
  32.                   <GradientStop Offset = "0" Color = "Coral"/>    
  33.                   <GradientStop Offset = "1" Color = "#ff3f33"/>    
  34.                   <GradientStop Offset = "2" Color = "#ff5733"/>    
  35.               </RadialGradientBrush>    
  36.           </Rectangle.Fill>    
  37.       </Rectangle>    
  38.     
  39.       <Path x:Name="TwoDPath"        
  40.                 Margin = "10 0 0 0"        
  41.                 Height = "80"        
  42.                 Width="80"        
  43.                 Stroke="Black"         
  44.                 StrokeThickness="1"        
  45.                 Stretch = "Fill"    
  46.            Canvas.Left="124"    
  47.            Canvas.Top="134"    
  48.             Panel.ZIndex="2">    
  49.           <Path.Data>    
  50.               <PathGeometry x:Name="PathGeoMetry">    
  51.                   <PathFigure StartPoint = "50,0" IsClosed = "True">    
  52.                       <LineSegment Point = "100,50"/>    
  53.                       <LineSegment Point = "50,100"/>    
  54.                       <LineSegment Point = "0,50"/>    
  55.                   </PathFigure>    
  56.               </PathGeometry>    
  57.           </Path.Data>    
  58.           <Path.Fill>    
  59.               <RadialGradientBrush>    
  60.                   <GradientStop Offset = "0" Color = "#e8e670"/>    
  61.                   <GradientStop Offset = "1" Color = "#eda619"/>    
  62.                   <GradientStop Offset = "2" Color = "#edea19"/>    
  63.               </RadialGradientBrush>    
  64.           </Path.Fill>    
  65.       </Path>    
Now let's check out the output:
 
Canvas Control In WPF

Here, we can see our second and fourth control has overlapped on the third control as ZIndex for third is 1 where ZIndex for the other two is 2.
 

Conclusion

 
In this article, we learned how to use a Canvas panel and the properties used to position child control.
 
Canvas panel is the simplest amongst other panels in WPF. It is famous because of its flexibility & it is used with shapes or animations.
 
I hope you have gained some insight into Canvas panels through this article.
 
If you have any queries or just want to connect, meet me @
As always, Happy Coding!


Similar Articles