Layout in XAML
page 7 of 8
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 46448/ 74

Canvas

Canvas is a solution for absolute positioning in XAML.  Canvas has four Attached Properties in its child elements: Canvas.Top, Canvas.Left, Canvas.Right and Canvas.Bottom.

These attributes specify the distance between the top left corner of an element and its parent Canvas.  Obviously, by setting one of Canvas.Top and Canvas.Bottom and one of Canvas.Left and Canvas.Right, you will get the result and do not need to set others.  However, if you set both attributes, Canvas.Top and Canvas.Left are preferred.  Also, you can set only one of these attributes for an element.

Listing 11 and Figure 11 help you to see the concept of Canvas in a simple example.

Listing 11

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="300" Width="300"
    >
  <Canvas>
    <TextBox Background="Coral" Grid.Row="0" Grid.Column="0" 
             Canvas.Top="10" Canvas.Left="20">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" Grid.Row="0" Grid.Column="1" 
             Canvas.Bottom="60" Canvas.Left="40">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0"
             Canvas.Top="80" Canvas.Right="110">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" Grid.Row="1" Grid.Column="1"
              Canvas.Bottom="95" Canvas.Right="30">
      ASP Alliance 4
    </TextBox>
  </Canvas>
</Window>

Figure 11

I said Canvas Attached Properties have relative values to their parent Canvas elements.  So if you nest a Canvas element within another and declare some elements in second Canvas, those elements will get their position from their direct parent Canvas.  Listing 12 and Figure 12 show this concept.

Listing 12

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="300" Width="300"
    >
  <Canvas>
    <TextBox Background="Coral" Grid.Row="0" Grid.Column="0" 
             Canvas.Top="10" Canvas.Left="20">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" Grid.Row="0" Grid.Column="1" 
             Canvas.Top="60" Canvas.Left="40">
      ASP Alliance 2
    </TextBox>
    <Canvas Canvas.Top="120" Canvas.Left="140">
      <TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0"
         Canvas.Top="5" Canvas.Left="10">
        ASP Alliance 3
      </TextBox>
      <TextBox Background="Teal" Grid.Row="1" Grid.Column="1"
                Canvas.Top="60" Canvas.Left="50">
        ASP Alliance 4
      </TextBox>
    </Canvas>
  </Canvas>
</Window>

Figure 12


View Entire Article

User Comments

Title: Good One....   
Name: Satish
Date: 2011-01-31 5:57:16 AM
Comment:
Thanks for the article
Title: Margins and Canvas.Top/Left   
Name: Amir
Date: 2010-04-17 8:50:03 PM
Comment:
Hi,

What is the difference between margins and Canvas.Left/Top/Right/Bottom? They both seem to define left, top, right and bottom distances. If that's the case then I don't understand what they mean when they say Canvas uses absolute positioning and grid uses relative positioning.

Thanks
Title: Complement   
Name: Mehta Chandni K.
Date: 2009-02-09 4:08:59 AM
Comment:
A very good article. I got to learn many basic and important things on XAML. Thank you very much. Keep uploading such articles for students like us..
Title: XAML Layout   
Name: Anjan
Date: 2007-05-15 6:53:25 AM
Comment:
It is fine with windows.I want to Layout the Page with WINDOWS VISTA based.
Title: Correction   
Name: Keyvan Nayyeri
Date: 2006-10-27 8:36:05 AM
Comment:
Actually nothing :-D

I just forgot to remove them from previous code but they won't affect the result anyways.

Thanks for pointing.
Title: grid...   
Name: Amirhossein Babaeian
Date: 2006-10-27 6:46:47 AM
Comment:
what's the roll of grid.row and grid.column in controls that contains in cansvas tags?
Title: Resources in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-12 12:58:22 AM
Comment:
Third part of these tutorials about Resources in XAML:
http://aspalliance.com/1032_Resources_in_XAML
Title: Nice article   
Name: Harry
Date: 2006-10-10 12:27:22 AM
Comment:
Hi Keyvan,
This is very nice article about XAML. I read your previous article also, even that was alos good for begginers.

Keep it up....

Harry
Title: Introduction to XAML   
Name: Keyvan Nayyeri
Date: 2006-10-09 2:08:59 PM
Comment:
First part of these tutorials, Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-05-28 10:33:21 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search