Introduction
In Windows Presentation Foundation, the screens are built with a dialect of XML called Extensible Markup Language (XAML). XML is data centric and is viewed as a technology in its own right. Data on certain web pages or a web service request (response message) is in the form of an XML document. Any data (any alphanumeric character) is tagged, as the rules for XML are very strict. That is, controls, images, or any item that are marked up on a page via HTML comprises the presentation content. Alphabetic letters or numbers are separately tagged via XML. The idea is to separate the presentation content on a web page from the data. This outputs a more dazzling-looking page. XAML is more declarative than imperative. By declarative, I mean that a control is specified as an XML element with attributes and sub-elements to describe what the control will look like. You do not have to be concerned with how this done because when you tell WPF what you want, it will figure out how to build the controls (instantiating objects and assigning properties) under the hood. This parallels dragging and dropping a control onto a Windows Form. The partial classes enable code to be generated, where the developer is only responsible for writing the event handler code. In addition, the designer is split between a graphical design surface on top and XAML on the bottom. The designer works the same as Windows Forms in that you can drag and drop controls onto it and edit them in the Properties window. But XAML is new, and we therefore must take a close look at XAML and define some terms that are used in WPF.
In Windows Forms, everything translates directly into code. However, WPF translates its user interface to XAML, which gets compiled into code later. This is a key distinction: XAML compiles into a binary form called BAML. At this point, however, it is not necessary to go into a description of BAML Just note that when working in the UI designer for a WPF project, Visual Studio 2008 produces XAML, instead of code for all UI elements.
<Window x:Class="MainWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>
The XAML defines a window with a title, dimensions, and an empty grid. A later section on layout explains the grid. Because it's XML, you also have namespaces: xmlns and xmlns:x. Windows are often associated with a code-behind file, which is C#. But where does the C# code come into play? WPF uses events, just like Windows Forms, so you need a place for the handlers to go, which is the code-behind.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
}
Notice that the Window1 class in the code-behind is partial and that its constructor calls InitializeComponent. In Windows Forms, the InititalizeComponent was in a separate file that you could get to. However, WPF generates InitializeComponent from the XAML. You see, WPF will ensure that the XAML creates a partial class named Window1 with an InitializeComponent method, and then C# will combine and compile the partials. If you get an error message that underlines the InitializeMethod, then drag your mouse over that underline noting the error. A box should appear that when clicked, gives you the option to generate a "stub method" to correct the error.
XAML Controls
XAML has all the controls you've come to expect from Windows—buttons, check boxes, radio buttons, list boxes, combo boxes, menus, scroll bars, sliders, and so on. This sample demonstrates some of the common controls provided in Longhorn. You can see the results in below figure
Figure . An example of XAML controls
<Border
xmlns="http://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond" >
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Header="New" />
<MenuItem Header="Open" />
</MenuItem>
<MenuItem Header="Edit">
<MenuItem Header="Cut"/>
<MenuItem Header="Copy"/>
<MenuItem Header="Paste"/>
</MenuItem>
</Menu>
<FlowPanel>
<Button> Button </Button>
<Border Width="15"/>
<CheckBox Checked="true"> CheckBox </CheckBox>
<Border Width="15"/>
<RadioButtonList>
<RadioButton> RadioButton 1 </RadioButton>
<RadioButton Checked="true"> RadioButton 2 </RadioButton>
<RadioButton> RadioButton 3 </RadioButton>
</RadioButtonList>
<Border Width="15"/>
<ListBox>
<ListItem> ListItem 1 </ListItem>
<ListItem> ListItem 2 </ListItem>
<ListItem> ListItem 3 </ListItem>
</ListBox>
<Border Width="15"/>
<ComboBox>
<ListItem> ListItem 1 </ListItem>
<ListItem> ListItem 2 </ListItem>
<ListItem> ListItem 3 </ListItem>
</ComboBox>
<Border Width="15"/>
<DockPanel>
<VerticalSlider DockPanel.Dock="Top" Height="200"
Minimum="0" Maximum="255" Value="75"
SmallChange="1" LargeChange="16"/>
<Text DockPanel.Dock="Bottom">Slider</Text>
</DockPanel>
<Border Width="15"/>
<DockPanel>
<VerticalScrollBar DockPanel.Dock="Top"
Minimum="0" Maximum="255" Value="125" Height="200"
SmallChange="1" LargeChange="16"/>
<Text DockPanel.Dock="bottom">ScrollBar</Text>
</DockPanel>
<Border Width="15"/>
<TextBox> TextBox </TextBox>
</FlowPanel>
</DockPanel>
</Border>
XAML also allows you to combine elements and controls to create rich effects. We call this combining of elements control composition, and it is one of the most powerful aspects of Longhorn. For instance, to create a button with an image, you put an Image element inside Button:
<Button>
<Image Source="tulip.jpg"/>
</Button>
To have both an image and text in the Button, as you can see in Figure 3-11, we use our old friend DockPanel:
<Button>
<DockPanel>
<Image Source="tulip.jpg"/>
<Text DockPanel.Dock="fill" VerticalAlignment="center"> Button
<Italic>with Image!</Italic>
</Text>
</DockPanel>
</Button>
Figure : A button with an image and text
You can put pretty much anything inside anything, including this strange example of a CheckBox inside a Button:
<Button>
<CheckBox Checked="true"> CheckBox </CheckBox>
</Button>
Composition is powerful enough that many of the Longhorn controls are actually defined using composition. For instance, a ScrollBar is actually two buttons and a slider, plus some event handler logic to hook them together.
XAML also includes some control "primitives," which are primarily used with control composition to build larger effects. For instance,ScrollViewer takes one child (typically a panel) and adds scroll bars to it. This example places a very large list of CheckBox elements inside aScrollViewer, something which prior to Longhorn required a separate control such as Windows Forms' CheckedListBox:
<Border BorderThickness="1" BorderBrush="black">
<ScrollViewer Height="100" Width="200">
<GridPanel Columns="1">
<CheckBox Checked="true"> CheckBox 1</CheckBox>
<CheckBox Checked="true"> CheckBox 2</CheckBox>
<CheckBox Checked="true"> CheckBox 3</CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
</GridPanel>
</ScrollViewer>
</Border>