Please use FireFox to view this page

This website has been designed for use with the FireFox browser. Please use FireFox to view this page.

To date, all the examples have shown the user interface elements originating at the top left corner of the application. You can use a Canvas object to place controls elsewhere on the application. XAML supports Java-style control placement, through the use of combinations of panels such as DockPanel, FixedPanel, GridPanel, FlowPanel and TextPanel. The advantage of using panels over absolute positioning is that when the form is resized, the controls reposition themselves to fit the form, however, absolute positioning gives better control over where controls are placed on the form. The following example places a Canvas object at position 100,100, and draws a Text object into the top left of this Canvas.

<Canvas ID="root"
xmlns="http://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition">
<Button ID="btn2" Canvas.Top="165" Canvas.Left="200">Click here</Button>
</Canvas>

The result of this XAML file is that shown in Figure 1.2

>
Figure 1.2

Of course, Buttons and Text are only two controls from a wide array of different form elements that can be used in XAML. Figure 1.3 below shows an example form containing a variety of supported user interface elements.

• Menu & Submenu items, created by a root <Menu> element with child <MenuItem> elements. The Header attribute defines the text displayed
• Button, created by the <Button> element.
• Editable Drop down list, created by the <ComboBox > element.
• Check Box, created by the <CheckBox> element
• Scroll Bar, created by the < HorizontalScrollBar> element. A VerticalScrollBar can also be used.
• Slider Bar, created by the <HorizontalSlider> element. A VerticalSlider can also be used.
• Hyper Link, created by the <HyperLink>
• List Box, created by the <ListBox> element
• Radio Button, created by the <RadioButton> element
• Editable Text Box, created by the <TextBox> element

The controls are laid out using a combination of a DockPanel and FlowPanels.
The DockPanel is used to pack controls to the top of the current canvas, using DockPanel.Dock="Top". In order to place a textual description next to each control, a FlowPanel is used to position the text opposite the control. When controls are placed in a FlowPanel, they shift any other elements previously residing in the Panel right by an amount equal to the width of the newly added control.
Page 1  Page 3