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

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

Article Feedback

Title:  
Name:  
Url: ( Optional )
Comment:  
Please add 4 and 2 and type the answer here:

User Comments

Title: XAML Layout   
Name: Anjan
Date: 5/15/2007 6:53:25 AM
Comment:
It is fine with windows.I want to Layout the Page with WINDOWS VISTA based.
Title: Events in Windows Presentation Foundation   
Name: Keyvan Nayyeri
Date: 12/14/2006 10:22:47 AM
Comment:
Fifth part of these tutorials about Events in Windows Presentation Foundation:
http://aspalliance.com/1088_Events_in_Windows_Presentation_Foundation
Title: Correction   
Name: Keyvan Nayyeri
Date: 10/27/2006 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: 10/27/2006 6:46:47 AM
Comment:
what's the roll of grid.row and grid.column in controls that contains in cansvas tags?
Title: Animations in XAML   
Name: Keyvan Nayyeri
Date: 10/25/2006 12:36:20 AM
Comment:
Fourth part of these tutorials about Animations in XAML:
http://aspalliance.com/1050_Animations_in_XAML
Title: Resources in XAML   
Name: Keyvan Nayyeri
Date: 10/12/2006 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: 10/10/2006 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: 10/9/2006 2:08:59 PM
Comment:
First part of these tutorials, Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 
Learn More
.NET Tools
asp.net shopping cart
asp.net chart control






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


©Copyright 1998-2009 ASPAlliance.com  |  Page Processed at 1/7/2009 11:16:41 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search