You are on page 1of 392

Designing Windows Applications

with Expression Blend - Manual

To download the course materials, including lab manuals and


assets, visit: http://web.entirenet.net/expressionblend/

Expression Design End-To-End Exercise: Page 1

Expression Blend End-To-End Exercise: Page 71

The School Of Fine Art: Page 201

Fabrikam Ordering Application: Page 259

About the Training:


In this course students will work with the following tools and technologies:
• Expression Blend
• Expression Design
• NET Framework 3.0, Windows Presentation Foundation, XAML
• Visual Studio 2005
Students will cover topics such a designing the user interface for a video player and then
converting that into an actual fully functioning video player by defining dynamic layout,
creating custom controls, incorporating video, binding controls to work with each other,
binding to external XML data to create an interactive video catalog and more. Designers will
also experience other real world scenarios where they will discover the huge potential that
Expression Blend enables them to have to dramatically increase the experience of a
Windows application.
Expression Design End-to-End
Exercise
Contents

Contents..................................................................................................................1
Background.............................................................................................................1
Exercise 1 – End-To-End Exercise............................................................................2
Exercise 1 – End-To-End Exercise

Background

We’ve been commissioned by Fabrikam to develop a new media player. Working within their
style guidelines and wireframes, we have the next 90 minutes to design something visually
compelling.

This manual is intended as a guide for designing the user interface and does not delve into
the same level of detail that you would normally use when designing a production
application. During the course of this lab, you may find it useful to zoom in and out when
dealing with finely-tuned pixel locations, as well as element heights and widths. However,
strict adherence to exact locations and dimensions is not critical, so please don’t worry too
much about matching the screenshots exactly.

2
Exercise 1 – End-To-End Exercise

Steps Screenshots

1. Select Start | All


Programs,
Microsoft
Expression |
Microsoft
Expression
Design.

2. From the File


menu, select
New....

3. In the New
Document dialog,
make the
following changes:

○ Name to
VideoPlay
er_UI

○ Resolution
to 72
px/inch

○ Width to
850

○ Height to
580

4. Click OK to create
the new
document.

3
5. From the main
menu, ensure that
View | Show |
Guides is
checked.

6. From the main


menu, ensure that
View | Snap To
Guides is
checked.

7. Click on the left


ruler and drag a
vertical guide onto
the artboard at
the 0 coordinate,
which is the left
edge of the
canvas.

8. Repeat the last


step by dragging
vertical guides at
515 and 850.

9. Drag horizontal
guides at 0, 35,
495, and 580.

4
10.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

11.Draw a rectangle
inside the top two
horizontal guides
to serve as our
title bar.

12.Using the
Appearance
panel, change the
Fill to a dark grey.

5
13.Draw two more
rectangles on the
canvas for the left
and right sides,
respectively. The
whole canvas
should be a solid
grey now. Ignore
the horizontal
guide at 495 for
now.

14.Press V to activate
the Selection
tool.

15.Select the top title


bar rectangle by
clicking on it.

16.Using the
Appearance
panel, change the
Fill to a gradient
brush.

6
17.Select the first
gradient stop and
use a bright
yellow.

18.Select the second


gradient stop and
select a slightly
darker yellow.

7
19.In the Toolbox,
click and hold the
Fill Transform
button to access
its alternative
tools menu. Select
the Gradient
Transform tool.

20.Drag a line from


top to bottom on
the title bar
rectangle to have
the gradient move
downward.

21.The title bar


should now look
similar to this
screenshot.

8
22.Click on the left
body rectangle to
select it. This area
will host the
currently playing
video, its
information, and
actions for it.

23.From the
Appearance
panel, change the
Fill to use a
gradient brush.

9
24.Select the first
gradient stop and
change the color
to black.

25.Select the second


gradient stop and
change its color to
a dark blue.

10
26.Click on the
Gradient
Transform button
in the Toolbox to
activate the
Gradient
Transform tool.

27.Drag the gradient


transform from
the bottom to the
top of the
rectangle to adjust
the gradient to
this path.

11
28.The canvas should
now look similar to
this screenshot.

29.Select the right


body rectangle on
the canvas. This
area will host
queued video
information.

12
30.From the
Appearance
panel, change the
Fill to use a
gradient brush.

31.Select the first


gradient stop and
change the color
to a bright yellow.

13
32.Select the second
gradient stop and
change the color
to a darker yellow.

33.Click on the
Gradient
Transform button
in the Toolbox to
activate the
Gradient
Transform tool.

14
34.Drag the gradient
transform from
the top of the
rectangle to the
bottom to change
the gradient path.

35.The canvas should


now look similar to
this screenshot.

15
36.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

37.Draw a rectangle
across the entire
canvas directly
under the title bar.
Its fill will likely
look very similar
to the title bar, so
they may be hard
to distinguish. In
this screenshot,
the rectangle
directly below the
lower guide is the
one to draw.

16
38.At the bottom of
the Expression
Design window,
click on the
Unlink width
and height
sliders toggle.
This will allow you
to edit the height
or width of the
selected element
using the sliders
around it without
constraining the
shape’s
proportions.

39.Make sure the


Width is 850 and
the Height is 80.

40.The top, left, and


right edges of the
rectangle should
snap to their
respective guides.
You may want to
zoom in using the
Zoom tool (Z) to
verify this.

41.From the
Appearance
panel, change the
Fill to black.

17
42.Also in the
Appearance
panel, change the
Opacity to 50.

43.The canvas should


now look similar to
this screenshot.

44.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

18
45.Draw a rectangle
over the left body
rectangle that
uses the lower
guide as its top
edge. Its left and
right edges should
snap to the guides
used by the left
body rectangle.
The rectangle
should be 25
pixels high.

46.From the
Appearance
panel, change the
Fill to white and
the Opacity to
30.

19
47.Draw a rectangle
from the bottom
of the title bar to
the bottom of the
canvas, directly to
the right of the
center guide. It
should snap to the
guides on its top,
left, and right. The
rectangle should
be 6 pixels wide.
This rectangle will
represent a grid
splitter that allows
the user to
reallocate space
between the right
and left sides at
runtime.

48.Press Z to activate
the Zoom tool.
Make a small
window around
the top edge of
the newly draw
rectangle to zoom
to it.

49.At the bottom of


Expression
Design, ensure
the width is 6
pixels.

20
50.Use the mouse or
arrow keys to
nudge the
rectangle up
against the top
guide (which is
the bottom guide
of the title bar).

51.Nudge the
rectangle
sideways so that it
is centered on the
middle guide, with
3 pixels on each
side.

52.From the
Appearance
panel, change the
Fill to white and
set the Opacity to
100.

21
53.The canvas should
now look similar to
this screenshot.

54.Click Z to activate
the Zoom tool.
Draw a small
window around
the center of the
grid splitter
rectangle to zoom
in on it.

22
55.In the Toolbox,
click and hold the
Rectangle button
to access its
alternative tools
menu. Select the
Ellipse tool.

56.Hold the Shift key


and draw a circle
(the Shift key
ensures equal
proportions) from
the area circled
and downward to
the right. Try to
avoid snapping to
the gridlines so
that the circle is
drawn in the
center and leave a
margin at the
edges.

23
57.From the
Appearance
panel, click the
More Swatches
button to open the
More Swatches
menu.

58.From the More


Swatches menu,
click on the
Swatch Options
button and select
Import Swatch
Library.

59.Navigate to
<labroot>\Labs\
Assets and select
Fabrikam_Swatc
hLibrary.xml.

60.Click Open to
open the file. This
file contains
Fabrikam’s official
swatch and will be
more convenient
than manually
selecting colors.

24
61.In the
Appearance
panel, click on the
Fill button to
ensure we’re
working with the
Fill brush.

62.Click on the More


Swatches menu
and select the
dark blue color in
the
Fabrikam_Swatc
hLibrary section.

63.Click on the
Stroke button
and select None
for the brush.

25
64.Change the
Opacity to 100.

65.From the main


menu, select Edit
| Copy.

66.From the main


menu, select Edit
| Paste in Front.

67.Use the down


arrow key to move
the newly pasted
circle downward
roughly 6 pixels
below the original
(press the down
arrow key 8-10
times).

26
68.Repeat the
process to create
a total of five
evenly-spaced
circles.

27
69.Press V to activate
the Selection
tool. Hold the
Shift key and
click on each of
the circles, as well
as the white
rectangle behind
it.

70.Right-click on one
of the selected
items and select
Group from the
context menu.

71.Press V to activate
the Selection
tool.

72.Click on the title


bar to select it.

73.From the Edit


Rectangle panel,
change the
Corner Radius to
7.

28
74.In the Toolbox,
click and hold the
Ellipse button to
access its
alternative tools
menu. Select the
Rectangle tool.

75.Draw a rectangle
on the title bar
that is roughly
one-third its
height. This
rectangle will
provide a shine on
the title bar.

76.Use the up arrow


key to move the
newly drawn
rectangle upward
and toward the
center of the title
bar.

29
77.From the
Appearance
panel, change the
Fill to white and
the Opacity to
60.

78.Click on the
Stroke button
and select None.

79.Draw a rectangle
on the title bar
that is roughly
25% of the width
of the title bar.
This rectangle will
contain the name
of the application.

30
80.Use the arrow
keys to center the
rectangle
vertically.

81.From the
Appearance
panel, change the
Fill to black and
the Opacity to
50.

31
82.Click on the
Stroke button
and change its
brush to use a
dark yellow. Also
change the Width
to 2.

83.Click on the Text


button in the
Toolbox to
activate the Text
tool.

84.Click on the left


side of the
application name
rectangle and
type Fabrikam
Video Player.

32
85.From the Text
panel, change the
font size to 20.

86.Click on the
Selection button
in the Toolbox to
activate the
Selection tool.
Note that we can
use the shortcut V
key, provided we
Esc out of the
active text region
(or else it would
type the ‘v’).

87.Click on the title


text to select it.

88.Use the arrow


keys to fit the text
inside the title
bar.

89.Click on the Text


button in the
Toolbox to
activate the Text
tool.

33
90.Highlight the
Fabrikam part of
the title.

91.From the
Appearance
panel, change the
text fill to a dark
yellow.

92.Highlight the
Video Player
part of the title.

93.From the
Appearance
panel, change the
text fill to white.

94.From the Text


panel, change the
Font Decoration
to Italic.

34
95.In the Toolbox,
click and hold the
Rectangle button
to access its
alternative tools
menu. Select the
Ellipse tool.

96.Hold the Shift key


while dragging to
draw a small circle
near the right side
of the title bar.
This will serve as
our minimize
button.

97.Use the arrow


keys to center the
circle vertically.

35
98.From the
Appearance
panel, change the
Fill to black and
the Opacity to
60.

99.From the
Appearance
panel, change the
Stroke to black
and the Width to
1.

100.Next to the
Opacity box, click
on the Unlink fill
and opacity
sliders button to
unlink their
values. Now we
can change the
opacity of one
without updating
the other.

101.Change the
Stroke Opacity
to 100.

36
102.Click on the Pen
button in the
Toolbox to
activate the Pen
tool.

103.Click inside the


left side of the
circle to set the
first point.

104.Hold the Shift


key and click
inside the right
side of the circle
to draw a straight
line.

105.From the
Appearance
panel, change the
Stroke to white
and Width to 3.

37
106.The button
should now look
similar to this
screenshot.

107.Press
Ctrl+Shift+A to
deselect
everything.

108.Hold the Shift


key, then click on
the circle and line
(in that order) to
select them both.

109.From the Align


dropdown at the
bottom of
Expression
Design, select
Align | Vertical
Centers to align
the line with the
vertical center of
the circle.

38
110.From the Align
dropdown at the
bottom of
Expression
Design, select
Align |
Horizontal
Centers to align
the line with the
horizontal center
of the circle.

111.From the main


menu, select Edit
| Copy.

112.From the main


menu, select Edit
| Paste in Front.

113.Use the right


arrow to move the
newly pasted
button to the right
of the original.

114.Move the mouse


near the outside
of a corner of the
inner rectangle
until the rotation
cursor appears.

39
115.Click and drag to
rotate the inner
rectangle. Hold
the Shift key to
snap to 45 degree
angles.

116.Release the
mouse when the
line is diagonally
downward.

40
117.From the main
menu, select Edit
| Copy.

118.From the main


menu, select Edit
| Paste in Front.

119.Rotate the inner


rectangle so that
it is diagonally
downward,
forming an X.

120.The canvas
should now look
similar to this
screenshot.

41
121.In the Toolbox,
click and hold the
Ellipse button to
access its
alternative tools
menu. Select the
Rectangle tool.

122.From the Create


Rectangle panel,
change the
Corner Radius to
0.

123.Draw a rectangle
in the dark blue
region directly
under the title bar.
This rectangle
represents the
thumbnail of the
currently playing
video.

124.From the bottom


of Expression
Design, click on
the Unlink width
and height
sliders toggle
button.

42
125.Change the
Width to 400 and
the Height to
300. Although this
size is much larger
than we will use, it
has the 4x3
proportions we
want to maintain
for the videos and
thumbnails.

126.Click on the Link


width and
height sliders
toggle button to
constrain
proportions.

127.Change the
Height to 65. The
Width will
automatically
update.

128.Use the arrow


keys to position
the thumbnail
entirely within the
dark blue section
of the left panel.

43
129.From the
Appearance
panel, change the
Fill to a pink
color. This
element is a
placeholder for
future use, so the
color can look out-
of-place.

130.Using the
Appearance
panel, change the
stroke to None.

131.From the main


menu, select Edit
| Copy.

132.From the main


menu, select Edit
| Paste In Front.

133.Using the
Appearance
panel, change the
stroke to white.

44
134.Using the
Appearance
panel, change the
fill to black. This
rectangle’s
purpose is to
provide a border
for the thumbnail.

135.From the main


menu, select
Arrange | Order
| Send
Backward.

136.Click on the Text


button in the
Toolbox to
activate the Text
tool.

137.Click next to the


middle of the
thumbnail and
type “Name of
Video”. The text
color may be hard
to read on the
dark background.

45
138.Highlight the
text.

139.From the
Appearance
panel, change the
Fill to white.

140.From the Text


panel, change the
Font decoration
to Regular and
the Font size to
18.

141.Click on the
Selection button
in the Toolbox to
activate the
Selection tool.

142.Reposition the
video name text
so that it appears
near the top of the
panel.

46
143.From the main
menu, select Edit
| Copy.

144.From the main


menu, select Edit
| Paste In Front.

145.Use the right


arrow key to move
the newly pasted
text to the right of
the video name.
This text will
represent the
video duration.

146.From the
Appearance
panel, change the
Fill to use the
bright yellow color
from the Fabrikam
swatch.

47
147.From the Text
panel, change the
Font decoration
to Italic.

148.Click on the Text


button in the
Toolbox to
activate the Text
tool.

149.Change the
duration label’s
text to 00:00.

150.Click on the
Selection button
in the Toolbox to
activate the
Selection tool.

48
151.Click on the
video name to
select its text.

152.From the main


menu, select Edit
| Copy.

153.From the main


menu, select Edit
| Paste In Front.

154.From the Text


panel, change the
Font size to 13.

155.Highlight the text


and change it to
Abstract of
Video.

156.The canvas
should now look
similar to this
screenshot.

49
157.Click on the
Selection button
in the Toolbox to
activate the
Selection tool.

158.Select the
thumbnail to
select it.

159.Hold the Alt key


and drag the
thumbnail
downward onto
the lighter blue
rectangle. Holding
the Alt key when
dragging makes a
copy of the
original object.
This new
rectangle will be a
placeholder for
the currently
playing video.

50
160.Hold the Shift
key while resizing
the video
placeholder to
reach from the
bottom of the
preview panel to
the guide near the
bottom of the
canvas.

161.From the main


menu, select Edit
| Copy.

162.From the main


menu, select Edit
| Paste In Front.

163.Using the
Appearance
panel, change the
stroke to white.

164.Using the
Appearance
panel, change the
fill to black.

51
165.From the main
menu, select
Arrange | Order
| Send
Backward.

166.Drag a box that


touches the video
thumbnail and its
border, as well as
the name,
abstract, and
duration of the
video. Note that
this selection will
also include the
design elements
underneath the
visible selections.

52
167.Holding the Shift
key, click on the
blue and dark blue
background
rectangles where
shown in this
screenshot. The
result should be
that only the
video information-
specific elements
are selected.

168.Right-click on the
thumbnail
placeholder and
select Group to
group these
elements
together.

169.Click on the Pen


button in the
Toolbox to
activate the Pen
tool.

53
170.Click inside the
left edge of the
grey rectangle to
create the first
point.

171.Click inside the


right edge of the
grey rectangle to
create a straight
line. This line
represents the rail
for our timeline
slider.

172.From the
Appearance
panel, change the
Fill to None.

173.Change the
Stroke to white.

54
174.In the Toolbox,
click and hold the
Rectangle button
to access its
alternative tools
menu. Select the
Polygon tool.

175.Click and drag


inside the grey
rectangle, roughly
in the horizontal
center, to create a
small triangle.
Hold the Shift key
to snap to 45-
degree angles
before releasing.
This triangle
represents the
thumb for our
timeline slider.

55
176.From the
Appearance
panel, change the
Fill to use the
bright yellow from
the Fabrikam
swatch.

177.Change the
Stroke to black.

