Browse DevX
Sign up for e-mail newsletters from DevX


An Overview of Windows Presentation Foundation : Page 2

Among the numerous new technologies in Vista is the Windows Presentation Foundation (WPF, formerly codenamed Avalon). This article takes you on a whirlwind tour of WPF and shows how you can start preparing for Vista by developing applications today using the available SDK.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

XAML Layout Patterns
XAML supports a few layout patterns for UI controls, and the one just shown uses the Canvas layout. The Canvas layout pattern is similar to what you have today in Windows Forms. The controls in a Canvas layout are positioned using the x and y coordinates. The Canvas layout is useful in cases where you need to precisely position the various controls on the UI.

You may have noticed that in the Canvas element there is a LayoutTransform attribute. This attribute allows you to scale the output by simply specifying the scale factor. For example, if you specify a factor of 0.5 (LayoutTransform="scale 0.5"), then the entire Canvas layout would shrink by 50 percent (see Figure 3).

Figure 3: Using LayoutTransform to shrink the output.
Besides the Canvas layout, there are a few other layouts available in XAML. They are:

  • StackPanel
  • DockPanel
  • Grid
I'll now describe the various layouts.

A StackPanel layout positions controls like they are on a stack. You can stack controls vertically or horizontally. The XAML code below shows how the StackPanel works.

<StackPanel xmlns= "http://schemas.microsoft.com/winfx/avalon/2005" Background="Ivory" LayoutTransform="scale 1" Orientation="Vertical" > <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Label Margin="10,5,5,5" Height="30" BorderBrush="Crimson" BorderThickness="1"> Image Source</Label> <TextBox Margin="5,5,5,5" Height="30"></TextBox> <Button Margin="5,5,5,5" Height="30">OK</Button> </StackPanel> <StackPanel Orientation="Horizontal" VerticalAlignment="Top">

Figure 4: Using the StackPanel layout.
<Image Margin="10,5,10,5" VerticalAlignment="Bottom" Width="400" > <Image.Source> <BitmapImage UriSource="C:\Sunset.jpg" /> </Image.Source> </Image> </StackPanel> </StackPanel>
Figure 4 shows the output of the XAML code above.

A DockPanel layout docks controls on either one of the four sides (Top, Left, Right, or Bottom) of a DockPanel control. The XAML code in below shows how to dock four Button controls using the DockPanel.Dock attribute.

Figure 5: Using the DockPanel layout.

<DockPanel xmlns= "http://schemas.microsoft.com/winfx/avalon/2005" Background="Ivory" LayoutTransform="scale 1" > <Button Margin="5,5,5,5" Height="30" Width="80" DockPanel.Dock="Left">Left</Button> <Button Margin="5,5,5,5" Height="30" Width="80" DockPanel.Dock="Right">Right</Button> <Button Margin="5,5,5,5" Height="30" Width="80" DockPanel.Dock="Top">Top</Button> <Button Margin="5,5,5,5" Height="30" Width="80" DockPanel.Dock="Bottom">Bottom</Button> <Image Margin="10,5,10,5" Width="400" > <Image.Source> <BitmapImage UriSource="C:\Sunset.jpg" /> </Image.Source>

Figure 6: Using Grid layout.
</Image> </DockPanel>
Figure 5 shows the output of the preceding code.

The Grid layout allows controls to be positioned in cells, just like in a grid. The XAML code in Listing 1 shows how to define a grid with three columns and four rows, and then add twelve Button controls to each cell within the grid. Figure 6 shows the output for the XAML code shown above.

Thanks for your registration, follow us on our social networks to keep up-to-date