Académique Documents
Professionnel Documents
Culture Documents
com
CONTENTS INCLUDE:
n
n
XAML
Markup Extensions Getting Started with
Windows Presentation Foundation
n
Controls
n
Panels
n
Data Binding
Events and more...
By Christopher Bennage and Rob Eisenberg
n
XAML
map to properties, you may be wondering how you would 3. Most extensions have a default value, which will be passed into the
extension’s constructor. In this example that value is the resource key,
set a property with a complex value; one that could not be
“myBrush.”
expressed as an attribute. This is accomplished by using
Property Element Syntax, demonstrated by the Grid. Any read/write property on the extension class can also be
RowDefinitions element. A Grid is a Panel composed of set in XAML. These properties can even be set using other
children arranged in columns and rows. To declare the rows in extensions! Here’s a typical databinding sample:
a Grid, you set its RowDefinitions property, which is a collection
of RowDefinition objects. In XAML, you can turn any property <TextBox Text=”{Binding Source={StaticResource myDataSource},
Path=FirstName, UpdateSourceTrigger=PropertyChanged}”
into an element using the syntax TypeName.PropertyName, />
as we have done with Grid.RowDefinitions. By combining
Notice that we set the Source property of the BindingExtension
Property Attribute Syntax and Property Element Syntax with
using another MarkupExtension, StaticResourceExtension. We
the conventions of the Content Model you can represent almost
then set two additional properties on the BindingExtension.
any object hierarchy. Additionally, there is another common
markup usage demonstrated: Attached Properties. You can Table 1 shows several of the most common built-in extensions
see them on the Button declarations. WPF enables containing along with their purpose:
elements to attach information to their children using the
pattern ParentType.AttachedProperty. In this case, the Grid. Extension Description
Row properties tell the parent Grid where to place each Button. {StaticResource} Injects a previously defined resource into markup.
Despite the flexibility of the XAML syntax, there are still many {x:Static} References static variables.
scenarios that are tricky to accomplish with standard XML. To {x:Type} References instances of a Type object.
address this issue, XAML offers Markup Extensions. Here’s a {x:Null} Represents a Null value.
typical example:
In addition to what XAML provides out-of-the-box, you can
<Window x:Class=”MarkupExtensionSamples.Window1” create your own markup extensions. All you have to do is
xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” derive your class from MarkupExtension. For example:
Title=”Window1”
Height=”300”
public class HelloExtension : MarkupExtension
Width=”300”>
{
<Window.Resources>
private readonly string _name;
<SolidColorBrush x:Key=”myBrush”Color=”Red” />
</Window.Resources>
public HelloExtension(string name)
<Grid>
{
<Button Background=”{StaticResource myBrush}”
_name = name;
Margin=”10”
}
Content=”Background from StaticResource”/>
</Grid>
public override object ProvideValue(IServiceProvider
</Window>
serviceProvider)
{
return “Hello “ + _name + “! Nice to meet you.”;
}
}
<Window x:Class=”MarkupExtensionSamples.Window1”
xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”clr-namespace:MarkupExtensionSamples”
Title=”Window1”
Height=”300”
Width=”300”>
<TextBox Text=”{local:Hello Fauntleroy }” />
</Window>
These controls all look and behave according to traditional Missing Controls
desktop UI metaphors. However, the nature of controls in There are a number of controls that you might expect to be
WPF is very different from traditional UI frameworks. You can present in WPF that are not. The most obvious examples
completely redefine the look of a control in WPF without are DataGrid, DatePicker, Calendar, and charting controls.
altering its behavior. You can do this using Control Templates. Microsoft has chosen to release these controls separately from
the .NET platform itself. They are available as part of the WPF
The most common scenario for manipulating a control
Toolkit on CodePlex (http://www.codeplex.com/wpf). You’ll
template is changing the way a button looks. All controls have
also find the official Ribbon control on CodePlex. Look for
a Template property. Let’s examine the following XAML:
most of these controls to join the platform in version 4.0.
<Button Content=”Click Me”>
<Button.Template>
Lookless Controls
<ControlTemplate TargetType=”Button”> Two of the most important controls in WPF are the
<StackPanel Orientation=”Horizontal”
Margin=”4”> ContentControl and the ItemsControl. These controls do not
<Ellipse Width=”16”
Height=”16”
have any defined look. They rely on a concept called Data
Fill=”Blue” Templates. Data templates are similar to control templates,
Margin=”0 0 4 0” />
<Border Background=”LightBLue” except that instead of targeting a specific control, they target a
CornerRadius=”4” specific type.
Padding=”4”>
<ContentPresenter />
</Border> With a ContentControl, you can set the Content property to an
</StackPanel> instance of any class. Then you can define a data template that
</ControlTemplate>
</Button.Template> is specific to that class. Say that we have a simple class like this
</Button>
one:
Using the Property Element Syntax, we set the button’s public class Person
template to an instance of ControlTemplate. The TargetType {
public string FirstName { get; set; }
is necessary to tell the control template what sort of control public string LastName { get; set; }
it will be applied to. Control templates require this because public int Age { get; set; }
}
they typically exist independent of the controls themselves.
The content of a control template can be just about anything. We can define a data template is our resources:
This demonstrates the compositional nature of WPF. A control
<DataTemplate x:Key=”personTemplate”>
template can be composed of any other WPF elements, even <StackPanel>
<TextBlock Text=”{Binding FirstName}” />
another Button control. <TextBlock Text=”{Binding LastName}” />
<TextBlock Text=”{Binding Age}” />
Below is an example of how this XAML will render compared to </StackPanel >
a plain button.
You can also define an instance of Person in the resources:
Ellipse and its siblings are shapes. Shapes are a convenient <DataTemplate DataType=”{x:Type local:Person}”>
<StackPanel>
set of classes for drawing basic shapes within the UI. <TextBlock Text=”{Binding FirstName}” />
<TextBlock Text=”{Binding LastName}” />
Border is an element that you will encounter frequently. It is <TextBlock Text=”{Binding Age}” />
</ StackPanel>
used to decorate other elements with a border. It is also the </DataTemplate>
quick way to put rounder corners around an element.
Depending on where this data template was stored, you could
ContentPresenter is a special element that is used when you now do the following:
are constructing control templates. It is a placeholder for the <ContentControl Content=”{Binding Source={StaticResource myPerson}}” />
actual content of the control. For example, we set the Content
property of our Button to “Click Me”. This content was injected We’ll discuss DataContext in the section on Data Binding.
into our template where we placed the ContentPresenter. The ItemsControl is very similar to ContentControl, except
It’s also interesting to note, that if we had omitted the that it binds to a collection of objects using the ItemsSource
ContentPresenter then our control template would simply have property. In fact, if we bound it to a collection of Person
ignored the content. instances, the same data template would be applied.
Control templates are especially powerful when they are used <ItemsControl ItemsSource=”{Binding Source={StaticResource
myPersonCollection}}” />
in combination with WPF’s styles and resources.
Of course, you can also explicitly designate the template: In this example, we have two text boxes. We gave the name
mySource to the first text box so that we can reference it in the
<ItemsControl ItemsSource=”{Binding Source={StaticResource
myPersonCollection}}” binding. The binding itself is a value that we are setting to the
ItemTemplate=”{StaticResource personTemplate}” />
Text property of the second text box. We’re using the markup
These two controls combined with data templates are very extension Binding to define it. This is not the only way to
powerful. They are an essential part of Separated Presentation declare bindings, but it is the most common.
patterns such as MVVM or Presentation Model.
We need to tell our binding where to locate its source data.
We do this using the property ElementName to reference the
PANELS
source element. Next, we need to identify what property on
mySource we’d like to use. The Path property on the binding
You’ve already seen a couple of panels, namely the
allows just that. We can use it to draw a link from the source
StackPanel and Grid. Panels are UI elements that provide
to the actual bit of data we want to bind. In this example, the
layout functionality. They are used to layout windows, user
path is very simple.
controls, and even the standard controls that ship with WPF.
If you examine the control templates for the default controls Data Context
themes, you will find these panels everywhere. Table 2 lists the UI elements are not the only possibilities for a data source in
commonly used panels. WPF. Frequently, you’ll need to bind some business object or
view model. Nearly every element in WPF has a property called
Panel Description
DataContext. As its name implies, it provides an object that is
Canvas Allows you to place elements at specific coordinates. Typically, you will use one
of the other panels unless you have a specific need to place elements exactly.
the context for data bindings. Take a simple example derived
from the data template we discussed earlier:
DockPanel This is a versatile panel that allows you to “dock” elements to any of the four
sides. It is commonly used to layout the “shell” of an application: dock the
menu bar to the top, dock the status bar to the bottom, dock the explorer panel <TextBlock Text=”{Binding Path=FirstName}” />
to the left-hand side.
Grid Similar to a table in HTML. You define a number of rows and columns that are Because we are not explicitly providing a source, the binding
used to arrange the elements. assumes that it should use the DataContext of the TextBlock as
This is not to be confused with any data grid controls. This panel is used only for
laying out other elements. the source for the binding.
StackPanel As its name implies, this panel simply stacks elements one on top of the other.
You can also tell it to use a horizontal orientation in order to “stack” elements One wonderful characteristic of DataContext, is that it is
sideways. automatically inherited from an element’s parent. We can set
WrapPanel This panel is similar to StackPanel with a horizontal orientation except that its the DataContext once for an entire window (or some other
child elements wrap to a new row automatically when all of the horizontal space
has been used. graph of UI elements) and the data context is propagated
down to all of the child elements contained in that window.
You’ll frequently need to nest panels of various types in order
to achieve the exact layout that you desire. There are a number of ways to set the data context, however
the most direct looks like this:
The child elements of a Canvas, DockPanel, or Grid use
attached properties to interact with their parent. this.DataContext = new Person();
For example, to place a red circle inside of a Canvas at 100,200: If we place this code in the constructor for our window, then all
<Canvas Width=”800”
of the elements in our window will have a person instance as
Height=”600”> their data context.
<Ellipse Width=”32”
Height=”32”
Fill=”Red”
Canvas.Top=”100” Since Path is the default property for the Binding
Canvas.Left=”200” />
</Canvas> extension, we can (and frequently do) omit the
Hot “Path=”. Our example binding would then look like
DockPanel uses the attached property DockPanel.Dock. The Tip this:
values are Left, Top, Right, and Bottom.
<TextBlock Text=”{Binding FirstName}” />
Grid uses two attached properties: Grid.Column and Grid.Row.
The values of the properties are the index of the column and
row where you want the child element to appear. Different Sources for Bindings
There are three different types of bindings available in WPF.
You’ve already seen several examples of the most common,
DATA BINDING
which is simply called Binding.
Data binding allows you to declaratively establish a With basic binding there are four ways to specify the data
relationship between an element of the UI and some other bit source for the binding.
of data. A clear understanding of the way data binding works
in WPF will revolutionize the way you design your applications. • Simply allow the binding to use the DataContext.
We’ll start by examining a simple example of data binding. • Designate another element in the UI with ElementName.
• Explicitly provide the source using the Source property.
<StackPanel> This is useful for accessing data that is part of a static
<TextBox x:Name=”mySource” />
<TextBox Text=”{Binding ElementName=mySource, Path=Text}” /> class. For example, if we wanted to bind the number of
</StackPanel>
fonts currently installed we could do this:
<TextBlock Text=”{Binding Source={x:Static Fonts.SystemFontFamilies}, but instead of being consolidated, only a single binding from
Path=Count}” /> the collection is used. The bindings are listed in order of their
priority. The rule for determining which binding to use is:
• Finally, you can specify a RelativeSource. Use this when the
choose the highest priority binding that has resolved a value.
source of data is the same element as the target. For
This is very useful when you are binding to values that take a
example, perhaps we want the ToolTip on a ListBox to
significant amount of time to return.
report the number of items that are current in the ListBox.
We could do this: Check the official documentation for more information on how
and when to use these bindings.
ToolTip=”{Binding RelativeSource={x:Static RelativeSource.Self},
Path=Items.Count}”
There are two other types of bindings that are more rare, but public bool CanExecute(object parameter)
{
very useful in certain scenarios. return parameter != null;
}
• MultiBinding
public event EventHandler CanExecuteChanged
• PriorityBinding {
add { CommandManager.RequerySuggested += value; }
MultiBinding allows you to specify multiple bindings for remove { CommandManager.RequerySuggested -= value; }
}
a single target. However, you will need to implement }
<Button Content=”Click Me!”
IMultiValueConverter in order to consolidate these bindings CommandParameter=”Hello from a command!”>
<Button.Command>
down into a single value. <local:MessageBoxCommand />
</Button.Command>
</Button>
PriorityBinding also allows you to specify multiple bindings,
Buttons (along with all descendents of ButtonBase) and Menus that allow you to respond to the command.
are the two most common implementers of ICommandSource.
This interface allows you to specify code to execute when Gestures
the ICommandSource is triggered using the ICommand.Execute Everything that inherits from UIElement has an InputBindings
method. Additionally, you can supply code to tell WPF under collection. An InputBinding, such as a KeyBinding or
what conditions execution is possible using the ICommand. MouseBinding allows you to connect arbitrary user interaction
CanExecute method. The ICommandSource will typically wire directly to a Command. This allows you to trigger code execution
itself to the ICommand.CanExecuteChanged event and update based on complex Gestures not easily achievable through
its IsEnabled property whenever things change. It is typically standard events.
sufficient to allow WPF’s CommandManager to handle the event.
Also, notice that the Execute and CanExecute methods have Built-In Commands
a single parameter which can be supplied by setting the WPF has a host of pre-defined routed commands that you
CommandParameter on the ICommandSource.
may find useful in building your own applications. Their static
instances are hosted on utility classes named according to their
Routed Commands usage category. Table 3 explains the built-in commands.
Like events, WPF’s commands can route. This enables one
part of the UI to trigger a command while another part ApplicationCommands New, Open, Close, Print, Undo, Redo, etc.
actually handles the execution. To create your own routed ComponentCommands ScrollPageUp, ScrollPageDown, MoveLeft, etc.
commands, you must inherit from RoutedCommand. To handle a
MediaCommands Play, Pause, Stop, FastForward, etc.
RoutedCommand, you must add a handler to the CommandBindings
NavigationCommands NextPage, PreviousPage, Search, Zoom, etc.
collection of the node you wish to capture the command from.
EditingCommands AlignCenter, IncreaseIndentation, etc.
A CommandBinding provides hooks for simple event handlers
Christopher Bennage likes to make things. He’s particularly fond of BUY NOW
computers, WPF, and Silverlight, as well as the glorious and mysterious
field of UX. You can follow him on twitter @bennage or through his blog on books.dzone.com/books/wpf
devlicio.us. He promises not to bite.
Bro
ugh
t to
you
by...
Professional Cheat Sheets You Can Trust
tt erns “Exactly what busy developers need:
n Pa
ld
ona
sig son
McD
simple, short, and to the point.”
De
Ja
By
#8
ired
Insp e
by th
GoF ller con
tinu
ed
ndle
r doe
sn’t
have
to
in tab
Cha d ultip ecific o should cep pat
this if the m up the
man
n M
an ac
z.co
n
sp s ents
be a ject ime. d is see passed
Download Now
Com reter of ob at runt handle plem ks to de to
...
n
uest som tion proces e no m
Itera tor ore req
n A g in metho
d
cep
dm ndlin
e e ar
tho e to ptio th
Exce ion is sm to ha up th tered or
e ca
n
Ob
se Me S renc ral
Refcardz.com
plate RN refe listed in mp
le ce pt ni
echa n pa ssed co un avio
Beh
TTE
n
ex
is en
ick
BIRT Windows Powershell
am
Tem Exa he .
A s has ack. W tion uest to ject
NP a qu s, a ct- cep Ob
it
n
st q
IG e s e rn b je call e ex e re
vid patt able O le th nd th
DES
! V is
pro s, hand s to ha
UT ard ign us ram .
des diag
JSF 2.0 Dependency Injection with EJB 3
ct
ABO refc oF) f Re le obje
erns ts o lass exa
mp oke
r
Patt ur (G lemen es c Inv
arz
n F o d rl d h
Des
ig go
f s: E inclu al w
o suc
Th is G a n
l 23 sign Pa
tt e rn e rn
patt , and a
re je ts
t ob mentin
c g AN
D
Adobe AIR Netbeans IDE JavaEditor
c
a h c M M
ef
in c u
orig kD
e
re.
Ea tion ons
tr ple CO ma
nd
boo Softwa rma to c their im om
BPM&BPMN Getting Started with Eclipse
re R
( low
e x p o n la rg cute is al ch
ati an b rm ts. +exe . Th
bject nship
s su
Cre y c fo je c an o
t th
e
ed
to ob ms, d as ed rela
tio
Get
nsh
ips
that
can psu
Enca quest
the
re
late
sa
and
e ha
to b llbacks
ca
.
nalit
y.
riant
times
or in
varia
ling
the
invo
catio
ing
n.
DZone, Inc. ISBN-13: 978-1-934238-86-8
ra o pose uing nctio led at va hand
io n ti ct cess be
av ,a la P ur
as q
ue
ack
fu je pro
Beh nships t re
1251 NW Maynard
ob
e
ISBN-10: 1-934238-86-4
nd the to
je c a n b callb b e ha eded. m ro nous nality ed
tio ob at c
ed
You ne s need
to ne
sts is couple
d fro
ynch nctio y ne
rela with s th st que
n
e th
e as the fu
itho
ut an is
eals
it
ship Reque y of re de ar
ld be litat pattern ssing w tation articul
e: D tion faci
50795
or
e. Use
n
A hist shou d ce en p
ed to mman for pro implem ents its ting.
cop runtim rela type
ker
Cary, NC 27513
n
S s Whe invo y us
n
s co al m pec
jec t at cla Pro
to Th e
w id el th e ue ue
ac tu
d im
p le ex
are utilizing a job q of the ue is
Ob ged with
n
C ues ueue e que
han eals me.
y dge enq
que s. B en to th
e c : D P roxy Job orithm be giv knowle that is terface
b e ti
cop
g n ct
pile r S in
rato er mp
le of al ed ca to have d obje of the
ss S at com serv
888.678.0399
Exa ut
Deco nes
an
.com
919.678.0300
one
Abst tory
C C
Fac
B
State
t
pte
r eigh y
teg
Ada Flyw Stra od
z
Meth
more than 3.3 million software developers, architects and decision
S S r B
w. d
e rp rete plate
ridg
Refcardz Feedback Welcome
B B
Inte Tem
S B
er tor or
ww
C B r B
NSIB
ILIT
Y B
S
Com
po si te
P O succ
ess
or Sponsorship Opportunities 9 781934 238868
RES
“DZone is a developer’s dream,” says PC Magazine.
F
CH
AIN
O
ace
>> sales@dzone.com
terf r
<<in andle
H st ( )
re
ndle
+ha
ern
1 ki ng
ler by lin .c o
m
and uest one
teH req z
cre () le a w.d
Con uest hand | ww