56
178.In the Toolbox,
click and hold the
Polygon button
to access its
alternative tools
menu. Select the
Rectangle tool.

179.Underneath the
timeline slider,
draw a square by
holding the Shift
key while
dragging the
shape. This square
will represent our
play button.

57
180.From the
Appearance
panel, change the
Fill to the
Fabrikam blue.

181.Press Z to
activate the Zoom
tool.

182.Drag a small box


around the play
button to zoom in
on it.

58
183.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

184.Draw a rectangle
inside the top of
the play button
that has a height
of around 1/3 of
the play button.
There should be a
margin between
the sides of the
rectangle and the
play button.

185.From the Edit


Rectangle panel,
change the
Corner Radius to
5.

59
186.From the
Appearance
panel, change the
Fill to a gradient
brush.

187.Select the first


gradient stop and
change its color to
white.

60
188.Select the
second gradient
stop and change
its color to white
and its Stop
Alpha to 0.

189.Change the
Stroke to None.

190.Click on the
Gradient
Transform button
in the Toolbox to
activate the
Gradient
Transform tool.

61
191.Drag the
gradient transform
from the top of
the rectangle to
the bottom.

192.From the Edit


Rectangle panel,
change the
Corner Radius to
5.

193.In the Toolbox,


click and hold the
Pen button to
access its
alternative tools
menu. Select the
Delete Anchor
Point tool.

194.Click on the two


top anchor points
to delete them.
This will square off
the top of the
shape.

62
195.Click on the
Direct Selection
button in the
Toolbox to
activate the
Direct Selection
tool.

196.Holding the Shift


key, select the top
left anchor point
and the top right
anchor points.

197.Use the up arrow


to move the
anchor points
toward the top of
the button, which
will make the
highlight shape
larger.

63
198.From the
Appearance
panel, change the
Opacity to 30.

199.Press V to
activate the
Selection tool.

200.Press
Ctrl+Shift+A
everything.

201.Hold the shift


key, then click on
the button and its
highlight to select
them both.

64
202.From the main
menu, elect
Arrange | Group
to pair these
objects into a
group.

203.From the main


menu, select Edit
| Copy.

204.From the main


menu, select Edit
| Past In Front.

205.Use the right


arrow to move the
newly pasted
button to the right
of the original.
This button will be
our pause button.

206.Repeat the paste


and move the new
group to add a
third button to the
right. This button
will be our stop
button.

207.Select the
triangle on the
timeline slider.

65
208.Hold the Alt key
and drag a copy of
the triangle onto
the left button.

209.From the main


menu, select
Arrange | Order
| Bring to Front.

210.Hold the Shift


key while rotating
the arrow to have
it point to the
right.

211.From the
Appearance
panel, change the
Fill to white.

66
212.Change the
Stroke to the
Fabrikam bright
yellow.

213.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

214.From the Create


Rectangle panel,
change the
Corner Radius to
15.

67
215.Draw a thin
rectangle on the
left side of the
play button
triangle. This is
half of the pause
button and we’re
drawing it here so
that we can easily
size it up against
the play button.

216.Move the
rectangle onto the
pause button (the
middle one).

217.From the main


menu, select Edit
| Copy.

218.From the main


menu, select Edit
| Paste in Front.

219.Use the right


arrow key to move
the second half of
the pause symbol
to the right of the
first half.

68
220.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

221.Press
Ctrl+Shift+A to
deselect the
rectangle.

222.From the Create


Rectangle panel,
change the
Corner Radius to
3.

223.Hold the Shift


key and draw a
square next to the
triangle on the
play button, but
slightly smaller.

224.Move the new


square onto the
stop button (the
right one).

69
225.The canvas
should now look
similar to this
screenshot.

226.From the main


menu, select File
| Open….

227.Navigate to
<labroot>\Labs\
Assets and select
Fabrikam_Logo.
design.

228.Click Open to
open the file.

70
229.Press V to
activate the
Selection tool.

230.Select the entire


logo by drawing a
selection box
around it.

231.From the main


menu, select Edit
| Copy.

232.Switch back to
the video player
design file.

233.From the main


menu, select Edit
| Paste in Front.

234.Move the newly


pasted logo to the
top right corner of
the window.

235.Select the logo.

236.Right-click the
selected logo and
select Ungroup
from the context
menu.

237.Press
Ctrl+Shift+A to
deselect
everything.

71
238.Holding the Shift
key, select each
path in the
“Fabrikam” text
by clicking on it.

239.In the
Appearance
panel, change the
Fill of the
selected paths to
use white.

240.Press
Ctrl+Shift+A to
deselect
everything.

241.Holding the Shift


key, select each
path in the
“Incorporated”
text (as well as
the logo’s
horizontal line) by
clicking on it.

72
242.In the
Appearance
panel, change the
Fill of the
selected paths to
use the Fabrikam
yellow.

243.Select all paths


from the logo. This
can be done by
holding the Shift
key and clicking
on each path.

244.From the Effects


panel, click the
Add Effect
button and select
Effects | Outer
Glow to apply an
outer glow effect
to the logo.

73
245.Select the Outer
Glow effect.

246.Change the Size


to 1 and the
Opacity to .5.

247.The canvas
should now look
similar to this
screenshot.

74
248.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.

249.Draw a rectangle
underneath the
logo section, using
the bottom edge
of the dark yellow
rectangle as an
upper edge. This
rectangle will be
the top button of a
scrollbar.

250.From the bottom


of Expression
Design, click on
the Unlink width
and height
sliders toggle
button.

251.Change the
Height to 15.

75
252.From the
Appearance
panel, change the
Fill to the
Fabrikam bright
yellow.

253.Change the
Stroke to None.

254.Ensure the
rectangle is
snapped to the
guides on its right
and left and is
resting against the
dark yellow
rectangle above it.
You may need to
zoom in to check
on this.

76
255.Hold the Alt key
and drag the
triangle from the
timeline slider
onto the top
scrollbar area.

256.From the main


menu, select
Arrange | Order
| Bring to front.

257.Holding the Shift


and Alt keys,
resize the triangle
from the center so
that it fits within
the scrollbar
button area.

77
258.From the main
menu, change the
Stroke to white.

259.Change the Fill


to black.

260.Holding the Shift


key, click on the
rectangle behind
the triangle to
select them both.

78
261.Hold the Alt key
and drag a copy of
the pair of
elements to the
bottom of the
canvas. The
copied rectangle
should still snap to
the same guides
as its original.

262.Move the mouse


near the corner of
the rectangle until
the rotation cursor
appears.

263.Hold the Shift


key and rotate the
pair of elements
180-degrees so
that the arrow
points downward.

264.Click on the play


button to select it.

79
265.Hold the Alt key
and drag a copy of
the button to the
top of the queued
videos area,
directly
underneath the
top scrollbar
button. The left
side of the button
should snap to the
left guide and the
top of the button
should meet the
bottom of the
scrollbar button.

266.Right-click the
button and select
Ungroup to
ungroup them.

267.Press
Ctrl+Shift+A to
deselect the
elements.

268.Select the
background
rectangle and
drag it across

80
269.From the bottom
of Expression
Design, change
the Height of the
queued video
background to 72.

270.Click on the
Direct Selection
button in the
Toolbox to
activate the
Direct Selection
tool.

271.Click on the top


right anchor point,
then hold the
Shift key and
click on the other
two right anchor
points to select
them as well.

272.Drag the group


of points to the
right side of the
background
rectangle. Hold
the Shift key to
ensure the lines
are kept straight.

81
273.Click on the
current video
information and
hold the Alt key
while dragging
onto the video
queue area to
make a copy.

274.From the main


menu, select
Arrange | Order
| Bring to Front.

275.Holding the Alt


and Shift keys,
resize the video
group to fit within
the background
vertically. This
group only needs
to be made a little
bit smaller to fit
nicely.

276.Select the video


info group, the
background
rectangle, and the
highlight rectangle
by holding the
Shift key while
clicking on each.

277.From the main


menu, select
Arrange | Group.

82
278.From the main
menu, select Edit
| Options |
General….

279.In the Options


dialog, click on the
Units and Grids
tab to open that
section.

280.Change Stack
gap size to 0.

281.Press OK to close
the dialog.

282.Select the media


item group from
the right panel by
clicking on it.

283.From the main


menu, select Edit
| Copy.

284.From the main


menu, select Edit
| Paste in Front.

285.Repeat the paste


4 more times (for
a total of 6 items).
Note that they will
all be pasted in
the same place, so
it will appear as
though only one is
visible.

83
286.Select the 6
media items by
dragging a
selection that
overlaps them.
This will also
select one of the
background
rectangles.

287.Hold the Shift


key and click in
the specified area
to deselect the
background yellow
rectangle from the
group.

288.From the bottom


of Expression
Design, select
Stack |
Downward to
stack the panels.

84
289.The six queued
video items should
now be laid out
top to bottom as
shown in this
screenshot.

290.Click on the
center white grid
splitter to select it.

291.Right-click the
grid splitter and
select Arrange |
Bring to Front to
bring it to the
front of the
design.

85
292.The final canvas
should look similar
to this screenshot.

293.From the main


menu, select File
| Export….

294.In the Export


dialog, click Save
to use the
VideoPlayer_UI.
xaml file name.

86
295.In the Export
XAML dialog, click
Export to export
the file.

87
Expression Blend End-to-End
Exercise
Contents

Contents................................................................................................................71
Background...........................................................................................................71
Exercise 1 – Setting Up The Project.......................................................................72
Exercise 2 – Layout...............................................................................................79
Exercise 3 – Button Controls...............................................................................113
Exercise 4 – Slider Controls.................................................................................123
Exercise 5 – GridSplitter Controls........................................................................129
Exercise 6 – ViewBox Controls............................................................................135
Exercise 7 – Video Controls & Triggers...............................................................177
Exercise 8 –Event Handlers.................................................................................185
Exercise 9 –Data Binding....................................................................................191
Exercise 10 –Customizing The Application Window.............................................196
Exercise 10 –Customizing The Application Window

Background
We’ve been commissioned by Fabrikam to develop a new media player. Working with XAML
exported from Expression Design, we’re going to turn a design vision into an application
reality.

This manual is intended as a guide for designing the user interface and does not delve into
the same level of detail that you would normally use when designing a production
application. During the course of this lab, you may find it useful to zoom in and out when
dealing with finely-tuned pixel locations, as well as element heights and widths. However,
strict adherence to exact locations and dimensions is not critical, so please don’t worry too
much about matching the screenshots exactly.

88
Exercise 1 – Setting Up The Project

Steps Screenshots

1. Select Start | All


Programs,
Microsoft
Expression |
Microsoft
Expression Blend.

2. From the main menu,


select File | New
Project….

3. In the Create New


Project dialog,
change the Name to
VideoPlayer and
click OK.

89
4. In the top right
corner of
Expression Blend,
locate the Project
panel.

5. In the Project panel,


find the Files panel
and right-click the
VideoPlayer project
node.

6. Select Add Existing


Item… from the
context menu.

90
7. In the Add Existing
Item dialog,
navigate to the
<labroot>
\VideoPlayer_Asset
s
folder.

8. Select the following


files in the folder and
press Open to add
them to the project:

○ Playlist.xml
is an XML file
that contains a
test playlist.

○ Testvideo.w
mv is a video
to test with.

○ VideoPlayer_
UI .xaml is
the exported
design file that
contains our UI
elements.

(note: do NOT select


VideoPlayerControls.c
s at this time)

91
9. In the Files panel,
right-click the
VideoPlayer project
node.

10.Select New Folder


from the context
menu to create a
new project folder.

11.Click once on the


New Folder1 folder.
After a short pause,
the folder name will
become editable.

12.Change the name to


BitmapUIElements
and press Enter.
This folder will
contain the bitmap
elements referenced
by the
VideoPlayer_UI.xa
ml file.

92
13.The folder should
now appear similar to
this screenshot.

14.Right-click the
BitmapUIElements
project folder and
select Add Existing
Item… from the
context menu.

93
15.In the Add Existing
Item dialog,
navigate to the
<labroot>
\BitmapUIElements
folder.

16.Select all files in the


folder and press
Open to add them to
the project.

17.Click on the white


triangle next to the
BitmapUIElements
project folder to
collapse it in the
view. You may
expand and collapse
folders as needed
throughout this lab.

94
18.In the Files panel,
right-click the
VideoPlayer project
node.

19.Select New Folder


from the context
menu to create a
new project folder.

20.Click once on the


New Folder1 folder.
After a short pause,
the folder name will
become editable.

21.Change the name to


media and press
Enter.

22.Right-click the
media project node
and select New
Folder from the
context menu.

23.Change the folder’s


name to thumbs.
This folder will
contain the
thumbnails
referenced by our
test playlist file.

95
24.Right-click the
thumbs project node
and select Add
Existing Item…
from the context
menu.

25.In the Add Existing


Item dialog,
navigate to the
<labroot>
\VideoPlayer_Asset
s\ media\thumbs
folder.

26.Select all files in the


folder and press
Open to add them to
the project.

96
27.Right-click the
media project node
and select New
Folder from the
context menu.

28.Change the folder’s


name to videos. This
folder will contain the
videos referenced by
our test playlist file.

29.Right-click the
videos project node
and select Add
Existing Item…
from the context
menu.

30.In the Add Existing


Item dialog,
navigate to the
<labroot>
\VideoPlayer_Asset
s
\media\videos
folder.

31.Select all files in the


folder and press
Open to add them to
the project.

97
32.The project should
now look similar to
this screenshot.

98
Exercise 2 – Layout

Steps Screenshots

33.On the lower left


side of Expression
Blend, locate the
Objects and
Timeline panel.

34.Click on the
Window node to
select it.

99
35.In the top right
section of
Expression Blend,
click on the
Properties tab to
select it.

36.In the Layout panel,


change the Width
to 850 and the
Height to 580.

100
37.In the Objects and
Timeline panel,
right-click the
LayoutRoot node
and select Change
Layout Type |
Viewbox.

38.Click on the Project


tab to open it.

39.Double-click
VideoPlayer_UI.xa
ml to open it.

101
40.In the Objects and
Timeline panel,
right-click
VideoPlayer_UI_de
sign and select
Copy from the
context menu.

41.Switch back to
Window1.xaml.
The easiest way to
do this is to click on
its tab at the top of
the workspace.

42.In the Objects and


Timeline panel,
right-click the
LayoutRoot node
and select Paste.
This will paste all of
the design elements
from the source
XAML into the main
window.

102
43.The workspace
should now look
similar to this
screenshot. Notice
that there are some
white borders on the
right and left of the
pasted artwork. This
is because the
viewbox is slightly
shorter (smaller
height) than the
pasted content, so it
has resized it to fit,
resulting in the
artwork’s width to
be slightly smaller
than the viewbox’s.

44.Click on the
LayoutRoot
element to select it.

103
45.In the Properties
panel, locate the
Appearance panel
and change the
Stretch to Fill. This
will cause a slight
distortion of the
pasted visual assets,
but it will be
addressed later on
when we remove
the application
window’s title bar.

46.Double-click the
VideoPlayer_UI_de
sign node to bring it
into scope. Select all
of the children
nodes under
VideoPlayer_UI_de
sign and select Cut.

104
47.In the Objects and
Timeline panel,
right-click the
VideoPlayer_UI_de
sign node and
select Change
Layout Type | Grid
to change it to a
grid. Right-click the
VideoPlayer_UI_de
sign node and
select Paste.

105
48.Click on the
Hide/Show toggle
button next to the
Logo node to hide
it. Note that we’re
not changing the
object’s Visibility
property, but rather
just hiding it while
we do our design
work. When an
object is hidden, the
eye icon disappears.
It can be made
visible again by
clicking in the same
location, at which
point the eye icon
will reappear.

49.Repeat the process


to hide all objects in
the
VideoPlayer_UI_de
sign container,
except for the
Panels object,
which we will work
with.

106
50.Select all objects
inside the Panels
container object.
You can accomplish
this by clicking on
the first item
(Rectangle) and
then holding the
Shift key when
clicking on the last
item
(Splitter_Thumb).

51.Right-click the
selected group and
select Cut.

107
52.Right-click the
VideoPlayer_UI_de
sign node and
select Paste to
paste the design
assets into that
container.

53.In the Objects and


Timeline panel,
right-click the
Rectangle node
and select Rename.

54.Type
BlueLeftRectangle
as the new name
and press Enter.

55.Repeat the process,


renaming
Rectangle_0 to
YellowRightRecta
ngle
and
Rectangle_1 to
DarkTopRectangle
.

108
56.Press the V key to
use the Selection
tool.

57.Making sure
VideoPlayer_UI_de
sign has scope, and
is in Grid layout
mode, move the
mouse along the top
edge of the
VideoPlayer_UI_de
sign grid to the left
edge of the grid
splitter.

58.Click when the


orange triangle and
line are visible to
create a column
splitter.

59.Click on the left


rectangle
(BlueLeftRectangle)t
o select it.

109
60.In the Layout panel,
change the
ColumnSpan to 1
and the Right
Margin to 0. This
will make the
rectangle resize to
reach the column
splitter as it’s
moved.

61.In the Objects and


Timeline panel,
click on the Splitter
node to select it.

