How to Edit XAML

Editing XAML

Now that we’ve seen the wonder that is declarative UI description in XAML, you

may wonder, “Do I get all the fun of editing the raw XML, or are there some tools

that can join in the fun, too?” The answer is “sort of.” For example, if you’ve got the

.NET Framework 3.0 extensions for Visual Studio 2005 (the same extensions that give

you the WPF project templates in VS05), you will have a visual editor for XAML files

that works very similarly to the built-in Windows Forms Designer. It will trigger by

default when you double-click a file in the Solution Explorer, or you can right-click on a XAML file in the Solution Expression and choose Open With. One of the options

offered will be “WPF Designer (Cider)” (where “Cider” is the codename for the WPF

Designer still under development). The WPF Designer allows for drag-and-drop-style

construction of XAML files with elements from the Toolbox and setting properties in

the property browser. In addition, you can see the XAML as the designer makes

changes, and in fact, you can make changes in the XAML view itself and see those

reflected in the designer. Figure 1-6 shows the WPF Designer in action.

WPF itself was created as a unified presentation framework, meant to enable building

Windows applications with the best features from existing Windows application

practice and existing web application practice. One of the nice things that web applications

provide is a single window showing the user one page of content/functionality

at a time, allowing for navigation among the pages. For some applications, including

Internet Explorer, the shell Explorer, Microsoft Money, and a bunch of Control Panel

applets, this is thought to be preferable to the more common Windows application

practice of showing more than one window at a time.

To enable more of these kinds of applications, WPF provides the page, which is the

unit of navigation in an XML Browser Application (XBAP). Instead of setting an

application’s StartupUri to a XAML file that defines a window, we point an XBAP’s

StartupUri at a XAML file that defines a page.

Example . Starting with a Page instead of a Window

<!-- App.xaml -->

<Application

x:Class="MyFirstXbapApp.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="Page1.xaml" />

Example . A sample page

<!-- Page1.xaml -->

<Page

x:Class="MyFirstXbapApp.Page1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

WindowTitle="Page1">

<TextBlock FontSize="36">

Check out <Hyperlink NavigateUri="page2.xaml">page 2</Hyperlink>, too.

</TextBlock>

</Page>

// Page1.xaml.cs

...

namespace MyFirstXbapApp {

public partial class Page1 : System.Windows.Controls.Page {

public Page1( ) {

InitializeComponent( );

}

}

}

The primary way to allow the user to navigate in an XBAP is via the Hyperlink element,

setting the NavigateUri to a relative URL of another XAML page in the project.

As you might imagine, there are many more topics to discuss to make your XBAPs

integrate with the browser and still provide the rich functionality we expect from

WPF applications. In addition, you can have any number of navigation windows in

your standalone WPF applications.

XAML Property Element Syntax

Although setting the Content property as an XML attribute works just fine for specifying

a string as a property, it doesn’t work at all well for specifying a subelement,

like the image example. For this reason, XAML defines the property element syntax,

which uses nested Element.Property elements for specifying objects as property values.

For instance, Example shows the property element syntax for the string setting

of a button’s content.

Example . Property element syntax with a string

<Button Width="100" Height="100">

<Button.Content>Hi</Button.Content>

</Button>

Example . Property element syntax with an image

<Button Width="100" Height="100">

<Button.Content>

<Image Source="tom.png" />

</Button.Content>

</Button>

Example . You can’t have multiple things in a ContentControl

<Button Width="100" Height="100">

<!-- WARNING: doesn't work! -->

<Button.Content>

<TextBlock>Tom: </TextBlock>

<Image Source="tom.png" />

</Button.Content>

</Button>