XAML Canvas

A canvas in XAML defines an area within which you can explicitly position child elements by coordinates relative to the canvas area. This article shows you how to use a canvas in XAML.
  • 4130
<Canvas /> element of XAML represents a canvas. A canvas defines an area within which you can explicitly position child elements by coordinates relative to the canvas area.

Now let's say you want to draw some text which is relative to a canvas, not the parent window. The following code draws a border around the canvas and draws a canvas which is aligned to center horizontally and vertically.

<Border

       BorderThickness="3"

       BorderBrush="Black"

       Background="Yellow"

       HorizontalAlignment="Center"

       VerticalAlignment="Center"

       Width="200"

       Height="100">   

    <Canvas>             

        <TextBlock Canvas.Top="30" Canvas.Left="50">Hello XAML!</TextBlock>          

    </Canvas>      

</Border>


The output looks like Figure 1.


 CanvasImg1.gif

Figure 1. Canvas example

As you can see from Figure 1, the text is drawn on a relative position to the canvas.

Further Readings
 
You may also want to read these related articles.
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
© 2020 DotNetHeaven. All rights reserved.