110
62.In the Layout panel,
change the
ColumnSpan to 1
and the Right
Margin to -8. This
will ensure that the
right side of the
splitter (which is 8
pixels) will always
be 8 pixels to the
right of the column
splitter. In other
words, the left side
of the grid splitter
will always be on the
column splitter.

63.You can test out the


resizing behavior by
dragging the column
splitter left and
right.

64.If you move the


splitter, the easiest
way to reset it is to
select Edit | Undo
Move Gridline from
the main menu.

111
65.In the Objects and
Timeline panel,
click on the
Hide/Show toggle
button next to the
TitleBar node to
make it visible.

66.Click on the
TitleBar node to
select it.

67.In the Objects and


Timeline panel,
right-click the
TitleBar node and
select Change
Layout Type |
Grid.

112
68.Expand the Logo
node.

69.Right-click the
Logo_7 node and
select Cut.

70.Right-click the
VideoPlayer_UI_de
sign node and
select Paste.

71.Right-click the
Panels node and
select Delete.

113
72.Right-click the Logo
node and select
Delete.

73.Right-click the
Logo_7 node and
select Rename.

74.Change the name to


Graphic_Logo.

75.On the workspace,


click on the logo’s
right anchor point to
remove its
anchoring to the
right side.

114
76.In the Objects and
Timeline panel,
right-click the
SelectedVideo
node and select
Order | Bring to
Front.

77.Click on the
Hide/Show toggle
button next to the
SelectedVideo
node to make it
visible in the
designer. Then
right-click the
SelectedVideo
node, and choose
View XAML. In the
XAML, delete the
d:IsLayer=”True”
property as shown
below.

<Canvas x:Name="SelectedVideo" d:IsLayer="True" Grid.ColumnSpan="2">

115
78.Back in the Design
tab, resize the
SelectedVideo
canvas by dragging
its bottom right
transformation
adorner to snap to
the right edges of its
dark blue rectangle.

(the transformation
adorner should be in
the lower right hand
corner of the
window)

79.In the Objects and


Timeline panel,
select all of the
elements under the
VideoCollection
node.

80.Right-click the group


and select Cut.

116
81.Right-click the
VideoPlayer_UI_de
sign node and
select Paste.

82.Right-click the
VideoCollection
node and select
Delete.

83.At the bottom of the


panel, select all of
the items that were
just pasted into the
VideoPlayer_UI_de
sign node.

84.Right-click the group


and select Group
Into | Grid.

117
85.Right-click the newly
created [Grid] node
and select Rename.

86.Change the name to


VideoCollection.

87.Expand the
VideoCollection
node and find the
Item_VideoList
node. Right-click this
node and select
Change Layout
Type | Grid.

88.Under the
Item_VideoList >
[Canvas] node,
select the Group
and Group_34
nodes.

89.Right-click the group


and select Cut.

118
90.Double-click the
Item_VideoList
node to give it
scope. When a node
has scope, it treats
certain actions, such
as pasting, relative
to it.

91.Right-click the
Item_VideoList
node and select
Paste.

92.Right-click the
[Canvas] node
under
Item_VideoList and
select Delete.

93.Right-click the
Group node and
select Change
Layout Type |
Grid.

94.Under the
Item_VideoList >
Group > [Canvas]
node, select the
Rectangle_32 and
Path_33 nodes.

95.Right-click the group


and select Cut.

119
96.Double-click the
Item_VideoList >
Group node to give
it scope.

97.Right-click the
Group node and
select Paste.

98.Right-click the
Item_VideoList >
Group > [Canvas]
node and select
Delete.

99.Right-click the
Item_VideoList >
Group_34 node and
select Change
Layout Type |
Grid.

100.Under the
Item_VideoList >
Group_34 >
[Canvas] node,
select the
VideoThumbnail
and all three
[TextBlock] nodes.

101.Right-click the
group and select
Cut.

120
102.Double-click the
Item_VideoList >
Group_34 node to
give it scope.

103.Right-click the
Group_34 node and
select Paste.

104.Right-click the
Item_VideoList >
Group_34 >
[Canvas] node and
select Delete.

105.Right-click the
Item_VideoList >
Group node and
select Rename.

106.Rename the group


to
Video_ItemBackgr
ound.

121
107.Right-click the
Item_VideoList >
Group_34 node and
select Rename.

108.Rename the group


to
Video_ItemDetails.

109.In the Appearance


panel, click on the
Advanced Options
button to show
advanced
appearance options.

110.Check the
ClipToBounds box
to make sure that
the contents are
only visible within
the grid’s bounds.

111.In the Layout


panel, change the
Right Margin to 0.

122
112.In the Objects and
Timeline panel,
under
VideoCollection,
select the 5 other
video list items
(Item_VideoList_3
5,
Item_VideoList_43,
Item_VideoList_51,
Item_VideoList_59,
and
Item_VideoList_65
).

113.Right-click the
group and select
Delete.

114.Double-click the
VideoCollection
node to bring it into
scope.

115.Right-Click the
Item_VideoList
node and select
Copy.

116.Right-Click the
VideoCollection
node and select
Paste. This will
paste a copy of the
item directly on top
of the original.

123
117.On the workspace,
drag the copied item
downward until you
see snap lines along
three edges, as
shown in this
screenshot.

118.Repeat the process


above to paste 4
more items, with
each one being
moved below the
last. The result
should look similar
to this screenshot.

119.Double-click the
ScrollBar_Up node
to bring it into
scope.

120.Select
Rectangle_28 and
Path_29.

121.Right-click on the
selected group and
select Cut.

124
122.Right-click the
ScrollBar_Up node
and select Change
Layout Type |
Grid.

123.Right-click the
ScrollBar_Up >
[Canvas] node and
select Delete.

124.Right-click the
ScrollBar_Up node
and select Paste.

125.Under
ScrollBar_Up, click
the Path_29 node
to select it. This is
the triangle part of
the scrollbar button.

125
126.In the Layout
panel of the
Properties panel,
make the following
changes:

○ Width to 20

○ Horizontal
Alignment to
Center

○ All margins to
0

127.In the Objects and


Timeline panel,
double-click the
ScrollBar_Down
node to bring it into
scope.

128.Under
ScrollBar_Down >
[Canvas] select
Rectangle_30 and
Path_31.

129.Right-click on the
selected group and
select Cut.

126
130.Right-click the
ScrollBar_Down
node and select
Change Layout
Type | Grid.

131.Right-click the
ScrollBar_Down >
[Canvas] node and
select Delete.

132.Right-click the
ScrollBar_Down
node and select
Paste.

133.Click the Path_31


node to select it.
This is the triangle
part of the scrollbar
button.

127
134.In the Layout
panel of the
Properties panel,
make the following
changes:

○ Width to 20

○ Horizontal
Alignment to
Center

○ All margins to
0

135.Collapse any
expanded nodes
under
VideoPlayer_UI_de
sign in the Objects
and Timeline panel
so that it looks
similar to this
screenshot. This will
make it easier for us
to manage the
design.

128
136.Double-click the
VideoPlayer_UI_de
sign node to bring it
into scope.

137.Select the child


nodes of the
VideoControls
node.

138.Right-click the
selected group and
select Cut.

139.Right-click the
VideoPlayer_UI_de
sign node and
select Paste.

140.Right-click the
VideoControls
node and select
Delete.

141.Under
VideoPlayer_UI_de
sign, select all of
the newly pasted
video player control
elements.

142.Right-click the
selected group and
select Group Into |
Grid.

129
143.Right-click the
newly created grid
node and select
Rename.

144.Rename the node


to VideoControls.

145.Select the
Button_Play,
Button_Pause, and
Button_Stop nodes
by clicking the first
and holding the Ctrl
key while clicking
the others.

146.Right-click the
selected group and
select Group Into |
StackPanel.

147.In the Layout


panel of the
Properties panel,
change the
Orientation to
Horizontal.

148.In the Objects and


Timeline panel,
select the
Button_Play,
Button_Pause, and
Button_Stop
nodes.

130
149.In the Layout
panel, change the
right margin to 5.

150.In the Objects and


Timeline panel,
drag the
[StackPanel] node
above the
Graphic_IconPlay
node so that it
appears behind the
icon nodes.

151.Right-click the
[StackPanel] node
and select Rename.

152.Rename the node


to
Stack_ButtonCont
rols.

131
153.In the Layout
panel, change the
HorizontalAlignme
nt to Center and all
margins to 0.

154.On the workspace,


resize the stack
panel from the top
so that it snaps to
the bottom of the
slider.

155.Select the
Graphic_IconPlay,
Graphic_IconPaus
e, and
Graphic_IconStop
buttons.

156.Using the right


arrow key, center
the icons over the
buttons.

132
157.In the Objects and
Timeline panel,
expand the
VideoPlayer_UI_de
sign | Video |
Group_81 |
[Canvas] node.

158.Select the
Graphic_VideoBor
der and
VideoPlaceHolder
nodes.

159.Right-click the
select group and
select Cut.

160.Double-click the
VideoPlayer_UI_de
sign note to give it
scope. Right-click
the
VideoPlayer_UI_de
sign node and
select Paste.

161.Scroll to the
bottom of the panel
and select the
Graphic_VideoBor
der and
VideoPlaceHolder
nodes.

162.Right-click the
selected group and
select Group Into |
Grid.

133
163.Right-click the
Video node and
select Delete.

164.On the workspace,


move the large
video so that it
snaps to the left
edge of the window,
directly below the
video information.

134
165.Resize the large
video from the
bottom right
transformation
adorner so that its
right edge snaps to
the left edge of the
splitter and bottom
edge snaps to the
top edge of the
slider.

166.The workspace
should now look
similar to this
screenshot.

135
167.Click on the right
anchor point of the
video to turn off
anchoring to the
right edge. As a
result, the video will
not resize
horizontally.

168.Select the right


column by clicking
on the column
header right outside
the window’s top
edge.

169.From the Layout


panel in the
Properties panel,
click on the
Advanced Options
button.

170.Change the
MaxWidth to 700
and the MinWidth
to 124.

Exercise 3 – Button Controls

136
Steps Screenshots

171.In the
Objects and
Timeline
panel, click
on the
Button_Play
node to select
it. This node
is located at
Window |
LayoutRoot |
VideoPlayer
_UI_design |
VideoContro
ls |
Stack_Butto
nControls.

172.From the
main menu,
select Tools |
Make
Button….

173.In the
Create Style
Resource
dialog,
change the
Resource
name (Key)
to
Button_Vide
oControls
and press OK.

137
174.In the
Common
Properties
panel of the
Properties
panel, clear
the Content
field.

175.In the
Objects and
Timeline
panel, under
VideoPlayer
_UI_design |
VideoContro
ls |
Stack_Butto
nControls,
right-click the
[Button]
node and
select Edit
Control
Parts
(Template) |
Edit
Template.

176.Select the
[ContentPre
senter]
node.

138
177.In the
Layout
panel, click
the
HorizontalAl
ignment and
select Reset.

178.Click the
VerticalAlig
nment and
select Reset.

179.In the
Objects and
Timeline
panel, under
Template |
[Grid] |
Button_Play
| [Canvas]
click on the
Rectangle_7
3 to select it.

139
180.In the
Triggers
panel, click
on the
IsPressed =
True node.
We can now
edit how we
want this
button to
appear when
the button is
pressed.

181.In the
Brushes
panel, change
the fill brush
of the
selected
rectangle to
use a very
light shade of
blue.

182.Press F5 to
build and run
the
application.

183.Use the
mouse to see
how the play
button reacts
to the mouse
clicking on it.

184.Close the
application.

140
185.In the
Triggers
panel, click
on the
IsMouseOve
r = True
node.

186.In the
Actions
when
activating
section, click
on the Add
new action
button.

187.In the
Timeline
Needed
dialog box,
press OK to
create a new
timeline.

188.In the
Objects and
Timeline
panel, change
the name of
the timeline
to RollOver.

141
189.In the
Timeline,
drag the
marker to the
0:00.300
mark. We can
now make
changes to
the rectangle
to indicate
how we want
it to look at
this offset in
time.

190.In the
Brushes
panel of the
Properties
panel, change
the fill to a
slightly lighter
shade of blue.

191.In the
Triggers
panel, click
on the
IsMouseOve
r = True
node.

142
192.In the
Actions
when
deactivating
section, click
on the Add
new action
button.

193.From the
Timeline
dropdown of
the newly
create action,
select New
Timeline….

194.In the
Create
Storyboard
Resource
dialog,
change the
Resource
name (Key)
to RollOff
and press OK.

143
195.In the
Objects and
Timeline
panel, move
the marker to
0:00.300.

196.In the
Brushes
panel of the
Properties
panel, change
the G
attribute to 1
less than it
was originally.

144
197.Manually
change the G
attribute back
to its original
state. The
reason we
make this
change is to
create a key
frame in our
timeline that
has the
original fill so
that the
RollOff
timeline
knows what
to return it to.

198.Press F5 to
build and run
the
application.

199.Use the
mouse to see
how the play
button reacts
to the mouse
moving over
it, as well as
clicking on it.
Both triggers
and
animations
are useful
ways to
create
effects.

200.Close the
application.

145
201.Click on the
Scope up
button to
return scope
to the top
level of the
application.

202.Select the
newly create
[Button]
node.

203.In the
Layout panel
of the
Properties
panel, change
the Right
Margin to 5.

204.Double-click
on the
Stack_Butto
nControls to
bring it into
scope.

205.Select the
Button_Paus
e and
Button_Stop
nodes.

206.Right-click
the selected
group and
select
Delete.

146
207.Right-click
the [Button]
node and
select Copy.

208.Right-click
the
Stack_Butto
nControls
node and
select Paste.

209.Right-click
the
Stack_Butto
nControls
node and
select Paste
again to paste
a third
button.

147
210.Drag the
Graphic_Ico
nPlay node
onto the first
[Button]
node. This will
set its
ContentPres
enter to use
the play
button vector
graphic.

211.Drag the
Graphic_Ico
nPause node
onto the
second
[Button]
node. This will
set its
ContentPres
enter to use
the pause
button vector
graphic.

212.Drag the
Graphic_Ico
nStop node
onto the third
[Button]
node. This will
set its
ContentPres
enter to use
the stop
button vector
graphic.

148
213.Rename the
three button
nodes to
Button_Play,
Button_Paus
e, and
Button_Stop
as shown in
this
screenshot.

149
Exercise 4 – Slider Controls

Steps Screenshots

214.In the Objects and


Timeline panel,
right-click the
Slider_Thumb node
and select Cut.

215.Select the
Slider_Background
and Slider_Track
nodes.

216.Right-click the
selected group and
select Delete.

217.Double-click the
VideoControls node
to bring it into scope.

218.In the Toolbox,


click on the Asset
Library button to
open the Asset
Library.

150
219.In the Asset
Library dialog, click
on the Slider item.

220.Draw a slider in
place of the slider
assets we just
deleted. In this
screenshot, it begins
at the top left circle
and extends to the
bottom right circle.

221.Right-click the
newly created
[Slider] node and
select Edit Control
Parts (Template) |
Edit a Copy….

222.In the Create Style


Resource dialog,
change the
Resource name
(Key) to
SliderStyle_VideoC
ontrols and click
OK.

151
223.Right-click the
Thumb node (the
child one) and select
Edit Control Parts
(Template) | Edit
Template…. You will
need to expand the
[Grid] |
PART_Track |
Thumb to find it.

224.Right-click the
[Canvas] node and
select Delete.

225.Right-click the
Template node and
select Paste to
insert the
Slider_Thumb node
that was cut earlier.

226.Click on the Scope


up button to bring
the slider’s scope
back into context.

152
227.In the Layout panel
of the Properties
panel, change the
Width to 31 and the
Height to 27.

228.In the Objects and


Timeline panel,
under Template |
Boreder, click on
the [Grid] node to
select it.

229.Resize the grid from


the bottom so that
the entire triangle
thumb is visible.

230.Click on the
Template |
[Border] | [Grid] |
[Border] node to
select it.

153
231.In the Brushes
panel, click on the
Solid Brush tab and
select white as the
color.

232.In the Appearance


panel, set all border
thicknesses to 0.

233.In the Layout


panel, change the
Height to 1.

234.In the Objects and


Timeline panel, click
on the Template |
[Border] node to
select it.

235.In the Brushes


panel, click on the
Advanced property
options button for
the Background
brush.

154
236.In the Background
dialog, click Reset.

237.Click on the Solid


Brush tab and select
a dark grey color to
change the slider
background to a dark
grey.

238.From the Objects


and Timeline panel,
click on the Scope
Up button.

155
239.From the Layout
panel in the
Properties panel,
make sure the
Width is Auto, the
ColumnSpan is 1,
and the Right
Margin is 0.

240.Press F5 to build
and run the
application.

241.Use the mouse to


drag the slider.
Notice how it has
practically the same
look and feel as our
original design, but
acts just like a user
would expect a slider
to.

242.Close the
application.

156
Exercise 5 – GridSplitter Controls

Steps Screenshots

243.In the Objects and


Timeline panel,
double-click the
VideoPlayer_UI_de
sign to bring it into
scope.

244.Select the Splitter


and Splitter_Thumb
nodes.

245.Right-click the
selected group and
select Cut.

246.In the Toolbox,


click on the Asset
Library.

157
247.In the Asset
Library dialog, click
on the GridSplitter.

248.Draw a grid splitter


