Section 4.5. Absolute Positioning


4.5. Absolute Positioning

Thus far, StackPanel, DockPanel, and Grid elements have been used to position elements on the Page. Positioning with these Panel elements is a purely relative positioning strategy and offers no control over the x- and y-coordinate values of the element's position. Like CSS, relative positioning is used to allow elements to flow and reposition in the event that the page size changes. There are times, however, when absolute positioning is desired. XAML supports absolute positioning through the use of the Canvas element.

All elements on a Canvas element must be absolutely positioned or they will stack on top of one another. Absolute positioning is accomplished using the attached attributes of Canvas, namely Top, Left, Bottom, and Right.

If specified, the attached attributes Top or Left take priority over Bottom or Right.


The coordinate system used to position elements places 0,0 in the upper-left corner of the Canvas. Values specified for Top, Left, Bottom, and Right are relative to the Canvas, not the Page. If the Page contains only a single Canvas, then the value is relative to both, but only because the Canvas ends up positioned with 0,0 in the same place as 0,0 on the Page.

So, absolute positioning is actually relative, in an absolute kind of way. An example is probably in order after that mouthful. Figure 4-13 shows the relativity of absolute positioning. A Canvas has been added to a Canvas, specifying Top and Left values of 100 and 200, respectively. The unboxed coordinates are Label elements added to the parent Canvas, while the boxed coordinates are those added to the second Canvas. The Labels were added with the same Top and Left coordinates, but you can see that the Labels added to the second (the child) Canvas are offset. The code producing Figure 4-13 is shown in Example 4-6.

Figure 4-13. Canvas inside canvas, illustrating absolute positioning


Example 4-6. Canvas inside canvas, showing relative absolute positioning

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005">     <Canvas>     <Canvas         Canvas.Top="100"         Canvas.Left="200">         <Label Canvas.Top="0" Canvas.Left="0" Background="Red">0,0</Label>         <Label Canvas.Top="0" Canvas.Left="100" Background="Red">0,100</Label>         <Label Canvas.Left="50" Canvas.Top="50" Background="Red">50,50</Label>         <Label Canvas.Left="100" Canvas.Top="100" Background="Red">100,100</Label>         <Label Canvas.Left="0" Canvas.Top="100" Background="Red">0,100</Label>     </Canvas>         <Label Canvas.Top="0" Canvas.Left="0">0,0</Label>         <Label Canvas.Top="0" Canvas.Left="100">0,100</Label>         <Label Canvas.Left="50" Canvas.Top="50">50,50</Label>         <Label Canvas.Left="100" Canvas.Top="100">100,100</Label>         <Label Canvas.Left="0" Canvas.Top="100">0,100</Label>     </Canvas> </Page> 

The rule is that even when using absolute coordinate values to specify the position of an element, the positioning is relative to its immediate parent element. An element considers its parent's layout area to be the whole world. Therefore, the positioning is absolute from the viewpoint of the element but could be relative from the view of the XAML developer. Didn't realize you were going to have to study philosophy to become a XAML developer, did you?

Example 4-7 shows how to use a Canvas element to position the elements required for the user-login interface. Each element must specify at least one of the attached attributes of Canvas in order to position itself correctly within the Canvas element. An element references an attached attribute by using the syntax ElementName.AttachedAttribute. In our example, Canvas.Top is declared for each element, assigning an appropriate value to position the elements on the canvas. The result, shown in Figure 4-14, is strikingly similar to the one defined using relative positioning with StackPanel.

Example 4-7. Using a Canvas to absolutely position elements

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005">     <Canvas         Margin="20 "         HorizontalAlignment="Left "         VerticalAlignment="Top ">         <Label             Canvas.Top ="10 "             HorizontalAlignment="Left "             Width="100 ">Username </Label>         <TextBox             Canvas.Top ="30 "             Margin="0 0 0 10"              Width="150 ">username@example.com</TextBox>         <Label             Canvas.Top ="80 "             HorizontalAlignment="Left "             Width="100 ">Password </Label>         <PasswordBox             Canvas.Top ="100 "             Margin="0 0 0 10 "             Width="150 "></PasswordBox>         <Button             Canvas.Top ="150 "             Margin="0 0 0 10 "             Content="Submit " />     </Canvas> </Page> 

Figure 4-14. User-login interface created using Canvas and absolute positioning


You can mix and match the attached properties of Canvas to position elements exactly where you want them. By specifying Canvas.Top and Canvas.Left for the text field elements in the user interface (Example 4-8), the fields will line up, presenting a more typical user interface.

Example 4-8. Aligning elements using multiple attached properties of Canvas

 <TextBox             Canvas.Top ="10 "             Canvas.Left="70"              Margin="0 0 0 10"              Width="150 ">username@example.com</TextBox> <PasswordBox             Canvas.Top ="80 "             Cavas.Left="70"              Margin="0 0 0 10 "             Width="150 "></PasswordBox> 

Setting Canvas.Top for each text field element to the same value as that specified for its Label lines up the elements vertically. Changing Canvas.Left modifies the anchor point of the left edge of the elements and lines the elements up with their respective labels (Figure 4-15).

Another way to accomplish this task is to group the label and field together in a StackPanel using a horizontal Orientation and then add the panel to the parent Canvas. This method has the benefit of aligning the elements in the StackPanel automatically and keeping them together as you move the panel around the Canvas. Don't forget that the stack panels must specify an absolute location on the Canvas or they'll stack on top of each other.

Figure 4-15. User interface with labels and elements aligned


Example 4-9 shows possible XAML code for this technique. Notice that the absolute position is not specified for each element; only the StackPanel has a Canvas.Top declaration.

Example 4-9. Using StackPanel to group elements for absolute positioning

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005">     <Canvas         Margin="20"         HorizontalAlignment="Left"         VerticalAlignment="Top">         <StackPanel Orientation="Horizontal">             <Label                 HorizontalAlignment="Left"                 Width="100">Username             </Label>             <TextBox                 Margin="0 0 0 10"                 Width="150">username@example.com             </TextBox>         </StackPanel>         <StackPanel Orientation="Horizontal" Canvas.Top="50">             <Label                 HorizontalAlignment="Left"                 Width="100">Password             </Label>             <PasswordBox                 Margin="0 0 0 10"                 Width="150">             </PasswordBox>         </StackPanel>         <Button             Canvas.Top="150"             Margin="0 0 0 10"             Content="Submit" />     </Canvas> </Page> 

Unlike most fat-client programming models, individual elements cannot be absolutely positioned on their own. There are no Left or Right values for controls and elements such as Button, so the only way they can be positioned on the screen is by adding them to a container such as Canvas that offers a mechanism for absolute positioning.

Remember that although absolute positioning with elements such as Canvas can aid in designing your user interface, it can hamper localization efforts (as with hardcoding String values).

Next on the list of topics is styles and how to apply them globally, rather than locally, on each individual element. Chapter 5 will explore how to harness the power of XAML resources.




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