Logo 
Search:

WPF Articles

Submit Article
Home » Articles » WPF » XAMLRSS Feeds

Canvas Layout in XAML

Posted By: Vivek Patel     Category: WPF     Views: 11889

This article will explain Canvas Layout in XAML. A very simple tutorial to understand Canvas Layout in XAML.

Understanding Canvas Layout

  • Lays out element by absolute positioning.  
  • Elements in canvas are absolute positioned using Top and Left property.
  • Canvas layout is useful in situation where UI elements never move.

Canvas Property used for Absolute Positioning are

  • Canvas.Top  - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.
  • Canvas.Left - Gets or sets a value that represents the distance between the left side of an element and the left side of its parent Canvas.
  • Canvas.Right  - Gets or sets a value that represents the distance between the right side of an element and the right side of its parent Canvas.
  • Canvas.Bottom  - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.


Example of Canvas Layout

As Canvas Layout is used for absolute positioning, we need to assign canvas property to align them.  If you don't align Canvas.Top Property and Canvas.Left Property than it would display control overlapping one another.

Example when Canvas Property's are not assigned.
<Canvas>
    <Label Content="Canvas Layout Demo" 
        FontSize="15" FontWeight="Bold"
        Foreground="Blue"/>

    <Label Content="Label1" FontSize="15" FontWeight="Bold" />
    <Label Content="Label2" FontSize="15" FontWeight="Bold" />
    <Label Content="Label3" FontSize="15" FontWeight="Bold" />
</Canvas>

Output



Example when Canvas Property's is assigned.
Tips: While absolute position, mostly used canvas properties are Canvas.Top and Canvas.Left Property.

<Canvas>
    <Label Content="Canvas Layout Demo" 
        FontSize="15" FontWeight="Bold"
        Foreground="Blue"
        Canvas.Top="10" Canvas.Left="25"/>

    <Label Content="Label1" FontSize="15" FontWeight="Bold" 
           Canvas.Top="40" Canvas.Left="25"/>
    
    <Label Content="Label2" FontSize="15" FontWeight="Bold" 
           Canvas.Top="70" Canvas.Left="75"/>
    
    <Label Content="Label3" FontSize="15" FontWeight="Bold" 
           Canvas.Top="100" Canvas.Left="125"/>
</Canvas>

Output

  
Share: 


Didn't find what you were looking for? Find more on Canvas Layout in XAML Or get search suggestion and latest updates.

Vivek Patel
Vivek Patel author of Canvas Layout in XAML is from United States. Vivek Patel says

I have started working in .Net Technology since its beta release and lucky to got chance to work on .Net 1.1, 2.0 and now working on .Net 3.5. I have worked in both C# and VB.Net for Asp.net Projects. I can also provide Sharepoint development needs. I can efficiently switch role from Tech Lead and Developer. I have comprehensive knowledge of Asp.net Development. I have been award Microsoft Most Valuable Award twice in Asp.net Technology.

Blog: http://dotnetguts.blogspot.com

 
View All Articles

 
Please enter your Comment

  • Comment should be atleast 30 Characters.
  • Please put code inside [Code] your code [/Code].

 
No Comment Found, Be the First to post comment!