along the border
between the main
movie and the movie
list, right where we
just cut the design
assets from. It’s
tough to get it to fit
exactly, so we’ll
refine the layout in
the next few steps.

158
249.Press V to activate
the Selection tool.

250.Move the grid


splitter so that its top
edge snaps to the
bottom edge of the
logo region and its
left edge snaps to
the right edge of the
video region. You
may want to use the
Zoom tool to get a
better view.

251.Resize the grid


splitter using its
bottom right
transformation
adorner so that its
bottom edge snaps
to the bottom of the
window.

252.From the Layout


panel in the
Properties panel,
change the Width to
8 and Right Margin
to -4. This will center
it on the middle grid
line.

159
253.Right-click on the
grid splitter and
select Edit Control
Parts (Template) |
Edit a Copy….

254.In the Create Style


Resource dialog,
change the
Resource name
(Key) to
GridSplitterStyle_V
ideoPlayer and
press OK.

160
255.Right-click the
Border node and
select Delete.

256.From the Toolbox,


double-click the Grid
button to add a grid
to the template.

257.Double-click the
[Grid] node to bring
it into scope.

161
258.Right-click the
[Grid] node and
select Paste.

259.From the Layout


panel in the
Properties panel,
change the margins
to 0.

260.From the Objects


and Timeline panel,
click on the
Splitter_Thumb
node to select it.

162
261.In the Layout
panel, change the
HorizontalAlignme
nt to Center and the
VeritcalAlignment
to Center.

262.From the Objects


and Timeline panel,
click on the Scope
Up button.

263.Press F5 to build
and run the
application.

264.Use the mouse to


move the grid
splitter. Notice how it
has practically the
same look and feel
as our original
design, but acts just
like a user would
expect a grid splitter
to.

265.Close the
application.

163
Exercise 6 – ViewBox Controls

Steps Screenshots

266.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoCollection,
select the five copied
video list items.

267.Right-click the
selected group and
select Delete.

164
268.In the Objects and
Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails,
right-click the first
[TextBlock] node
and select View
XAML.

269.When the XAML for


the window is
brought up, the
section that defines
the selected node is
highlighted.

165
270.We’re going to change the XAML for the three textblocks
(Name of Video, Abstract of Video, and 00:00) in the video list item.

This XAML looks like this:

166
<TextBlock TextAlignment="Left" Width="Auto" Height="Auto"
HorizontalAlignment="Left" VerticalAlignment="Top">

<TextBlock.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,6.0288"/>

</TransformGroup>

</TextBlock.RenderTransform>

<Run FontFamily="Arial" FontWeight="Bold" FontSize="12.6083"


Foreground="#FFFFFFFF">Name of Video</Run>

</TextBlock>

<TextBlock TextAlignment="Left" Width="Auto" Height="Auto"


HorizontalAlignment="Left" VerticalAlignment="Top">

<TextBlock.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,25.0463"/>

</TransformGroup>

</TextBlock.RenderTransform>

<Run FontFamily="Arial" FontSize="10.2442"


Foreground="#FFFFFFFF">Abstract of Video</Run>

</TextBlock>

<TextBlock TextAlignment="Left" Width="Auto" Height="Auto"


HorizontalAlignment="Left" VerticalAlignment="Top">

<TextBlock.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="1.33333,0,0,1.33333,233.468,6.44908"/>

</TransformGroup>

</TextBlock.RenderTransform>

<Run FontFamily="Arial" FontStyle="Italic" FontSize="12.6083"


167
271.First, remove all the XAML with strikethroughs:

168
<TextBlock TextAlignment="Left" Width="Auto" Height="Auto"
HorizontalAlignment="Left" VerticalAlignment="Top">

<TextBlock.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,6.0288"/>

</TransformGroup>

</TextBlock.RenderTransform>

<Run FontFamily="Arial" FontWeight="Bold" FontSize="12.6083"


Foreground="#FFFFFFFF">Name of Video</Run>

</TextBlock>

<TextBlock TextAlignment="Left" Width="Auto" Height="Auto"


HorizontalAlignment="Left" VerticalAlignment="Top">

<TextBlock.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,25.0463"/>

</TransformGroup>

</TextBlock.RenderTransform>

<Run FontFamily="Arial" FontSize="10.2442"


Foreground="#FFFFFFFF">Abstract of Video</Run>

</TextBlock>

<TextBlock TextAlignment="Left" Width="Auto" Height="Auto"


HorizontalAlignment="Left" VerticalAlignment="Top">

<TextBlock.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="1.33333,0,0,1.33333,233.468,6.44908"/>

</TransformGroup>

</TextBlock.RenderTransform>

<Run FontFamily="Arial" FontStyle="Italic" FontSize="12.6083"


169
272.Next, remove all the XAML with strikethroughs and add the XAML in bold
italics. Note that the attributes being added to the TextBlock nodes are mostly
the same as the attributes being removed with the Run nodes. You can save
some time here by copying and pasting that text where appropriate:

<TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="12.6083"


Foreground="#FFFFFFFF" Text="Name of Video" TextAlignment="Left"
Width="Auto" Height="Auto" HorizontalAlignment="Left"
VerticalAlignment="Top">

<Run FontFamily="Arial" FontWeight="Bold" FontSize="12.6083"


Foreground="#FFFFFFFF">Name of Video</Run>

</TextBlock>

<TextBlock FontFamily="Arial" FontSize="10.2442"


Foreground="#FFFFFFFF" Text="Abstract of Video" TextAlignment="Left"
Width="Auto" Height="Auto" HorizontalAlignment="Left"
VerticalAlignment="Top">

<Run FontFamily="Arial" FontSize="10.2442"


Foreground="#FFFFFFFF">Abstract of Video</Run>

</TextBlock>

<TextBlock FontFamily="Arial" FontStyle="Italic" FontSize="12.6083"


Foreground="#FFFFF000" Text="00:00" TextAlignment="Left" Width="Auto"
Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">

<Run FontFamily="Arial" FontStyle="Italic" FontSize="12.6083"


Foreground="#FFFFF000">00:00</Run>

</TextBlock>

273.The final XAML should look like this:

170
<TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="12.6083"
Foreground="#FFFFFFFF" Text="Name of Video" TextAlignment="Left"
Width="Auto" Height="Auto" HorizontalAlignment="Left"
VerticalAlignment="Top">

</TextBlock>

<TextBlock FontFamily="Arial" FontSize="10.2442"


Foreground="#FFFFFFFF" Text="Abstract of Video" TextAlignment="Left"
Width="Auto" Height="Auto" HorizontalAlignment="Left"
VerticalAlignment="Top">

</TextBlock>

<TextBlock FontFamily="Arial" FontStyle="Italic" FontSize="12.6083"


Foreground="#FFFFF000" Text="00:00" TextAlignment="Left" Width="Auto"
Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">

</TextBlock>

274.Click on the Design


tab near the top
right corner of the
XAML page to switch
back to design view.

275.Notice that the text


blocks on the video
list item are now
overlapping.

171
276.In the Objects and
Timeline panel,
select the three
[TextBlock] items.

172
277.Press V to activate
the Selection tool.

278.Use the arrow keys


to move the text
blocks near their
original positions.
Note that you will
need to select each
node from the
Objects and
Timeline panel
independently to
move them in
different directions.

279.Double-click the
VideoCollection
node to bring it into
scope.

280.Click on the first


[TextBlock] (the
video name) to
select it.

281.From the Text


panel in the
Properties panel,
change the Font
size to 15.

282.Click on the second


[TextBlock] (the
video abstract) to
select it.

173
283.From the Text
panel in the
Properties panel,
change the Font
size to 12.

284.Click on the third


[TextBlock] (the
video duration) to
select it.

285.From the Text


panel in the
Properties panel,
change the Font
size to 15.

286.Click on the first


text block again to
select it.

287.From the Common


Properties panel,
change the Text to
Name of Video
that is too long.
Notice how the new
video name overlaps
the duration.

174
288.In the Objects and
Timeline panel,
select the first and
third text blocks (the
name and duration).

289.Right-click the
selected group and
select Group Into |
StackPanel.

290.From the Layout


panel, change the
Orientation to
Horizontal and the
Right Margin to 10.
This will allow the
duration text block
to appear after the
end of the name text
block, which can
resize as needed.

291.In the Objects and


Timeline panel, click
on the duration text
block node to select
it.

175
292.In the Layout
panel, change its
Left Margin to 10.
This will provide
some space between
the two text blocks.

293.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails
| VideoThumbnails
right-click the
[Canvas] node and
select Change
Layout Type | Grid.

294.Double-click the
newly created [Grid]
node to bring it into
scope.

176
295.Under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails
| VideoThumbnails
| [Grid] Right-click
the
VideoThumbnailPl
aceHolder node and
select Delete.

296.From the Toolbox,


click on the Asset
Library button.

297.In the Asset


Library dialog,
check the Show All
box and click on the
Image item.

177
298.From the Toolbox,
double-click the
Image button to add
it to the scoped grid.

299.From the Layout


panel in the
Properties panel,
change all margins
to 3.5.

178
300.Under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails
| [StackPanel] Click
on the “Name of
Video” text block to
select it.

179
301.In the Common
Properties panel,
click on the
Advanced Options
button and of the
Text property and
select Data
Binding….

302.In the Create Data


Binding dialog, click
on the Explicit Data
Content.

303.Check the Use a


custom path
expression box and
enter XPath=Name
as the expression.
This means that
when an object is
bound to this control,
its Name field will be
extracted and used
as the text of the
block.

304.Click Finish.

180
305.Under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails
| [StackPanel] Click
on the “00:00” text
block to select it.

306.In the Common


Properties panel,
click on the
Advanced Options
button of the Text
property and select
Data Binding….

181
307.In the Create Data
Binding dialog, click
on the Explicit Data
Content.

308.Check the Use a


custom path
expression box and
enter
XPath=Duration as
the expression. This
means that when an
object is bound to
this control, its
Duration field will
be extracted and
used as the text of
the block.

309.Click Finish.

310.Under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails
, click on the
“Abstract” text
block to select it.

182
311.In the Common
Properties panel,
click on the
Advanced Options
button of the Text
property and select
Data Binding….

312.In the Create Data


Binding dialog, click
on the Explicit Data
Content.

313.Check the Use a


custom path
expression box and
enter
XPath=Abstract as
the expression. This
means that when an
object is bound to
this control, its
Abstract field will
be extracted and
used as the text of
the block.

314.Click Finish.

183
315.Notice that the
three text blocks are
now empty. This is
because they are not
bound to a data
source, resulting in
no text to extract.
When we bind them
later, the text will
automatically
appear.

316.In the Objects and


Timeline panel,
rename the three
text blocks
AbstractText,
NameText, and
DurationText,
respectively. These
names could have
been applied in
Expression Design
and carried through
to here, or done in
Expression Blend
as we are doing right
now.

317.Under
VideoPlayer_UI_de
sign |
VideoCollection |
Item_VideoList |
Video_ItemDetails
| VideoThumbnails
| [Grid], click on the
[Image] node to
select it.

184
318.In the Common
Properties panel,
click on the
Advanced Options
button of the Source
property and select
Data Binding….

319.In the Create Data


Binding dialog, click
on the Explicit Data
Content.

320.Check the Use a


custom path
expression box and
enter
XPath=Thumbnail
as the expression.
This means that
when an object is
bound to this control,
its Thumbnail field
will be extracted and
used as the image
for this control.

321.Click Finish.

185
322.In the Objects and
Timeline panel,
under
VideoPlayer_UI_de
sign, double-click
the VideoCollection
node to bring it into
scope.

323.Under
VideoPlayer_UI_de
sign |
VideoCollection,
right-click the
Item_VideoList
node and select Cut.

324.From the Toolbox,


click and hold the
Button button to
bring up the
alternate tools menu
and select ListBox.

186
325.Draw a listbox
inside the video
collection area. We’ll
fine-tune the layout
in the next few
steps.

326.Press V to activate
the Selection tool.

327.Drag the listbox so


that its left edge
snaps to the right
edge of the grid
splitter and top edge
snaps to the bottom
edge of the top
scrollbar button.

187
328.Resize the listbox
from its bottom right
transformation
adorner so that its
right edge snaps to
the edge of the
window and bottom
edge snaps to the
top edge of the
bottom scrollbar
button.

329.Right-click the
listbox and select
Edit Other
Templates | Edit
Generated Items
(ItemTemplate) |
Create Empty….

330.In the Create


DataTemplate
Resource dialog,
change the
Resource name
(Key) to
DataTemplate_Vid
eoItem and press
OK.

188
331.By default, the
visual component
may be off the
workspace to the top
left. You can pan to it
by holding the
Space bar while
dragging the
workspace down and
to the right.

332.In the Objects and


Timeline panel,
right-click the
DataTemplate node
and select Paste.
This will paste the
video collection item
elements we cut
from the main
layout. Under
Properties, set width
and height to auto.

333.Click the Scope up


button to return to
the top-level scope.

189
334.Right-click the
listbox and select
Add ListBoxItem.

335.Right-click the
newly created listbox
item and select
Edit Other
Templates | Edit
Generated Content
(ContentTemplate)
| Apply
Resource |
DataTemplateVide
oItem.

336.In the Objects and


Timeline panel,
double-click the
[ListBox] node to
bring it into scope.

190
337.Right-click the
[ListboxItem] node
and select Copy.

338.Right-click the
[ListBox] node and
select Paste.

339.Repeat the above


paste process 4
more times for a
total of 6 listbox
items. The result
should look similar to
this screenshot.

191
340.Select all 6
[ListboxItem]
nodes.

341.In the Layout


panel, change the
Width to Auto.

342.Click on the
[ListBox] node to
select it.

343.From the Brushes


panel of the
Properties panel,
click on the
Background brush
and set it to use No
brush.

344.Click on the
BorderBrush brush
and set it to use No
brush.

192
345.Click on the
Foreground brush
and set it to use No
brush.

346.In the Appearance


panel, change the
border thickness to
0.

347.In the Layout


panel, change
HorizontalScrollBa
rVisible to
Disabled and
VerticalScrollBarVi
sible to Visible.

193
348.From the main
menu, select Object
| Edit Other Styles
| Edit
ItemContainerStyl
e | Edit a Copy….

349.In the Create Style


Resource dialog,
change the
Resource name
(Key) to
ListBoxItemStyle_
VideoItem and click
OK.

350.Right-click the
ItemContainerStyl
e node and select
Edit Control Parts
(Edit Template) |
Edit Template….

351.Right-click the
[ContentPresenter
] node and select
Cut.

194
352.Right-click the Bd
node and select
Delete.

353.From the Toolbox,


double-click the Grid
button to add one to
the template.

354.From the Objects


and Timeline panel,
double-click the
[Grid] node to bring
it into scope.

355.In the Layout


panel, change the
Height to Auto.

356.From the Objects


and Timeline panel,
right-click the [Grid]
node and select
Paste.

195
357.In the Layout
panel, change the
Left and Bottom
margins to 0.

358.In the Objects and


Timeline panel, click
on the [Grid] node
to select it.

359.From the Toolbox,


double-click the
Rectangle node to
add one to the grid.

360.In the Layout


panel, change the
Width to Auto and
the
HorizontalAlignme
nt to Stretch.

196
361.In the Brushes
panel, change the
Fill brush to use a
Gradient brush.

362.Select the first


gradient stop and
change its color to
white with an alpha
of 0.

363.Select the second


gradient stop and
change its alpha to
0.

197
364.Remove the Stroke
brush by clicking the
Stroke brush button
and selecting No
brush.

365.In the Triggers


panel, click the +
Property button to
add a property
trigger.

366.In the Properties


when active panel,
change the newly
created item under
Activated when to
use the
IsMouseOver
property. The
changes we make at
this point will only
apply to the element
when their
IsMouseOver
property is true.

198
367.In the Brushes
panel, click the Fill
brush button.

368.Change the alpha of


the second gradient
stop to 50.

369.The item templates


should now look
similar to this
screenshot, which
indicates the look
when the item has
the mouse over it.

370.From the Toolbox,


click the Brush
Transform button to
activate the Brush
Transform tool.

199
371.Drag the back of
the gradient
transform arrow near
the middle of the top
of the item template.
Note that the arrow
may not refresh
immediately. In that
case, you can zoom
in one level and then
back out to refresh it
manually.

372.From the Triggers


panel, click on the
IsSelected = True
node to select it.

373.In the Brushes


panel, change the
alpha of the second
gradient stop to 30.

200
374.In the Objects and
Timeline panel, click
the Scope up
button.

375.Click the Scope up


button again to
move up to the top
level.

376.Press F5 to build
and run the
application.

377.Try out the


functionality of the
listbox by moving
the mouse over the
items and clicking on
them.

378.Close the
application.

379.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoCollection,
right-click the
ScrollBar_Down
node and select
Delete.

201
380.In the Objects and
Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoCollection,
right-click the
ScrollBar_Up node
and select Cut.

381.Double-click the
VideoPlayer_UI_de
sign node to bring it
into scope.

382.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoCollection,
Click the [ListBox]
node to select it.

383.From the Layout


panel in the
Properties panel,
change the Top and
Bottom margins to
0.

202
384.Right-click the
[ListBox] node and
select Edit Control
Parts (Template) |
Edit a Copy….

385.In the Create Style


Resource dialog,
change the
Resource name
(Key) to
ListBoxStyle_Video
Collection and
press OK.

