Section 4.3. Margins and Padding


4.3. Margins and Padding

If you're familiar at all with CSS, then you're familiar with the concept of padding and margins. Padding and margins assist user-interface designers in positioning elements and content in elements. The two attributes are both described by a Thickness element but serve different purposes in layout.

Margin describes the distance between the element and its children or peers. It is used to position elements relative to other elements. Using abbreviated markup syntax, you can specify its thickness as a uniform distance around the element, e.g., Margin="20", or as the distance in each individual direction in terms of left, top, right, and bottom (in that order), e.g., Margin="20, 10, 20, 10".

Margin is one of the elements that does not require commas in its abbreviated markup. It can be described using either comma- or space-separated values.


Specifying a Margin value on the StackPanel in our user-login example will only change the distance between the StackPanel and the edges of the Page. To illustrate the concept of Margin, examine Figure 4-10. A second StackPanel has been added, containing the same elements for the user-login interface as well as borders to illustrate the Margin property at work. (In order to produce a side-by-side comparison of two StackPanel elements, both were enclosed in a DockPanel.) The black-bordered StackPanel has no Margin at all, while the lighter-bordered StackPanel has a uniform Margin of 20 device-independent pixels. You can see the difference in the positioning of the elements in relation to their children. The Margin of 20 has offset all the elements by 20 pixels, moving them away from the edge of the StackPanel.

Figure 4-10. Using Margin versus no Margin to lay out elements


Example 4-4 shows the code used to produce Figure 4-10.

Example 4-4. Using Margin to position elements

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005">     <DockPanel>         <Border             BorderBrush="Black "             BorderThickness="5 ">             <StackPanel                 HorizontalAlignment="Left ">                 <Label                     HorizontalAlignment="Left "                     Width="100 ">Username </Label>                 <TextBox                     Width="150 ">username@example.com</TextBox>                 <Label                     HorizontalAlignment="Left "                     Width="100 ">Password </Label>                 <PasswordBox                     Width="150 "></PasswordBox>                 <Button                     Content="Submit " />             </StackPanel>         </Border>         <Border             BorderBrush="Red "             BorderThickness="5 ">             <StackPanel                 HorizontalAlignment="Left "                 Margin ="20 ">                 <Label                     HorizontalAlignment="Left "                     Width="100 ">Username </Label>                 <TextBox                     Margin ="0 0 0 10 "                     Width="150 ">username@example.com</TextBox>                 <Label                     HorizontalAlignment="Left "                     Width="100 ">Password </Label>                 <PasswordBox                     Margin ="0 0 0 10 "                     Width="150 "></PasswordBox>                 <Button                     Margin ="0 0 0 10 "                     Content="Submit " />             </StackPanel>         </Border>     </DockPanel> </Page> 

Setting the Margin on the StackPanel did nothing for the crowded appearance of its child elements. That's because the margin of the StackPanel only affects the StackPanel itself, not elements contained within it. The Margin must be set on every element you wish to reposition in order to achieve a less-crowded appearance (Figure 4-11).

The disadvantage of specifying a Width for elements is that it can be detrimental to localization efforts. The word "submit" in English is fairly short, but in another language it may consist of several words or a much longer string. Specifying a Width means that the Button will likely need to be sized according to the longest possible content it will contain; it may look awkward when using other languages with shorter or longer content strings.


Padding is similar to Margin in most respects, except that it is only exposed on three elements: Block, Border, and Control. Since Control is the base class for almost all user-input elements, it can be used on most user-interface elements. The Padding attribute determines the distance between the outer edge of the control and its child elements. Like Margin, Padding is defined as a Thickness and can be declared using abbreviated markup syntax. Setting the Padding attribute effectively changes the element's size to accommodate the additional space separating the edge of the element and its content.

Figure 4-11. User-login page after applying a Margin to input elements


Figure 4-12 duplicates the user-login panel and uses a border to accentuate the difference between the elements on the left, which have no Padding attribute specified, and the elements on the right, which do. The Padding for the elements on the first Label, TextBox, and Button has been specified as a uniform thickness of 10 (Padding="10").

Figure 4-12. Applying the Padding attribute to the user-login page


The Padding attribute increases the size of the elements on the right to accommodate a 10-pixel distance between the outer edge of the elements and their content.




XAML in a Nutshell
XAML in a Nutshell (In a Nutshell (OReilly))
ISBN: 0596526733
EAN: 2147483647
Year: 2007
Pages: 217

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net