Translate

Wednesday, 31 July 2013

How XAML Markup Extensions Works

XAML Markup Extensions

Before we take a look at the results of our data binding, let’s take a moment to discuss
XAML markup extensions, which is what you’re using when you set an attribute
to something inside of curly braces (e.g., Text="{Binding Path=Name}"). Markup
extensions add special processing to XAML attribute values. For example, this:
<TextBox Text="{Binding Path=Name}" />
is just a shortcut for this (which you’ll recognize as the property element syntax):
<TextBox.Text>
<Binding Path="Name" />
</TextBox.Text>


Data Templates


With the data binding markup syntax explained, let’s turn back to our example data
binding application, which so far doesn’t look quite like what we had in mind,It’s clear that the data is making its way into the application, because the currently
selected name and nickname are shown for editing. The problem is that, unlike the
TextBox controls, which were each given a specific field of the Nickname object to show,
the ListBox is expected to show the whole thing. Lacking special instructions, it’s calling
the ToString method of each object, which results in only the name of the type. To
show the data, we need to compose a data template.

Example . Using a data template
<ListBox
ItemsSource="{Binding}"
IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<TextBlock Text="{Binding Path=Name}" />:
<TextBlock Text="{Binding Path=Nick}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

A data template is a set of elements that should be inserted somewhere. In our case,
we are specifying a data template to be inserted for each listbox item by setting the
ItemTemplate property. In Example, we’ve composed a data template from a text block that flows together two other text blocks, each bound to a property on a
Nickname object separated by a colon, At this point, we’ve got a completely data-bound application. As data in the collection
or the individual objects changes, the UI will be updated, and vice versa. However,
there is a great deal more to say on this topic, including binding to XML and
relational data, master-detail binding, and hierarchical binding.


Dependency Properties



Although our data source Nickname object made its data available via standard .NET
properties, we need something special to support data binding on the target element.
Even though the TextContent property of the TextBlock element is exposed
with a standard property wrapper, in order for it to integrate with WPF services like
data binding, styling, and animation, it also needs to be a dependency property. A
dependency property provides several features not present in .NET properties,
including the ability to inherit its value from a container element, provide for objectindependent
storage (providing a potentially huge memory savings), and change
tracking.
Most of the time, you won’t have to worry about dependency properties versus .NET
properties.

Resources

Resources are named chunks of data defined separately from code and bundled with
your application or component. .NET provides a great deal of support for resources,
a bit of which we already used when we referenced tom.png from our XAML button
earlier in this chapter. WPF also provides special support for resources scoped to elements
defined in the tree.
As an example, let’s declare some default instances of our custom Nickname objects in
XAML 
Notice the Window.Resources, which is property element syntax to set the Resources
property of the Window1 class. Here we can add as many named objects as we like,
with the name coming from the Key attribute and the object coming from the XAML
elements (remember that a XAML element is just a mapping to .NET class names).
In this example, we’re creating a Nicknames collection named names to hold three
Nickname objects, each constructed with the default constructor, and then setting
each of the Name and Nick properties.
Also notice the use of the StaticResource markup extension to reference the names
resource as the collection to use for data binding. With this XAML in place, our window
construction reduces to the code shown in Example 

Example . Declaring objects in XAML
<!-- Window1.xaml -->
<Window ... xmlns:local="clr-namespace:DataBindingDemo" />
<Window.Resources>
<local:Nicknames x:Key="names">
<local:Nickname Name="Don" Nick="Naked" />
<local:Nickname Name="Martin" Nick="Gudge" />
<local:Nickname Name="Tim" Nick="Stinky" />
</local:Nicknames>
</Window.Resources>
<DockPanel DataContext="{StaticResource names}">
<TextBlock DockPanel.Dock="Top" Orientation="Horizontal">
<TextBlock VerticalAlignment="Center">Name: </TextBlock>
<TextBox Text="{Binding Path=Name}" />
<TextBlock VerticalAlignment="Center">Nick: </TextBlock>
<TextBox Text="{Binding Path=Nick}" />
</TextBlock>
...
</DockPanel>
</Window>

Example . Finding a resource in code
public partial class Window1 : Window {
Nicknames names;
public Window1( ) {
InitializeComponent( );
this.addButton.Click += addButton_Click;
// get names collection from resources
this.names = (Nicknames)this.FindResource("names");
// no need to make data available for binding here
//dockPanel.DataContext = this.names;
}
void addButton_Click(object sender, RoutedEventArgs e) {
this.names.Add(new Nickname( ));
}
}

Now instead of creating the collection of names, we can pull it from the resources 
with the FindResource method. Just because this collection was created in XAML 
doesn’t mean that we need to treat it any differently than we treated it before, which 
is why the Add button event handler is the exact same code. Also, there’s no need to 
set the data context on the dock panel because that property was set in the XAML. 
For the full scoop on resources, including resource scoping and lookup, static and 
dynamic binding to resources, and using resources for theming and skinning,


Wednesday, 3 July 2013

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>