203
386.Right-click the
[ScrollViewer]
node and select Edit
Control Parts
(Template) | Edit a
Copy….

387.In the Create


ControlTemplate
Resource dialog,
change the
Resource name
(Key) to
ScrollViewerContr
olTemplat
e_VideoCollection
and press OK.

388.Press V to activate
the Selection tool.

389.Double-click the
column gridline to
remove it.

204
390.Click the
PART_ScrollConten
tPresenter node to
select it.

391.In the Layout


panel, change the
Right Margin to 0.

392.In the Objects and


Timeline panel, click
on the
PART_VerticalScrol
lBar node to select
it.

205
393.From the Layout
panel of the
Properties panel,
make the following
changes:

○ Width to
Auto

○ Horizontal
Alignment to
Stretch

○ Left Margin
to 0

○ Right Margin
to 0

394.In the Brushes


panel, change the
Background brush
to No brush.

395.Change the
Foreground brush
to No brush.

206
396.Right-click the
PART_VerticalScrol
lBar node and select
Edit Control Parts
(Template) | Edit a
Copy….

397.In the Create Style


Resource dialog,
change the
Resource name
(Key) to
ScrollBarStyle_Vid
eoCollection and
press OK.

207
398.Right-click the
[RepeatButton]
node and select Edit
Control Parts
(Template) | Edit
Template.

399.Right-click the
Chrome node and
select Delete.

400.Right-click the
Template node and
select Paste.

208
401.In the Layout
panel, change the
Width to Auto.

402.Click on the Scope


Up button to move
up one level.

403.Click on the second


[RepeatButton]
node to select it. This
node represents the
bottom scrollbar
button, which uses
the same template
as the top button.

404.From the
Transform panel in
the Properties
panel, click the Flip
tab and click the Flip
Y-axis button. This
will make the arrow
in the bottom
scrollbar point the
right way.

209
405.At the top left
corner of the video
collection there is a
row marker (an
unlocked lock). Click
the lock, which will
turn into a locked
lock.

406.Click the locked


lock once again. This
will provide more
height to the top
scrollbar button so
that the whole arrow
is visible.

407.Near the bottom


left of the video
collection is another
unlocked lock icon.
Click it, which will
turn into a locked
lock.

408.Click the locked


lock once again to
give the bottom
scrollbar button
more space to
display.

210
409.In the Objects and
Timeline panel,
locate the Template
| BG| PART_Track |
Thumb | Thumb
node. Click on it to
select it.

410.From the
Appearance panel
in the Properties
panel change the
Visibility to
Hidden.

411.In the Objects and


Timeline panel, click
the Scope up button
to move up one
level.

412.Click the
PART_ScrollConten
tPresenter node to
select it.

211
413.On the workspace,
resize the selected
item from its top left
transformation
adorner so that it
snaps to the grid
splitter and rests
directly underneath
the top scrollbar
button.

414.Resize the selected


item from its bottom
right transformation
adorner so that it
snaps to the right
edge of the window
and rests directly
above the bottom
scrollbar button.

415.Click the Scope up


button to move up
one level.

416.Click the Scope up


button again to
move up to the top
level.

212
417.Press F5 to build
and run the
application.

418.Try out the


functionality of the
listbox by pressing
the bottom scrollbar
button. It should
scroll down once.

419.Close the
application.

213
Exercise 7 – Video Controls & Triggers

Steps Screenshots

420.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign, double-click
the [Grid] node to
bring it into scope.

421.Rename the [Grid]


node to Video.

422.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign | Video, right-
click the
VideoPlaceHolder
node and select
Delete.

423.From the Files


panel in the Project
panel, double-click
the textvideo.wmv
file to add it to the
Video grid.

214
424.You may see this
dialog, which
indicates the video is
opening.

425.The video is added


to the scoped
container and should
look similar to this
screenshot.

426.From the Layout of


the Properties
panel, change all
margins to 5.

215
427.Press F5 to build
and run the
application.

428.The video should


play automatically.

429.Close the
application.

430.From the Triggers


panel, make sure the
Window.Loaded
trigger is selected
and click - Trigger.

431.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoControls |
Stack_ButtonContr
ols , locate the
Button_Play node.

432.In the Triggers


panel, click + Event
to add an event.

216
433.Change the object
to Button_Play.

434.Change the event


to Click.

435.Click the Add new


action button to add
a new action to start
when the trigger
occurs.

436.By default, the


action here is to
begin playing
testvideo_wmv, so
we don’t need to
make any changes.
However, we could
access the other
objects and their
respective events
from these
dropdowns if
needed.

217
437.Repeat the process,
but make it so that
the
Button_Pause.Click
event pauses the
video.

438.Repeat the process


once again, but
make it so that the
Button_Stop.Click
event stops the
video.

439.Press F5 to build
and run the
application.

440.You can now use


the buttons to start
and stop the video,
but when you pause,
there is no way to
resume. We will fix
that in the next few
steps.

441.Close the
application.

218
442.Select the
Button_Stop.Click
trigger.

443.Change its action to


Begin the video.

444.In the Triggers


panel, select the
Button_Play.Click
trigger.

445.Change its action to


Resume the video.
Rather than start
from the beginning,
this button will pick
up where it left off.

219
446.Select the
Button_Stop.Click
trigger. Click on the
Add new action
button to add a new
action for the
Button_Stop.Click.

447.Make it so that the


second action will
Pause the video.
Beginning and
pausing the video
will leave it ready for
the Button_Play to
start it.

448.Click on the +
Event button to add
a new event.

220
449.The default event is
Window.Loaded,
which is what we
want.

450.Click on Add new


action to add a new
action.

451.The default action is


to start the movie,
which is what we
want.

452.Click on Add new


action to add
another new action.

221
453.Change the second
action to Pause the
movie. This way the
movie will be ready
to be resumed by the
Button_Play as
though it was
starting from the
beginning.

454.Press F5 to build
and run the
application.

455.You can now use all


the buttons, which
work as expected.
When the movie is
paused the Play
button resumes it.

456.Close the
application.

222
Exercise 8 –Event Handlers

Steps Screenshots

457.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign |
VideoControls,
right-click the
[Slider] node and
select Rename.

458.Type slider as the


new name.

459.From the Project


panel, right-click the
VideoPlayer project
node and select Add
Existing Item….

223
460.In the Add
Existing Item
dialog, navigate to
the <labroot>\
VideoPlayer_Asset
s folder and select
the
VideosPlayerContr
ols.cs file. This file
contains code
written for us by a
developer.

461.Press Open to add


it to the project.

462.From the main


menu, select
Project | Build
Project.

463.From the Common


Properties dialog,
click the Advanced
property options
button next to
Maximum.

224
464.In the Advanced
Properties dialog,
click Data
Binding….

465.In the Create Data


Binding dialog, click
the Element
Property tab.

466.With the Window


node selected under
Scene elements,
select the
TotalDuration node
under Properties
and press Finish.

225
467.In the Objects and
Timeline panel,
click the Window
node to select it.

468.In the Properties


panel, click on the
Events button to
switch to events
view.

469.Scroll to find the


Loaded event.

470.Type
WindowLoaded
and press Enter.
This method was
written by a
developer ahead of
time. Visual Studio
2005 will launch
after Enter is
pressed. (If installed)

471.In Visual Studio


2005, we can review
the code written by
our developer (if
installed), otherwise
you will see the
following dialog box.

226
472.Switch back to
Expression Blend
(if you are in VS)
otherwise click OK in
the Copy to
Clipboard dialog
box.

473.In the Objects and


Timeline panel,
under
VideoPlayer_UI_de
sign | Video, click
the testvideo_wmv
node to select it.

227
474.In the Properties
panel, locate the
MediaOpened
event and type
getInfo.

475.Press Enter to
apply the event
handler, which will
open Visual Studio
2005 to it. (if
installed)

476.Review the code


written by the
developer. (if VS
installed)

477.Switch back to
Expression Blend,
or click OK in the
dialog box.

478.In the workspace,


click the XAML
button to switch to
XAML view.

479.From the main


menu, select Edit |
Find….

480.In the Find dialog,


type mediatimeline
and click Find Next.

481.In the MediaTimeline tag, add the following XAML in bold italics:

<MediaTimeline CurrentTimeInvalidated="UpdatePosition"
d:DesignTimeNaturalDuration="58.925" BeginTime="00:00:00"
Storyboard.TargetName="testvideo_wmv" Source="testvideo.wmv"/>

228
482.Click the Design
button to switch
back to design
mode.

483.In the Objects and


Timeline panel,
under
VideoPlauer_UI_de
sign |
VideoControls,
click on the slider
node to select it.

484.Set the
PreviewMouseLeft
ButtonDown event
to BeginScrub and
press Enter.

485.Switch back to
Expression Blend,
or click OK in the
dialog box.

486.Set the
PreviewMouseLeft
ButtonUp event to
EndScrub and press
Enter. Switch back
to Expression
Blend, or click OK in
the dialog box.

229
487.Click the
Properties button
to switch back to
Properties view.

488.Press F5 to build
and run the
application.

489.Notice how the


slider now
automatically follows
the flow of the video.
You can also
manually drag the
slider to change the
current video
location.

490.Close the
application.

230
Exercise 9 –Data Binding

Steps Screenshots

491.In the Data panel


of the Project panel,
click the +XML
button to create a
new XML data
source.

492.In the Add XML


Data Source dialog,
click Browse….

493.Navigate to the
folder the project
was created in and
select Playlist.xml.

494.Press Open to
create the data
source.

231
495.Expand the data
source nodes to
locate the Video
(Array) node.

496.Drag this node onto


the video collection
listbox.

497.In the context


menu, select Bind
“Video” to
“ListBox”.

498.In the Create Data


Binding dialog, click
OK.

499.In the Create Data


Template dialog,
select the Current
or Predefined Data
Template option
and click OK.

232
500.The workspace
should now look
similar to this
screenshot.

501.In the Objects and


Timeline panel,
locate the [ListBox]
node under the
VideoCollection.

502.Right-click the node


and select Edit
Other Templates |
Edit Generated
Items
(ItemTemplates) |
Edit Template.

503.Right-click the
Video_ItemDetails
node and select
Copy.

504.Click the Scope up


button to move up to
the top-level scope.

233
505.Double-click the
SelectedVideo
node to bring it into
scope.

506.Select the items


under the
SelectedVideo
node.

507.Right-click the
selected group and
select Delete.

508.Right-click the
SelectedVideo
node and select
Paste.

509.Move the newly


pasted video info so
that it has a small
margin along its left
and top edges.

510.Hold the Shift key


while resizing from
the bottom so the
group maintains it
proportions.

234
511.From the Common
Properties panel
under the
Properties panel,
click on the
Advanced property
options button next
to the DataContext
item.

512.In the Advanced


property options
dialog, click Data
Binding….

235
513.In the Create Data
Binding dialog, click
the Element
Property tab.

514.Under Scene
elements, locate
the
[System.Windows.
Controls. ListBox]
node and click on it.

515.Under Properties,
click on the
SelectedItem
property.

516.Click Finish to
apply the data
context.

517.Press F5 to build
and run the
application.

518.Notice how the


video collection is
now populated with
the items from the
XML file. You can
even scroll up and
down and select
items, which show in
the current video
info.

519.Close the
application.

236
Exercise 10 –Customizing The Application Window

Steps Screenshots

520.In the Objects and


Timeline panel, click
on the Window
node to select it.

521.From the
Appearance panel
in the Properties
panel, change the
Window Style to
None.

522.From the Common


Properties panel,
change the
ResizeMode to
CanMinimize.

237
523.Click on the Events
button to switch to
Events view.

524.Set the
MouseDown event
handler to
StartDrag and press
Enter.

525.Switch back to
Expression Design.

526.In the Objects and


Timeline panel, click
on
Button_Minimize to
select it.

527.From the main


menu, select Tools |
Make Button….

238
528.In the Create Style
Resource dialog,
change the
Resource name
(Key) to
ButtonStyle_Butto
nMinimize and click
OK.

529.In the Events


panel, set the Click
event handler to use
MinWindow and
press Enter.

530.Switch back to
Expression Design.

531.Click on the
Properties button
to switch back to
Properties view.

532.In the Common


Properties panel,
clear out the content
so no text is drawn in
the button.

239
533.In the Objects and
Timeline panel, click
on Button_Close to
select it.

534.From the main


menu, select Tools |
Make Button….

535.In the Create Style


Resource dialog,
change the
Resource name
(Key) to
ButtonStyle_Butto
nClose and click OK.

536.In the Common


Properties panel,
clear out the content
so no text is drawn in
the button.

537.Click on the Events


button to switch to
Events view.

240
538.In the Events
panel, set the Click
event handler to use
CloseWindow and
press Enter.

539.Press F5 to build
and run the
application.

540.The application
should now be able
to be dragged
around the screen as
well as minimized
and closed using the
custom buttons.

541.Close the
application.

241
The School Of Fine Art

Contents

Contents..............................................................................................................201
Background.........................................................................................................201
Exercise 1 – Importing Visual Studio Projects......................................................202
Exercise 2 – Working With Design & Layout Tools..............................................204
Exercise 3 – Importing Design Elements From A XAML File.................................209
Exercise 4 – Applying Resources.........................................................................211
Exercise 5 – Working With Grids.........................................................................219
Exercise 6 – Midpoint Review..............................................................................227
Exercise 7 – Working With Control Templates.....................................................239
Exercise 8 – Working With Event Handlers..........................................................251
Exercise 9 – Working With Bitmap Effects...........................................................254
Exercise 9 – Working With Bitmap Effects

Background
The Fourth Coffee School of Art has developed an application to be used for tracking the
progress of its students. While the application is functionally complete, the developer did not
attempt to make it visually appealing, leaving all design tasks to you. In this lab, we’ll walk
through the process of making the existing application beautiful by using the features of
Expression Blend.

242
Exercise 1 – Importing Visual Studio Projects

Steps Screenshots

1. Choose Start, All Programs,


Microsoft Expression, Microsoft
Expression Blend Beta 1.

2. On the File menu, select Open


Project.... Navigate to
<labroot>\Assets\SchoolOfFine
Art.sln and then click OK.

3. Select the Project panel by clicking


on its tab in the Solution
Explorer, which is in the top right
corner of Expression Blend by
default.

243
4. Double-click SOFALogin.xaml in
the Project panel to open it. This
window represents the login screen
of the application built by the
developer.

5. Double-click SOFAMain.xaml in
the Project panel to open it. This
window represents the main view of
the application built by the
developer.

6. From the Project menu, select


Test Solution to run the
application.

244
7. In the running application, press
the Login button to log in to the
system.

8. Review the application. Note that it


is fully functional, but is visually
unappealing. When satisfied, close
the application.

245
Exercise 2 – Working With Design & Layout Tools

9. In Expression Blend, select


the open SOFALogin.xaml
page tab to bring it to the
front.

10.Select the Zoom tool from


the Toolbox.

11.Use the mouse to drag select


a box slightly larger than the
login window. A dotted line
will trace around the entire
login screen. When you let
go, it will zoom to fit that
selection to the workspace.

12.From the Toolbox, select the


Direct Selection tool.

246
13.In the Objects and Timeline
panel, double-click the [Grid]
item to select it. Be sure to
double-click as single-clicking
the item will not select it. You
will know the item is selected
once it is surrounded by a
yellow rectangle.

14.Select the Properties panel


by clicking on its tab in the
Solution Explorer.

15.Click the No Brush button in


the Brushes panel to remove
the pink background.

16.The login window will now


look like this.

247
17.Rather than keeping the color
black, we’ll make the
background a different solid
color by selecting Solid Color
Brush from the Brushes
panel, followed by selecting
white as the color to use.
Note that there are multiple
ways to select white:

○ Pick the color from a


swatch

○ Edit the RGB values

○ Enter it as hexadecimal
(note that the last two
digits represent the
brush’s alpha)

18.In the Layout panel, make


the following property
changes:

○ Set Width to 850

○ Set Height to 650

248
19.If you need to zoom out so
that the whole login window
is visible on the screen, you
can do so by pressing Ctrl+-
(Ctrl and the minus key
simultaneously).

20.Switch the grid to Grid


Layout Mode by clicking on
the Grid Layout toggle. You
will know you are in Grid
Layout Mode when unlocked
padlocks appear at each row
and column. Note that the
window may already be in
Grid Layout mode, in which
case you may skip this step.

249
21.Double-click on the middle
left row line definition to
remove it. This will adjust the
grid to have three rows
instead of four.

22.At this point, we want to


select the middle row. To do
this, click on the area directly
to the left of the shaded row
marker. The cursor will turn
into a pointing finger, similar
to how it looks when clicking
a hyperlink in a Web browser.

250
23.When selected, the whole row
will be highlighted.

24.In the Properties panel, set


the highlighted row to have a
Height of 175 pixels. Note
that the button and login grid
will now overlap.

251
Exercise 3 – Importing Design Elements From A XAML File

25.Select the Project panel from


the Solution Explorer by
clicking on its tab.

26.Open Login_Elements.xaml
by double-clicking it (under
the Assets folder).

27.Select Edit | Select All to


select all items in the
workspace.

28.Select Edit | Copy to copy


the items to the clipboard.

252
29.Switch back to the
SOFALogin.xaml page.

30.From the Blend menu bar,


