Layout in XAML
page 6 of 8
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 46581/ 70

Margin and Padding

Hopefully these concepts are familiar to you from CSS.  Any control has these two attributes.  Margin is the distance between a control and its children and Padding is the distance between the  outer edge of a control and its children.  Padding can be applied to three elements: Block, Border and Control since these elements have an outer edge.

As with Margin in CSS, you can have Margin values for Left, Top, Right and Bottom via abbreviated syntax with this order: Left, Top, Right and Bottom.

Listing 10 is a modified version of Listing 8 to show the concept of a Margin in action and Figure 10 shows is its output.

Listing 10

<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="150" Width="300"
    >
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>      
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition />    
    </Grid.ColumnDefinitions>
 
    <TextBox Background="Coral" Grid.Row="0" Margin="10">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" Grid.Row="0" Grid.Column="2" 
             Margin="0 10 0 10">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0" 
             Margin="10 0 10 0">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" Grid.Row="1" Grid.Column="1" 
             Margin="0, 0, 10, 10">
      ASP Alliance 4
    </TextBox> 
  </Grid>
</Window>

Figure 10


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-27 9:42:34 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search