select Edit | Paste to paste
the art from the clipboard.

31.From the Blend menu bar,


select Object | Order |
Send to Back to send the art
to the background, allowing
us to realign the controls.

32.Click the Selection tool from


the top of the toolbox.

33.Rearrange the user interface


controls to look like the layout
in the screenshot here.

253
Exercise 4 – Applying Resources

34.Open the Resources panel


by clicking its tab in the
Solution Explorer.

35.Expand the
ResourceDictionary_01.xa
ml node.

254
36.Select the LoginButton
resource, and drag it onto the
Login button of the window
of the workspace.

37.In the context menu, select


Style to apply the style of the
resource to the existing
button. Note that this doesn’t
change the functionality, just
the look.

38.Select the Username label.

39.Bring the Properties panel to


the front by clicking its tab in
the Solution Explorer.

255
40.Clear the background color by
clicking the No Brush button
of the Brushes panel.

41.Select the Username


textbox.

42.Hold the Ctrl key and select


the Password textbox. Both
textboxes will now be
selected.

43.In the Brushes panel, click


the No Brush button to
remove the background from
the textboxes.

44.In the Brushes panel, click


the BorderBrush button to
select the brush used to draw
the border of the textboxes.

256
45.Click the No Brush button to
remove the border brush. The
window will now look like this.

46.Return to the Resources


pane. Inside the
ResourceDictionary_01.xa
ml node, select the
OrangeColor resource.

47.Drag the OrangeColor


resource onto each textbox,
selecting Foreground from
the context menu provided
each time.

257
48.Select the LoginLabelStyle
resource.

49.Drag the LoginLabelStyle


resource onto each label,
selecting Style from the
context menu provided each
time.

50.At this point, the text from


the labels might not be fully
visible behind the textboxes.
To fix this, make sure you
have the Selection tool
enabled (press V or select it
from the Toolbox). Click on
the grid containing the labels
and textboxes. Find the circle
near the left edge of the grid
and resize the box so all
items are completely visible.
Your window should now look
like this.

258
51.Drag and drop the
LoginPanel resource from
the Resources panel onto
the window, but not on any
existing controls. This will
create a new instance of that
control.

52.Switch to the Selection tool


by pressing V.

53.Resize the LoginPanel to


align with the right side of the
middle column as shown in
the screenshot. Make sure
that the “Login” text rests at
the top of the color art. Note
that the UI controls will not
be properly aligned with the
new panel.

54.With the LoginPanel still


selected, select Object |
Order | Send to Back.

55.With the LoginPanel still


selected, select Object |
Order | Bring Forward. The
LoginPanel is now visible,
but behind the other UI
controls.

259
56.Move the Go button so that it
fits underneath the location of
the login textbox art from the
LoginPanel.

57.Move the _LoginGrid so that


its controls roughly fit into the
background art provided by
the LoginPanel.

58.Double-click the _LoginGrid


node of the Objects and
Timeline panel to select it.

59.Drag the right edge of the


_LoginGrid so that it aligns
with the second column
gridline. You’ll see a red
highlight line appear when
they’re aligned.

260
60.Drag the left edge of the
_LoginGrid so that it fits
inside the LoginPanel frame.

61.Drag the _LoginGrid column


gridline slightly to the right so
that the textboxes are inside
the LoginPanel art and the
labels are fully readable.

62.If desired, drag both


textboxes slightly up or down
to better center in the
background.

63.The login portion of the


window should now look like
this.

261
64.Select Test Solution from
the Project menu (or press
F5) to show your window.
You will need to expand the
bottom right corner of the
window to see all of the UI.
We’ll address that issue later.

65.Note that when you move the


mouse over the Go button, it
shows an animation effect
inherited from the resource
we applied from the
Resources panel.

66.Press Go to log in to the


application. Note that the
functionality still remains,
even though we’ve
completely redesigned the
user interface.

67.Close the application when


satisfied.

262
Exercise 5 – Working With Grids

68.Double-click the [Grid] node


of the Objects and Timeline
panel to select it.

69.From the Resources panel,


drag and drop the
DotsAnimationControl onto
the window to the left of the
LoginPanel.

70.Resize the DotsAnimation


control so that it stretches the
height of the red portion of
the window.

263
71.Press F5 to show the window.
Note that the dots animation
we just added animates in the
window.

72.Close the window when


satisfied.

73.Make sure the workspace is in


Grid Layout Mode. Resting
the mouse over the Layout
Mode Toggle Button at the
top left corner of the window
in the workspace can confirm
this. If not in Grid Layout
Mode, click the toggle.
Unlocked padlocks will appear
when you are in the right
mode.

74.Press V to activate the


Selection tool.

75.Click and drag the second


column gridline slightly to the
left.

264
76.Note that dragging the
column gridline has
manipulated some of the UI
elements as well.

77.Select Undo Move Gridline


from the Edit menu to move
the gridline back where it was
originally.

265
78.For each control that moved Anchored:
when the gridline was moved,
remove its anchor to the
gridline. This can be
accomplished by selecting the
control and clicking on the Not anchored:
Anchor Indicator. The
anchoring has been removed
when there is a visible break
between each side of the
anchor indicator. Controls
that may need to be fixed
include:

○ The Go button

○ The _LoginGrid

○ The LoginPanel

79.Once again, click and drag


the second column gridline to
the left to be sure that the
controls do not move with it.
They should disappear as the
gridline crosses over them.
However, the LoginPanel
remains, which we should fix.

80.Select Undo Move Gridline


from the Edit menu to move
the gridline back where it was
originally.

266
81.Select the LoginPanel by
clicking on the bottom white
part of its UI. Note that we
click on it here because
clicking on it higher up would
likely select one of the
controls in front of it. Note
that the anchor for this
control is on the right side of
the window.

82.Resize the LoginPanel by


dragging its right edge
slightly inside the second
column gridline. You’ll see a
red highlight line appear
when they’re aligned.

267
83.Remove the anchor from the
right side of the control.

84.Drag the second column


gridline to the left to test that
the LoginPanel and all
controls disappear when the
column is resized to small.

85.Select Undo Move Gridline


from the Edit menu to move
the gridline back where it was
originally.

86.Select the middle column of


the main grid by clicking on
the area next to the unlocked
lock icon.

87.In the Properties panel,


expand the Layout panel by
clicking on its expansion
arrow.

268
88.Set the MinWidth property
to 240. This will ensure the
column is always at least 240
pixels wide.

89.Drag the second column


gridline as far left as it will
go. It should stop 240 pixels
to the right of the first column
gridline.

90.Select Undo Move Gridline


from the Edit menu to move
the gridline back where it was
originally.

91.There are two pieces of


background art that we want
to anchor to the second
column gridline. First, select
the red band artwork by
clicking on it. You’ll need to
be sure to click on it between
the animation and the logo.

269
92.Currently, the red band
artwork is anchored to the
right side of the window. To
fix this, resize the red bank
artwork by dragging the right
side so that it aligns with the
left side of the second column
gridline. You’ll see a red
highlight line appear when
they’re aligned. Note that
unlike the other elements
we’ve worked with in the past
few steps, we want the
artwork to remain anchored
to the side.

93.To select the logo


background, click on the
section to the right of the
second column gridline.

270
94.As with the other resizes,
drag the right edge of the
logo background left of the
second column gridline until a
red line appears, indicating
the anchor has moved.

95.To test out our new anchoring


scheme, drag the second
column gridline to the left.
While the main UI elements
will disappear, the artwork
will gracefully resize and
compress.

96.Select Undo Move Gridline


from the Edit menu to move
the gridline back where it was
originally.

97.Click on the Asset Library in


the Toolbox.

271
98.From the Asset Library,
select the GridSplitter
control.

99.Draw a thin GridSplitter to


the right of the second
column gridline.

100.From the Brushes panel in


the Properties panel, select
a dark red to color the
GridSplitter.

272
101.Press F5 to show the
window.

102.In the new window, drag the


GridSplitter we just added
to the left. Note how it has
the same impact on the
running app as dragging the
column gridline had on the
design-time version.

103.Close the window when


satisfied.

273
Exercise 6 – Midpoint Review

104.Open SOFAMain.xaml by
double-clicking its node in the
Project panel of the
Solution Explorer.

105.Select the SOFAMainPage


node of the Objects and
Timeline panel by single-
clicking it.

106.In the Layout panel in the


Properties panel, change the
Width to 850 and the
Height to 650.

274
107.The window should now look
like this screenshot. You may
need to scroll the workspace
to the left.

108.Double-click the MainGrid


node in the Objects and
Timeline panel to select it.

275
109.Set the MainGrid’s
Background color to white
by changing its color in the
Brushes panel of the
Properties panel.

110.Select the StudentList,


ClassList, and two
[StackPanel] controls from
the Objects and Timeline
panel. Note that you can
select multiple items by
single-clicking the first one
and then holding the Ctrl key
while single-clicking the
others.

276
111.With the four items selected,
remove the Background
color by clicking the No
Brush button on the
Brushes panel.

112.The window should now look


like this screenshot.

277
113.From the Objects and
Timeline panel, expand each
[StackPanel] node to find
the
PrintStudentReportButton
control. Single-click to select
it.

114.Drag the
PrintStudentReportButton
node onto the MainGrid node
within the Objects and
Timeline panel. This will
make the
PrintStudentReportButton
control a direct child of the
MainGrid.

278
115.Rearrange the Export
Report and Log Out buttons
so that your window looks like
this screenshot. Note that you
may need to use the
Selection tool to resize.

116.Select the ClassList, and


two [StackPanel] controls
from the Objects and
Timeline panel. Remember
that you can select multiple
items by single-clicking the
first one and then holding the
Ctrl key while single-clicking
the others.

117.After all three are selected,


right-click the selection and
select the Delete option to
remove these controls from
the window.

279
118.The window should now look
like this screenshot.

119.Open the
Main_Elements.xaml file by
double-clicking its node in the
Project panel of the
Solution Explorer.

280
120.Select Edit | Select All to
select all items in the
workspace.

121.Select Edit | Copy to copy


the items to the clipboard.

122.Switch back to the


SOFAMain.xaml file.

123.Select Edit | Paste to paste


the items from the clipboard
to the window.

124.From the Expression Blend


menu, select Object | Order
| Send to Back to send the
newly copied art to the
background.

125.Switch back to the


Main_Elements.xaml file.

126.Select the
Mockup05b_Login_Small_
800_Export node from the
Objects and Timeline panel.

281
127.Open the Properties panel.
Note that the background of
the mockup’s window is being
painted by a brush included
as a local resource.

128.Switch back to the


SOFAMain.xaml window.

129.Select the MainGrid node


from the Objects and
Timeline panel.

130.From the Brushes panel of


the Properties panel, click
the Brush Resources
button.

282
131.Select Brush1 as the brush
to draw the window’s
background with.

132.The window should now look


like this screenshot.

283
133.Resize the StudentList
listbox to fit within the section
indicated by this screenshot.

134.In the Properties panel,


select the BorderBrush
property of the StudentList
and click the No Brush
button to remove the border.

284
135.Expand the Layout panel to
show advanced properties.

136.Disable the
HorizontalScrollBar.

137.Rearrange the Export


Report and Log Out buttons,
as well as the UX label, as
indicated in this screenshot.

285
138.From the
ResourceDictionary_01.xa
ml section of the Resources
panel, drag the
ExportReport resource onto
the Export Report button of
the form.

139.Select Style from the


resulting menu. This will
apply the style of the
resource to the button.

140.From the
ResourceDictionary_01.xa
ml section of the Resources
panel, drag the
LogOutButton resource onto
the Log Out button of the
form.

141.Select Style from the


resulting menu. This will
apply the style of the
resource to the button.

142.The window should now look


like this screenshot.

286
287
Exercise 7 – Working With Control Templates

143.Right-click the student


listbox and select Edit Other
Templates | Edit
Generated Items
(ItemTemplate) | Edit
Template from the menu.

144.Note that the editable


template item now has a
yellow rectangle around it.
Each control inside the
template can be edited
individually.

145.In addition, the Objects


and Timeline panel is
updated to reflect the item
template being edited.

288
146.From the Resources panel,
drag the OrangeColor
resource onto the name label
of the item template and
select Foreground from the
resulting menu.

147.Note that all instances of the


name label in the other items
of the listbox are changed
when the template is
changed.

148.From the Resources panel,


drag the YellowColor
resource onto the rating label
of the item template and
select Foreground from the
resulting menu.

289
149.From the Resources panel,
drag the WhiteColor
resource onto the description
label of the item template and
select Foreground from the
resulting menu.

150.The window should now look


like this screenshot.

151.From the Objects and


Timeline panel, select all
three textblock objects.

290
152.From the Text panel of the
Properties panel, change the
font family to Calibri.

153.In the Objects and


Timeline panel, right-click
the StackPanel node and
select Change Layout Type
| Grid to change the layout
to a grid model.

154.In the Layout panel of the


Properties panel, change the
Height to 90.

291
155.Select the name label.

156.Drag the bottom edge of the


name label up until the
Layout panel of the
Properties panel indicates its
Height is roughly 20.

157.Select the TextBlock2 node


from the Objects and
Timeline panel. This node
refers to the rating label in
the item template.

158.Use the up arrow key of the


keyboard to move the rating
label upward until the top
margin indicator shows
roughly 24.

159.Select the TextBlock node


from the Objects and
Timeline panel. This node
refers to the description label.

292
160.Use the up arrow key of the
keyboard to move the
description label upward until
the top margin indicator
shows roughly 42.

161.Resize the description label


so that it fits comfortably
against the edges of the
template.

162.With the description label


still selected, change the
following values in the Text
panel of the Properties
panel:

○ TextTrimming to
CharacterEllipsis

○ TextWrapping to
Wrap

293
163.The window should now look
like this screenshot.

164.In the Objects and


Timeline panel, select the
three textblock nodes.

165.In the Layout panel, set the


left margin to 70.

294
166.In the Objects and
Timeline panel, click the
Scope Up button to bring the
scope up to the level of the
window.

167.Right-click the [Image]


node under the [Border]
node and select Copy from
the resulting context menu.

295
168.Right-click the StudentList
node and select Edit Other
Templates | Edit
Generated Items
(ItemTemplate) | Edit
Template from the menu.

169.Right-click the StackPanel


node and select Paste from
the resulting context menu.

170.The window should now look


like this screenshot.

296
171.Resize the newly pasted
image so that it has some
space around its margins.

172.Press F5 to test the


application.

173.Press the GO button to log


in.

174.On the main page of the


application, scroll the listbox
up and down to see how the
text is nicely formatted and
fits in with the application.

175.Select the first listbox item


(“Higginbotham, Tom”). Note
that the “selected item” color
theme does not fit well with
the app.

176.Close the application when


satisfied.

297
177.In the Objects and
Timeline panel, click the
Score Up button to bring the
scope up to the level of the
window.

178.From the Expression Blend


menu, select Object | Edit
Other Styles | Edit
ItemContainerStyle | Edit
a Copy….

179.In the Create Style


Resource dialog, press OK to
accept the default options.

298
180.From the Object and
Timeline panel, right-click
the ItemContainerStyle
node and select Edit Control
Parts (Template) | Apply
Resource |
SelectedItemStyle.

181.Press F5 to test the


application.

182.Press the GO button to log


in.

299
183.In the main window of the
application, select an item
from the listbox. Note how
the selection style is now a
much better fit with the rest
of the application.

184.Close the application when


satisfied.

300
Exercise 8 – Working With Event Handlers

185.Open the Window1.xaml


file by double-clicking its node
in the Project panel.

186.Select the window by


clicking its node in the
Objects and Timeline panel.

301
187.In the Appearance panel of
the Properties panel, check
the AllowsTransparency
box.

188.In the Layout panel, change


the Width to 850 and the
Height to 650.

189.In the Miscellaneous panel,


clear the
ShowsNavigationUI box.
You may need to expand the
panel to make this option
visible.

302
190.Press F5 to test the
application.

191.Note that although the


application looks great now
and is fully functional, you
can no longer move or resize
the window.

192.Close the application when


satisfied by pressing Alt+F4.

193.At the top of the Properties


panel, click the Events
button to show the registered
event handlers. This will
change the Properties panel
from Property Mode to
Event Mode.

194.Scroll down to find the


MouseLeftButtonDown
event and type in StartDrag
followed by the Enter key,
the name of a function that
will provide the dragging
functionality for our window.
Note that you may see a
dialog asking for elevated
permissions to perform this
task. If so, allow the task to
execute.

303
195.If you have a version of Depending on whether Visual Studio is installed,
Visual Studio installed, one of the following will be displayed:
Expression will attempt to
launch it with your current
project. If not, it will provide
you with a function definition
you can paste into your code
editor of choice, or email to a
developer.

Or

196.Press F5 to test the


application.

197.Now you should be able to


drag the window around the
screen.

198.Close the application when


satisfied by pressing Alt+F4.

304
Exercise 9 – Working With Bitmap Effects

199.Switch back to the


SOFAMain.xaml window by
double-clicking its node in the
Project panel.

200.In the Toolbox, double-click


the Rectangle tool to add a
rectangle to the window. If
the tool in the position
indicated is not the
Rectangle tool, hold the
button down and select the
Rectangle tool from the
resulting context menu.

305
201.At the top of the Properties
panel, click the Properties
button to change the
Properties panel back to
Property Mode.

202.In the Brushes panel, click


the No Brush button to
remove the fill brush from the
rectangle.

203.Resize the rectangle to take


up most of the window.

306
204.With the rectangle still
selected, select Object |
Auto Size | Fill from the
Expression Blend menu.

205.From the Appearance


panel, press the New button
next to the BitmapEffect
and select Outer Glow to
add an outer glow to the
rectangle’s edge.

206.Click on the yellow bar


indicating the GlowColor of
the effect.

307
207.Change the GlowColor to
white using the color selector.

208.Press the Esc key to dismiss


the color selector when done.

209.Change the GlowSize to 30


and the Opacity to 20%.

308
210.With the rectangle still
selected, select Edit | Copy
from the Expression Blend
menu to copy it to the
clipboard.

211.Open SOFALogin.xaml by
double-clicking its node in the
Project

212.Select Edit | Paste to paste


the rectangle into the login
form.

309
213.Press F5 to run the
application.

214.On the login window, press


the GO button to log in.

215.On the main window, you


can see the subtle glow effect
most noticeably near the
bottom right corner, although
it is present throughout the
edge of the form. Note that
the glow does not spill out
beyond the boundary of the
window itself.

216.Close the application when


satisfied.

310
Fabrikam Ordering Application

Contents

Contents..............................................................................................................259
Background.........................................................................................................259
Notes...................................................................................................................259
Exercise 1 – Getting Started with Expression Blend and the Fabrikam Demo.....260
Exercise 2 – Using Templates to Create Custom Buttons....................................270
Exercise 3 – Working with Property Triggers and Animation...............................278
Exercise 4 – Working with XML Data Binding......................................................288
Exercise 5 – Working with 3D Animation and Event Triggers..............................300
Exercise 6 – More Data Binding...........................................................................305
Exercise 7 – Working with Visual Brushes...........................................................309
Exercise 8 – Designer and Developer Collaboration............................................313
Exercise 8 – Designer and Developer Collaboration

Background
Fabrikam Incorporated has developed an ordering application to be used by customers.
While the application is functionally complete, the developer did not attempt to make it
visually appealing, leaving all design tasks to you. In this lab, we’ll walk through the process
of making the existing application beautiful by using the features of Expression Blend.

Notes

This lab was built and tested using Microsoft Expression Blend Beta 2.At numerous points in this lab you may run into
the situation where selecting an element does not seem to update the Properties pane. This is a known issue and the
best workaround is to scroll up and down within the Objects and Timeline panel until the Properties panel refreshes.
If this workaround does not work, the alternative is to save the project, restart Expression Blend, and then re-load
the project and continue your work.

311
Exercise 1 – Getting Started with Expression Blend and the
Fabrikam Demo

Steps Screenshots

1. From the Start menu, select


All Programs | Microsoft
Expression | Microsoft
Expression | Microsoft
Expression Blend (Beta 2).

2. On the File menu, select


Open Project.... Navigate to
<labroot>\Assets\Fabrika
m_04.sln and then click the
Open button.

312
3. Open the MainWindow.xaml
file by double-clicking on it
from within the Project
panel. This will load the main
Fabrikam window in design
view.

4. Press the Tab key to


maximize the available design
workspace.

313
5. Right-click in the center of the
Fabrikam “Catalog” panel area
and select Set Current
Selection | rectangle from
the menu that appears.

6. Notice that six buttons have


appeared on the far-right side
of Expression Blend. These
buttons represent the
property categories into which
all properties are organized.

314
7. Move and pause the mouse
cursor over each of the six
property buttons and read the
tool tip that appears next to
it. You should see buttons for
Brushes, Appearance,
Layout, Common
Properties, Transform, and
Miscellaneous.

8. Click the Brushes property


button to load the Brushes
window. This window gives
you full access to all available
brush related properties.

9. Press the Esc key to make


the Brushes property window
disappear.

10.Press the F5 key to have


Expression Blend build and
run the application. The
Results pane will provide
feedback during the build
process.

315
11.After the Fabrikam application
window is launched, survey
the current design and
capabilities present. Notice
that the Catalog, Shopping
Cart, Reviews, and
Marketing Assets panes are
ready for implementation and
customization.

12. Close the Fabrikam application


before moving on to the next
step.

13.In Expression Blend, press


the Tab key to return to the
normal working mode where
you can see all available
panels.

14.From the Tools menu, select


Options… to load the
Options window.

316
15. Experiment with the Workspace
Zoom slider to see how you can
modify your work environment to
suit your needs. The zoom value
must be between 50 and 150.

The screenshot to the right


shows that a large zoom value
makes the panels bigger and
easier to read, but it also shrinks
the available design area.

16. Select the zoom value that you


want to work with and click the
OK button. Alternatively, you
could also click the Cancel
button to use the original zoom
value.

17.Double-click the vertical


GridSplitter control between
the Catalog and Shopping
Cart panels of the Fabrikam
window. When selected, it will
appear as shown in the
screenshot to the right.

18.Click on the Resources tab to


make the Resource panel
visible.

317
19.Expand the
SampleControls.xaml
resource dictionary by double-
clicking on it.

20.Drag the Vertical_Splitter


style resource from the
Resources panel and drop it
onto the GridSplitter control
that was selected during the
previous step.

21.Select Style from the context


menu that appears.

318
22.Select the horizontal
GridSplitter between the
“Catalog” and “Reviews”
panels, as shown in the
screenshot to the right.

23.Drag the
Horizontal_Splitter style
resource from the Resources
panel and drop it onto the
GridSplitter control that was
selected during the previous
step.

24.Select Style from the context


menu that appears.

25.Drag the Vertical_Splitter


style resource from the
Resources panel and drop it
onto the GridSplitter control
located between the
“Reviews” and “Marketing
Assets” Fabrikam application
panels.

26.Select Style from the context


menu that appears.

319
27.Drag the
Horizontal_Splitter style
resource from the Resources
panel and drop it onto the
GridSplitter control located
between the “Shopping Cart”
and “Marketing Assets”
Fabrikam application panels.

28.Select Style from the context


menu that appears.

29.Drag the Panel style from the


SampleControls.xaml
resource dictionary and drop
it onto the “Catalog” Fabrikam
application panel.

30.Select Style from the context


menu that appears.

31.The new panel style should


look like this now.

320
32.Repeat the process for the
other panels by dragging the
Panel style resource onto the
“Shopping Cart”, “Reviews”,
and “Marketing Assets” panels
and selecting Style for each.
When done, your window
should look like this.

33.Select the Project panel and


locate the
UI_Elements.xaml file.

34.Open the UI_Elements.xaml


file by double-clicking on the
file within the Project panel.

321
35.Hold down the CTRL key
while selecting the
FabrikamLogo and
RetailLogo elements from
the top of the
UI_Elements.xaml file.

36.Select Edit | Copy from the


main menu.

37.Return to
MainWindow.xaml.

38.Select the DocumentRoot


element by double-clicking on
it in the Objects and
Timeline panel.

39.Select Edit | Paste from the


main menu top paste the
copied resources into the
main window. Note that they
will likely paste above the top
left corner of the window, so
you may need to scroll the
workspace to see them.

40.Hold down the ALT key and


drag the pasted logos over
the empty white area of the
Fabrikam application window,
and drop them into place.

322
41.Press the F5 key to test run
the application and see the
application run with the new
styles applied.

42.Close the Fabrikam


application.

323
Exercise 2 – Using Templates to Create Custom Buttons

43.In the Objects and Timeline


panel, double-click the
[StackPanel] element at
(Window | DocumentRoot
| NavigationGrid).

44.Select the Button tool from


the toolbox on the left side of
Expression Blend.

45.Draw a new Button element


within the selected
StackPanel by holding down
the left mouse button and
dragging until the button
looks similar in size to the
screenshot on the right.

324
46.Edit a copy of the button
template by right-clicking on
the button and selecting Edit
Control Parts (Template) |
Edit a Copy.

47.In the Create Style


Resource window, name the
new style resource
“MyFabrikamButton”. Note
that the new resource is
created in the current
document by default, rather
than in an external resource
dictionary.

48.Select the OK button to


continue.

325
49.If the Resource Key Conflict
window appears, select the
OK button to continue.

50.The Objects and Timeline


panel now shows the contents
of the MyFabrikamButton
template.

51.Single-click the Chrome


element and press the Delete
key. You should only see the
Template node left in the
Objects and Timeline panel.

52.Add a new Grid element to


the MyFabrikamButton
template by double-clicking
on the Grid button from the
toolbar.

The grid will be used to help


layout our new design.

326
53.Double-click the Grid node
within the Objects and
Timeline panel to select it.

54.Open the UI_Elements.xaml


file and zoom into the top-left
corner to find the button
design elements.

55.Press the V key to use the


Selection tool.

56.Select the ButtonElements


element and then select Edit
| Copy from the main menu.

327
57.Return to MainWindow.xaml
and then select Edit | Paste
from the main menu to insert
ButtonElements into the
MyFabrikamButton
template.

58.In the Properties panel,


change the Left and Top
Margin properties to 0 so
that the ButtonElements fit
within the Grid.

59.Resize ButtonElements as
necessary so that it looks like
the screenshot to the right.

60.Select the Asset Library

button ( ) located in the


toolbar on the left side of
Expression Blend to load the
Asset Library window.

61.Single-click on the
ControlPresenter control
within the Asset Library
window. The
ControlPresenter is now the
currently selected control and

328
is also shown in the toolbar.

62.Double-click the
ContentPresenter button to
add a ContentPresenter
control as a child of the Grid
element in the
MyFabrikamButton
template.

63.Verify that a new


ContentPresenter element
was added by looking for it in
the Objects and Timeline
panel. You will also see the
text “Button” in black in the
top left corner of the control
on the window.

64.In the Properties panel,


change the
HorizontalAlignment and
VerticalAlignment
properties to Center. This will
center the text in the control.

329
65.Single-click the Scope Up
button within the Objects
and Timeline panel.

66.Press the V key to use the


Selection tool.v

67.With the new Button element


selected, press Ctrl+C to
copy the button element, and
then press Ctrl+V to paste a
copy of the button. Because it
is being pasted into a
StackPanel, it appears in the
next available spot, which is
directly to the right of the
original.

68.Press Ctrl+V four more times


so that there are a total of six
buttons. These buttons will
also paste in to the right.

330
69.Single-click on the first
Button element from within
the Objects and Timeline
panel.

70.Hold the Shift key down and


then single-click on the last
Button element from within
the Objects and Timeline
panel.

All six buttons should now be


selected as shown in the
screenshot to the right.

71.In the Properties panel,


increase the Right Margin
property to 10 pixels so that
the buttons have some
separation between them.

72.In the Project panel, expand


the images folder and locate
Icon01.png through
Icon06.png.

331
73.Double-click the Icon01.png
file to create a copy of it in
the main Fabrikam window.

Since the StackPanel that


contains the buttons is still
the currently selected
container, the new Image
element will be placed at the
end of the StackPanel by
default. The image may or
may not be visible to you,
depending upon how wide the
buttons are defined to be.

74.Drag the new Image element


so that the mouse cursor is
over the first (far-left)
Button.

75.Hold the Image element over


the first Button until a
message stating “ALT-drag
to place into [Button]”
appears.

76.Press and hold the Alt key


and then release left mouse
button to place the Image
within the first Button. You
may release the Alt key after
the image has been pasted.

332
77.Resize the new Image so
that it fits within the first
Button.

78.Repeat the process of adding


icon images to the remaining
Button elements so that the
next button uses
Icon02.png, and so on until
all six Button elements look
like the screenshot to the
right.

79.Press the F5 key to see the


application run with the new
button images.

80.Close the Fabrikam


application.

333
334
Exercise 3 – Working with Property Triggers and Animation

81.In the Objects and Timeline


panel, double-click the first
Button element to select it
(at Window |
DocumentRoot |
NavigationGrid |
[StackPanel]).

82.Right-click on the Button


element and select Edit
Control Parts (Template) |
Edit Template.

83.Locate the Triggers section


of the Interaction panel.

84.Click on the “+ Property”


button to add a new property
trigger for the
MyFabrikamButton
template.

335
85. Observe that the new property
trigger is currently set to be
activated when “MinWidth = 0”
and that trigger recording mode
is turned on.

86.Change the property trigger


so that it is activated when
the IsMouseOver property is
equal to True.

87.In the Objects and Timeline


panel, expand the
ButtonElements node by
clicking on the expansion

button ( ) located to its left.

88.Single-click the
ButtonBackground element
to select it.

336
89.In the Properties panel,
locate the Brushes section
and single-click on the Fill
property to select it.

90.Single-click on the middle


gradient stop button.

91.Change the Alpha color


component to 50% so that
the button backgrounds will
seem to glow when the mouse
is placed over them.

92.Note that the changes to the


Fill property have been
recorded in the Triggers
section of the Interaction
panel.

337
93.In the Objects and Timeline
panel, single-click the
YellowArrow element.

94.Hold down the Shift key and


then press the Up arrow to
move the YellowArrow
element up slightly as shown
in the screenshot to the right.

95.Press the F5 key to run the


application and see how the
property triggers behave.
Notice that the backgrounds
now glow and the yellow
arrows move up slightly
whenever you mouse over
one of the buttons.

96.Close the Fabrikam


application.

338
97.In the Triggers section of the
Objects and Timeline panel,
click on the small minus
buttons ( ) on the right-hand
side of each previously
recorded property to delete
them.

98.Click on the small plus button

( ) to the right of the


Actions When Activating
description.

99.When the Timeline Needed


window appears asking you to
consent to the creation of a
new timeline, select OK to
continue.

100.In the Objects and


Timeline panel, drag the
animation Playhead to 0.5
seconds using the yellow

triangle ( ), as shown in the


screenshot to the right.

The alternative way to move


the animation Playhead is to
type the desired time value
into the Playhead Position
text box just above the
timeline.

339
101.In the Objects and
Timeline panel, single-click
the ButtonBackground
element to select it.

102.In the Properties panel,


single-click on the middle
gradient stop button.

103.Change the Alpha color


component to 50% so that
the button backgrounds will
seem to glow when the mouse
is placed over them.

This will add an animation key


frame to the timeline,

represented as a white oval (


) on the same row as the
ButtonBackground element.

340
104.In the Objects and
Timeline panel, single-click
the YellowArrow element to
select it.

105.Hold down the Shift key and


then press the Up arrow to
move the YellowArrow
element up slightly as shown
in the screenshot to the right.

This will add an animation key


frame to the timeline,

represented as a white oval (


) on the same row as the
YellowArray element.

341
106.Press the Play button ( ) to
see a preview of the
animation in the designer
window.

107.In the Objects and


Timeline panel, select the
Default timeline from the
drop-down box.

108.In the Triggers panel, select


IsMouseOver = True.

109.Click on the small plus


button

( ) to the right of the


Actions When Deactivating
description.

110.Select the New Timeline…


option in the first drop-down
box below the Actions When
Deactivating section.

342
111.Select the OK button when
the Create Storyboard
Resource window appears.

112.Move the animation


Playhead to 0.5 seconds.

113.In the Objects and


Timeline panel, single-click
the ButtonBackground
element to select it.

343
114.In the Properties panel,
single-click on the middle
gradient stop button.

115.Change the Alpha color


component to 12% and then
back to the original 11%.

This will add an animation key


frame to the timeline,

represented as a white oval (


) on the same row as the
ButtonBackground element.

116.In the Objects and Timeline


panel, single-click the
YellowArray element to select
it.

344
117.Hold down the Shift key and
then press the Up arrow to
move the YellowArrow
element up slightly as shown
in the screenshot to the right.

118.Hold down the Shift key and


then press the Down arrow
to move the YellowArrow
element back down to the
original position.

119.This will add an animation


key frame to the timeline,

represented as a white oval (


) on the same row as the
YellowArray element.

120.In the Objects and


Timeline panel, select the
Default timeline from the
drop-down box.

121.In the Triggers panel, select


IsMouseOver = True.

345
122.Verify that the details for the
IsMouseOver=True
property trigger match the
screenshot on the right.

When the IsMouseOver


property is set to True for a
button, Timeline1 will
gradually animate a glow
effect in the background of
the button while slowly
moving the yellow arrow up.

As soon as the mouse leaves


the button area, the
IsMouseOver property will
be set to False, and
Timeline1 will handoff
control to Timeline2.
Timeline2 will then gradually
return the background and
yellow arrow to their original
values.

123.In the Objects and


Timeline panel, click the

Scope Up button ( ).

346
124.Press the F5 button to run
the application and see how
the addition of property
triggers and animation can
quickly add some dynamic
style to your application.
Notice that all of the buttons
are animated since we edited
their shared template.

125.Close the Fabrikam


application.

347
Exercise 4 – Working with XML Data Binding

126.Double-click on the [Grid]


element located within
Panel_2 (Window |
DocumentRoot | MainGrid
| Panel_2).

127.In the Appearance section


of the Properties panel,
change the Visibility
property to “Visible”.

128.In the Data section of the


Project panel, select the “+
XML” button to add a new
XML data source.

129.In the Add XML Data


Source window, select the
Browse button.

348
130.In the “Browse for XML
data source” window,
navigate to the Fabrikam
project directory and select
data.xml.

131.Click the Open button.

132.In the Add XML Data


Source window, select the
OK button to continue.

133.In the Data section of the


Project panel, locate and
expand the SectionsDS2 |
Sections | Extras | Extra
node.

134.Drag the Extra (Array) data


source node and drop it onto
the ProductList element as
shown in the screenshot to
the right.

349
135.In the context menu that
appears, select the Bind
“Extra” to “ListBox” option.

136.In the Create Data Binding


window, click the OK button
to data bind the new data
source to the ItemsSource
(default) field.

137.In the Create Data


Template window, de-select
the Image and Description
fields so that only Name,
Price, and Units remain.

Note that a preview is


rendered on the right-hand
side of the Create Data
Template window.

138.Select the OK button to


continue.

350
139.In the Objects and
Timeline panel, select the
ProductList element at
(Window | DocumentRoot
| MainGrid | Panel_2 |
[Grid] | ProductGrid)

140.In the Properties panel,


select the Background
brush.

141.Click the “No Brush” button

( ) to remove the white


brush.

351
142.Select the Foreground
brush.

143.Move the mouse cursor over


the color picker and hold
down the left mouse button.

144.With the left mouse button


still pressed, move the mouse
to the upper-left corner of the
color picker so that a white
color is selected.

145.Release the left mouse-


button.

146.Right-click on the
ProductList element and
select Edit Control Parts
(Template) | Apply
Resource |
ListBoxProducts so that the
scroll bar matches the
Fabrikam theme.

352
147.Press the F5 key to run the
application and verify that the
data binding was successful.

Note that the list of products


uses the default template
associated with a ListBox
control, so it does not match
the Units, Product, and
Price columns that were
designed.

148.Close the Fabrikam application.

149.Right-click the ProductList


element and select Edit
Other Templates | Edit
Generated Items
(ItemTemplate) | Edit
Template from the context
menu that appears.

150.In the Objects and


Timeline panel, note that the
item template consists of a
StackPanel with three
TextBlock children elements.

353
151.Right-click on the
StackPanel element and
select Change Layout Type
| Grid.

152.Expand the new Grid


element so that you can see
the three TextBlock
elements.

153.In the Objects and


Timeline panel, single-click
the first TextBlock element
to select it.

154.In the Layout section of the


Properties panel, change the
Left Margin property to 64.

354
155.In the Objects and
Timeline panel, single-click
the second TextBlock
element to select it.

156.In the Layout section of the


Properties panel, change the
Left Margin property to 218
and the Bottom Margin
property to 0.

157.In the Objects and


Timeline panel, single-click
the third TextBlock element
to select it.

158.In the Layout section of the


Properties panel, change the
Left Margin property to 21
and the Bottom Margin
property to 0.

355
159.Select the Ellipse drawing
tool by pressing the E key.

160.Double-click the Ellipse


button from the toolbox to
insert an ellipse into the item
template Grid.

161.In the Layout section of the


Properties panel, change the
Width and Height properties
to 11.

162.In the Brushes section of


the Properties panel, single-
click the Advanced Property
Options button to the right of
the Fill brush (it is a small
square).

356
163.From the context menu that
appears, select Data
Binding…

164.In the Create Data Binding


window, select the Explicit
Data Context tab.

357
165.Select the All Properties
option from the Show drop-
down box.

166.Expand the Fields treeview


so that the Sections | Extras
| Extra node is expanded.

167.Select the Units node as the


property to bind to.

168.Expand the available dialog


options by clicking on the
expand arrow near the
bottom of the window (to the
top left of the Finish button).

169.Select the
UnitsToBrushConverter
value converter. This value
converter will take certain
value ranges of the Units
field and convert them into
Brush colors. Note that this
value converter was created
by a programmer and is not
something that comes with
Expression Blend.

170.Click the Finish button.

358
171.Notice that we now have
colored circles associated with
the number of units available
for each product.

172.Click the Scope Up button in


Objects and Timeline to
return to the main window.

173.Double-click on the
DetailsView element to
select it (at Window |
DocumentRoot | MainGrid
| Panel_2 | [Grid]).

174.In the Common Properties


section of the Properties
panel, single-click on the
Advanced Property Options
button (the little square to the
right of the DataContext’s
New button).

359
175.From the context menu that
appears, select Data
Binding…

176.In the Create Data Binding


window, select the Element
Property tab.

177.Under Scene Elements,


navigate to and select the
ProductList element (at
Window | DocumentRoot |
MainGrid | Panel_2 |
[System.Windows.Controls
.Grid] | ProductGrid)

178.Under Properties, navigate


to and select SelectedItem.

179.Click the Finish button.

180.In the Objects and


Timeline panel, single-click
on the ProductDetailImage
element (under DetailsView
| DetailsImage).

360
181.In the Common Properties
section of the Properties
panel, single-click on the
Advanced Property Options
button to the right of the
Source property.

182.In the Create Data Binding


window, select the Explicit
Data Context tab.

183.Expand the Fields sections


and select the Image node.

184.Click the Finish button.

185.Note that the remaining


elements in the DetailsView
grid, including the product
name, description, and price
details, were databound
previously. There are no
further action items for this
step.

361
186.Press the F5 key to test run
the application and verify that
the product selection and data
binding works as expected.

187.Close the Fabrikam


application after you are done
testing it.

362
Exercise 5 – Working with 3D Animation and Event Triggers

188.In the Objects and


Timeline panel, double-click
on the Viewport_3D element
(at Window |
DocumentRoot | MainGrid
| Panel_2 | [Grid]).

189.Single-click the Hide\Show


button found to the right of
the Viewport_3D element so
that it is no longer hidden.
This is a small button that
visually toggles between an
eye and a circle.

190.An eye icon will appear when


an element is made visible.

191.In the Objects and


Timeline panel, single-click
on the OrthographicCamera
element (at Viewport_3D |
Camera) and explore the
available Camera properties
in the Properties panel.

363
192.Single-click on the
[AmbientLight] element (at
ViewPort_3D |
VPR1000_Group |
ModelVisual3D |
<>Content | Scene2) and
explore the available Light
properties in the Properties
panel.

193.In the Objects and


Timeline panel, double-click
on the Meshes element (at
ViewPort_3D |
VPR1000_Group |
ModelVisual3D |
<>Content | Scene2).

194.Expand the
Group_of_4_Objects
element. Note that the 3D
object is composed of
numerous meshes that were
previously designed outside of
Expression Blend.

195.Double-click on the
VPR1000_Group element.

364
196.Select the VPR00 timeline
from the drop-down box near
the top of the Objects and
Timeline panel.

197.Move the animation


Playhead to 1 second.

198.In the Transform section of


the Properties panel, click on
the Rotation button.

199.Change the Rotation


property for both X and Y to
90 degrees and keep Z at 0
degrees.

365
200.Repeat the process of setting animation key frames at a time of 1 second for the
remaining timelines:

VPR01: Rotate X to 0 degrees, Rotate Y to 0 degrees, and Rotate Z to 0 degrees.

VPR02: Rotate X to 180 degrees, Rotate Y to 0 degrees, and Rotate Z to 90


degrees.

VPR03: Rotate X to 90 degrees, Rotate Y to 0 degrees, and Rotate Z to 90


degrees.

201.In the Objects and


Timeline panel, create a new
timeline by clicking on the ‘+’
button (shows “Create new
timeline” during mouse over)
and type VPR04 for the
resource name.

202.Select the OK button to


continue.

203.Repeat the process of setting animation key frames at a time of 1 second for
the remaining VPR04 timeline:

VPR04: Rotate X to 40 degrees, Rotate Y to -40 degrees, and Rotate Z to 20


degrees.

366
204.Select the Default timeline
from the drop-down box near
the top of the Objects and
Timeline panel

205.In the Objects and


Timeline panel, double-click
on the [StackPanel] element
(at Window |
DocumentRoot | MainGrid
| Panel_2 | [Grid] |
Viewbox | [StackPanel]).
This element contains the 5
static images representing the
different 3D views of the real
3D element.

206.Single-click on the image


element.

207.In the Triggers section of


the Interaction panel, click
the “+ Event” button to add
a new event trigger.

367
208.Change the new event so
that it will trigger when the
image MouseUp event is
raised.

209.Click the ‘+’ button to the


right of the description for the
image.MouseUp event
trigger to add a new action to
perform.

210.Change the new action to


begin the VPR00 timeline.

211.Repeat the process of adding


event triggers for the
remaining images (5 total)
and setting up the appropriate
actions to be performed. For
example, the next image
should begin the VPR01
timeline when the MouseUp
property is raised.

368
212.Press the F5 key to run the
application and see how the
3D animation work turned
out.

213.Close the Fabrikam


application.

369
Exercise 6 – More Data Binding

214.In the Objects and


Timeline panel, select the
Panel_3_Grid element (at
Window | DocumentRoot |
MainGrid | LowerGrid |
Panel_3).

215.In the Properties panel,


change the Visibility
property to “Visible”.

216.In the design view, note that


the Panel_3_Grid already
includes a customized
TabControl with pre-
populated text and a Slider
for controlling zoom
functionality.

217.Open the Resources panel


and expand the
SampleControls.xaml
resource dictionary.

370
218.Drag the FabrikamSlider
style resource from the
Resources panel and drop it
over the Slider control that is
next to the magnifying glass
icon.

219.From the context menu that


appears, select the Style
option.

220.In the Objects and


Timeline panel, double-click
on the [RichTextBox]
element (at Panel_3_Grid |
[TabControl] | [TabItem]
“Review1” | [Grid]).

221.In the Text section of the


Properties panel, select the
Advanced Property
Options button to the right
of the FontSize property.

371
222.Select the Data binding…
option.

223.Select the Element


Property tab.

224.In the Scene elements tree


view, select the
Slider_FontSize element (at
Window | DocumentRoot |
MainGrid | LowerGrid |
Panel_3 | Panel_3_Grid).
This is the element that has
the property we want to bind
to.

225.In the Properties tree view,


select the Value property.
This is the property that we
would like to have bound to
the FontSize property of our
text box.

226.Select the Finish button to


continue.

372
227.In the Objects and
Timeline panel, single-click
on the [TextBox] element
(located in Panel_3_Grid).

228.In the Common Properties


section of the Properties
panel, select the Advanced
Property Options button to
the right of the Text
property.

229.Select the Data binding…


option.

373
230.Select the Element
Property tab.

231.In the Scene elements tree


view, select the
Slider_FontSize element (at
Window | DocumentRoot |
MainGrid | LowerGrid |
Panel_3 | Panel_3_Grid).
This is the element that has
the property we want to bind
to.

232.In the Properties tree view,


select the Value property.
This is the property that we
would like to have bound to
the Text property of our text
box.

233.Select the small down arrow


button near the bottom for
more options.

234.Select the TwoWay binding


direction. This means that
changes to the [TextBox]
element will update the
Value property of the
Slider_FontSize element,
plus the other way around.

235.In the “Update source


when” drop-down box, select
the PropertyChanged
option.

236.Select the Finish button to


374
237.Press the F5 key to run the
application and verify that the
zoom slider and text box for
controlling the font size works
as expected.

238.Close the Fabrikam


application.

Exercise 7 – Working with Visual Brushes

239.In the Objects and


Timeline panel, double-click
the [Grid] element at
(Window | DocumentRoot
| MainGrid | LowerGrid |
Panel_4).

240.In the Properties panel,


change the Visibility
property for the [Grid]
element to “Visible”.

375
241.In the Objects and
Timeline panel, double-click
the second [Grid] element
listed under (Window |
DocumentRoot | MainGrid
| LowerGrid | Panel_4 |
[Grid]).

242.In the Objects and


Timeline panel, expand the
[Grid] | grid node and
single-click the viewport3D
element.

243.Select Tools | Make Brush


Resource | Make Visual
Brush Resource from the
main menu.

We will use this visual brush


to create a reflection of the
currently selected marketing
asset.

376
244.Use the default name of
“VisualBrush1” by clicking
the OK button.

245.Press the R key to select the


Rectangle tool and draw a
rectangle below the drawing
of the billboard by holding
down the left mouse button
and dragging.

The large yellow arrow in the


screenshot to the right shows
the location of the new
rectangle.

377
246.In the Brushes section of
the Properties panel, click
the Advanced Property
Options button to the right
of the Stroke property and
select Reset from the context
menu that appears.

The Stroke property should


now say “No brush” as
shown in the screenshot to
the right.

247.Click on the Fill property in


the Brushes section.

248.Select the “Brush


resources” button.

249.Navigate to and select the


“VisualBrush1” resource.

378
250.Locate the Transform
section of the Properties
panel.

251.Select the Flip tab (far


right) of the Transform
section.

252.Click the “Flip Y Axis”


button so that the rectangle
looks more like a reflection.

253.Press V to use the


Selection tool.

254.Re-size and move the


reflection rectangle until it
looks similar to the
screenshot to the right.

379
255.Press the F5 key to run the
application and verify that the
visual brush mirrors the
currently selected marketing
asset.

256.Close the Fabrikam


application.

380
Exercise 8 – Designer and Developer Collaboration

257.In the Objects and


Timeline panel, double-click
the CartGrid element (at
Window | DocumentRoot |
MainGrid | Panel_1).

258.In the Properties panel,


change the Visibility
property to “Visible”.

259.Open the Resources panel


and expand the
SampleControls.xaml
resource dictionary.

381
260.Drag the OrderButton style
resource from the Resources
panel and drop it over the
grey Button control that is in
the “Shopping Cart”
Fabrikam application panel.

261.From the context menu that


appears, select the Style
option.

262.Drag the
ShoppingCartButton style
resource from the Resources
panel and drop it over the
grey Button control that is in
the “Catalog” panel of the
window.

382
263.In the Objects and
Timeline panel, single-click
the order button (represented
by the [Button] "Button"
element under Window |
DocumentRoot | MainGrid
| Panel_2 | [Grid]).

264.In the Properties panel,


select the Events button to
show the available events.

265.In the Click event text box,


type AddToShoppingCart
and press the Enter key.
AddToShoppingCart refers
to a block of code that will be
executed to handle clicks on
the order button.

383
266.If you have a version of
Visual Studio installed,
Expression Blend will attempt
to launch it with your current
project and load the
AddToShoppingCart
method.

267.If Visual Studio is not


installed, Expression Blend
will provide you with a
function definition you can
paste into your code editor of
choice, or email to a
developer.
OR

384
268.If Visual Studio was opened
with the project, select all of
the green text contained
within the curly braces for the
AddToShoppingCart
method and select Edit |
Advanced | Uncomment
Selection from the main
menu. This will help simulate
having a developer add the
needed functionality.

269.Close Visual Studio and save


your changes when
prompted.

270.If Visual Studio was not


opened, dismiss the Copy To
Clipboard window by clicking
the Cancel button.

271.Load Notepad and open the


CodeFile2.cs file (you will
need to search for all files
*.*).

272.Remove the “//” comment


characters from all lines in
the AddToShoppingCart
method.

273.Close Notepad and save


your changes when
prompted.

385
274.Back in Expression Blend,
press the F5 key to run the
application and verify that the
shopping cart functionality
has been hooked up to the
Fabrikam user interface
correctly.

275.Close the Fabrikam


application.

276.In the Objects and


Timeline panel, double-click
the DocumentRoot element.

277.Single-click on the Asset


Library button from the
toolbar on the left side of
Expression Blend.

278.In the Asset Library


window, select the Custom
Controls tab.

386
279.Drag the
AnimationController control
onto the MainWindow.xaml
design surface and drop it
just to the right of the multi-
colored circle in the top-right
corner of the Fabrikam user
interface.

280.Press the V key to activate


the Selection tool.

281.Move and re-size the new


AnimationController
element so that it looks like
the screenshot on the right.

282.Open the Resources panel


and expand the
SampleControls.xaml
resource dictionary.

387
283.Drag the FabrikamSlider
style resource from the
Resources panel and drop it
on the AnimationController
element.

284.From the context menu that


appears, select the Style
option.

285.In the Objects and


Timeline panel, click the
drop-down box and select
Timeline1.

286.Single-click on the
rectangle element (at
Window | DocumentRoot).

388
287.In the animation timeline,
move the animation
Playhead to 1 second.

288.In the Properties panel,


select the Properties button
in the top-right part of the
panel to exit the Events
mode.

289.In the Brushes section of


the Properties panel, select
the Fill property.

290.Use the color picker to


choose a red scheme. This
will record a key frame.

389
291.In the animation timeline,
move the animation
Playhead to 2 seconds.

292.Use the color picker to


choose a yellow scheme.
This will record another key
frame.

293.In the animation timeline,


move the animation
Playhead to 3 seconds.

294.Use the color picker to


choose a green scheme. This
will record another key frame.

295.In the animation timeline,


move the animation
Playhead to 4 seconds.

296.Use the color picker to


choose a purple scheme.
This will record another key
frame.

297.Select the Default timeline


from the drop-down box near
the top of the Objects and
Timeline panel

390
298.In the Objects and
Timeline panel, single-click
the [AnimationController]
element.

299.In the Miscellaneous


section of the Properties
panel, change the
StoryBoardName property
to Timeline1 and press
Enter.

300.Change the
NumberOfSeconds property
to 4 and press Enter.

These are custom properties


were added by the developer
of the AnimationController
control.

391
301.Press the F5 key to run the
application and verify that the
custom slider allows the user
to change the background
color.

302.Close the Fabrikam


application.

392

You might also like