Professional Documents
Culture Documents
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
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.
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.
16.Using the
Appearance
panel, change the
Fill to a gradient
brush.
6
17.Select the first
gradient stop and
use a bright
yellow.
7
19.In the Toolbox,
click and hold the
Fill Transform
button to access
its alternative
tools menu. Select
the Gradient
Transform tool.
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.
10
26.Click on the
Gradient
Transform button
in the Toolbox to
activate the
Gradient
Transform tool.
11
28.The canvas should
now look similar to
this screenshot.
12
30.From the
Appearance
panel, change the
Fill to use a
gradient brush.
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.
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.
41.From the
Appearance
panel, change the
Fill to black.
17
42.Also in the
Appearance
panel, change the
Opacity to 50.
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.
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.
23
57.From the
Appearance
panel, click the
More Swatches
button to open the
More Swatches
menu.
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.
63.Click on the
Stroke button
and select None
for the brush.
25
64.Change the
Opacity to 100.
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.
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.
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.
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’).
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.
34
95.In the Toolbox,
click and hold the
Rectangle button
to access its
alternative tools
menu. Select the
Ellipse tool.
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.
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.
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.
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.
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.
123.Draw a rectangle
in the dark blue
region directly
under the title bar.
This rectangle
represents the
thumbnail of the
currently playing
video.
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.
127.Change the
Height to 65. The
Width will
automatically
update.
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.
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.
45
138.Highlight the
text.
139.From the
Appearance
panel, change the
Fill to white.
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.
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.
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.
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.
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.
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.
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.
53
170.Click inside the
left edge of the
grey rectangle to
create the first
point.
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.
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.
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.
59
186.From the
Appearance
panel, change the
Fill to a gradient
brush.
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.
62
195.Click on the
Direct Selection
button in the
Toolbox to
activate the
Direct Selection
tool.
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.
64
202.From the main
menu, elect
Arrange | Group
to pair these
objects into a
group.
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.
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.
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).
68
220.Click on the
Rectangle button
in the Toolbox to
activate the
Rectangle tool.
221.Press
Ctrl+Shift+A to
deselect the
rectangle.
69
225.The canvas
should now look
similar to this
screenshot.
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.
232.Switch back to
the video player
design file.
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.
72
242.In the
Appearance
panel, change the
Fill of the
selected paths to
use the Fabrikam
yellow.
73
245.Select the Outer
Glow effect.
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.
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.
77
258.From the main
menu, change the
Stroke to white.
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.
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.
81
273.Click on the
current video
information and
hold the Alt key
while dragging
onto the video
queue area to
make a copy.
82
278.From the main
menu, select Edit
| Options |
General….
280.Change Stack
gap size to 0.
281.Press OK to close
the dialog.
83
286.Select the 6
media items by
dragging a
selection that
overlaps them.
This will also
select one of the
background
rectangles.
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.
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
89
4. In the top right
corner of
Expression Blend,
locate the Project
panel.
90
7. In the Add Existing
Item dialog,
navigate to the
<labroot>
\VideoPlayer_Asset
s
folder.
○ 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.
91
9. In the Files panel,
right-click the
VideoPlayer project
node.
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.
94
18.In the Files panel,
right-click the
VideoPlayer project
node.
22.Right-click the
media project node
and select New
Folder from the
context menu.
95
24.Right-click the
thumbs project node
and select Add
Existing Item…
from the context
menu.
96
27.Right-click the
media project node
and select New
Folder from the
context menu.
29.Right-click the
videos project node
and select Add
Existing Item…
from the context
menu.
97
32.The project should
now look similar to
this screenshot.
98
Exercise 2 – Layout
Steps Screenshots
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.
100
37.In the Objects and
Timeline panel,
right-click the
LayoutRoot node
and select Change
Layout Type |
Viewbox.
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.
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.
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.
54.Type
BlueLeftRectangle
as the new name
and press Enter.
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.
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.
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.
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.
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.
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.
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)
116
81.Right-click the
VideoPlayer_UI_de
sign node and
select Paste.
82.Right-click the
VideoCollection
node and select
Delete.
117
85.Right-click the newly
created [Grid] node
and select Rename.
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.
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.
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.
121
107.Right-click the
Item_VideoList >
Group_34 node and
select Rename.
110.Check the
ClipToBounds box
to make sure that
the contents are
only visible within
the grid’s bounds.
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.
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
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.
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.
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.
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.
130
149.In the Layout
panel, change the
right margin to 5.
151.Right-click the
[StackPanel] node
and select Rename.
131
153.In the Layout
panel, change the
HorizontalAlignme
nt to Center and all
margins to 0.
155.Select the
Graphic_IconPlay,
Graphic_IconPaus
e, and
Graphic_IconStop
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.
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.
170.Change the
MaxWidth to 700
and the MinWidth
to 124.
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
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.
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….
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.
152
227.In the Layout panel
of the Properties
panel, change the
Width to 31 and the
Height to 27.
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.
154
236.In the Background
dialog, click Reset.
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.
242.Close the
application.
156
Exercise 5 – GridSplitter Controls
Steps Screenshots
245.Right-click the
selected group and
select Cut.
157
247.In the Asset
Library dialog, click
on the GridSplitter.
158
249.Press V to activate
the Selection tool.
159
253.Right-click on the
grid splitter and
select Edit Control
Parts (Template) |
Edit a Copy….
160
255.Right-click the
Border node and
select Delete.
257.Double-click the
[Grid] node to bring
it into scope.
161
258.Right-click the
[Grid] node and
select Paste.
162
261.In the Layout
panel, change the
HorizontalAlignme
nt to Center and the
VeritcalAlignment
to Center.
263.Press F5 to build
and run the
application.
265.Close the
application.
163
Exercise 6 – ViewBox Controls
Steps Screenshots
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.
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.
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>
</TextBlock>
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,25.0463"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,233.468,6.44908"/>
</TransformGroup>
</TextBlock.RenderTransform>
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>
</TextBlock>
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,25.0463"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,233.468,6.44908"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</TextBlock>
</TextBlock>
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>
</TextBlock>
171
276.In the Objects and
Timeline panel,
select the three
[TextBlock] items.
172
277.Press V to activate
the Selection tool.
279.Double-click the
VideoCollection
node to bring it into
scope.
173
283.From the Text
panel in the
Properties panel,
change the Font
size to 12.
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.
175
292.In the Layout
panel, change its
Left Margin to 10.
This will provide
some space between
the two text blocks.
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.
177
298.From the Toolbox,
double-click the
Image button to add
it to the scoped grid.
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….
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.
181
307.In the Create Data
Binding dialog, click
on the Explicit Data
Content.
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….
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.
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….
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.
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.
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….
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.
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.
190
337.Right-click the
[ListboxItem] node
and select Copy.
338.Right-click the
[ListBox] node and
select Paste.
191
340.Select all 6
[ListboxItem]
nodes.
342.Click on the
[ListBox] node to
select it.
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.
193
348.From the main
menu, select Object
| Edit Other Styles
| Edit
ItemContainerStyl
e | Edit a Copy….
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.
195
357.In the Layout
panel, change the
Left and Bottom
margins to 0.
196
361.In the Brushes
panel, change the
Fill brush to use a
Gradient brush.
197
364.Remove the Stroke
brush by clicking the
Stroke brush button
and selecting No
brush.
198
367.In the Brushes
panel, click the Fill
brush button.
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.
200
374.In the Objects and
Timeline panel, click
the Scope up
button.
376.Press F5 to build
and run the
application.
378.Close the
application.
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.
202
384.Right-click the
[ListBox] node and
select Edit Control
Parts (Template) |
Edit a Copy….
203
386.Right-click the
[ScrollViewer]
node and select Edit
Control Parts
(Template) | Edit a
Copy….
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.
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
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….
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.
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.
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.
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.
212
417.Press F5 to build
and run the
application.
419.Close the
application.
213
Exercise 7 – Video Controls & Triggers
Steps Screenshots
214
424.You may see this
dialog, which
indicates the video is
opening.
215
427.Press F5 to build
and run the
application.
429.Close the
application.
216
433.Change the object
to Button_Play.
217
437.Repeat the process,
but make it so that
the
Button_Pause.Click
event pauses the
video.
439.Press F5 to build
and run the
application.
441.Close the
application.
218
442.Select the
Button_Stop.Click
trigger.
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.
448.Click on the +
Event button to add
a new event.
220
449.The default event is
Window.Loaded,
which is what we
want.
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.
456.Close the
application.
222
Exercise 8 –Event Handlers
Steps Screenshots
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.
224
464.In the Advanced
Properties dialog,
click Data
Binding….
225
467.In the Objects and
Timeline panel,
click the Window
node to select it.
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)
226
472.Switch back to
Expression Blend
(if you are in VS)
otherwise click OK in
the Copy to
Clipboard dialog
box.
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)
477.Switch back to
Expression Blend,
or click OK in the
dialog box.
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.
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.
490.Close the
application.
230
Exercise 9 –Data Binding
Steps Screenshots
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.
232
500.The workspace
should now look
similar to this
screenshot.
503.Right-click the
Video_ItemDetails
node and select
Copy.
233
505.Double-click the
SelectedVideo
node to bring it into
scope.
507.Right-click the
selected group and
select Delete.
508.Right-click the
SelectedVideo
node and select
Paste.
234
511.From the Common
Properties panel
under the
Properties panel,
click on the
Advanced property
options button next
to the DataContext
item.
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.
519.Close the
application.
236
Exercise 10 –Customizing The Application Window
Steps Screenshots
521.From the
Appearance panel
in the Properties
panel, change the
Window Style to
None.
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.
238
528.In the Create Style
Resource dialog,
change the
Resource name
(Key) to
ButtonStyle_Butto
nMinimize and click
OK.
530.Switch back to
Expression Design.
531.Click on the
Properties button
to switch back to
Properties view.
239
533.In the Objects and
Timeline panel, click
on Button_Close to
select it.
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
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.
244
7. In the running application, press
the Login button to log in to the
system.
245
Exercise 2 – Working With Design & Layout Tools
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.
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:
○ Enter it as hexadecimal
(note that the last two
digits represent the
brush’s alpha)
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).
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.
250
23.When selected, the whole row
will be highlighted.
251
Exercise 3 – Importing Design Elements From A XAML File
26.Open Login_Elements.xaml
by double-clicking it (under
the Assets folder).
252
29.Switch back to the
SOFALogin.xaml page.
253
Exercise 4 – Applying Resources
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.
255
40.Clear the background color by
clicking the No Brush button
of the Brushes panel.
256
45.Click the No Brush button to
remove the border brush. The
window will now look like this.
257
48.Select the LoginLabelStyle
resource.
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.
259
56.Move the Go button so that it
fits underneath the location of
the login textbox art from the
LoginPanel.
260
60.Drag the left edge of the
_LoginGrid so that it fits
inside the LoginPanel frame.
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.
262
Exercise 5 – Working With Grids
263
71.Press F5 to show the window.
Note that the dots animation
we just added animates in the
window.
264
76.Note that dragging the
column gridline has
manipulated some of the UI
elements as well.
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
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.
267
83.Remove the anchor from the
right side of the control.
268
88.Set the MinWidth property
to 240. This will ensure the
column is always at least 240
pixels wide.
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.
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.
271
98.From the Asset Library,
select the GridSplitter
control.
272
101.Press F5 to show the
window.
273
Exercise 6 – Midpoint Review
104.Open SOFAMain.xaml by
double-clicking its node in the
Project panel of the
Solution Explorer.
274
107.The window should now look
like this screenshot. You may
need to scroll the workspace
to the left.
275
109.Set the MainGrid’s
Background color to white
by changing its color in the
Brushes panel of the
Properties panel.
276
111.With the four items selected,
remove the Background
color by clicking the No
Brush button on the
Brushes panel.
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.
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.
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.
282
131.Select Brush1 as the brush
to draw the window’s
background with.
283
133.Resize the StudentList
listbox to fit within the section
indicated by this screenshot.
284
135.Expand the Layout panel to
show advanced properties.
136.Disable the
HorizontalScrollBar.
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.
140.From the
ResourceDictionary_01.xa
ml section of the Resources
panel, drag the
LogOutButton resource onto
the Log Out button of the
form.
286
287
Exercise 7 – Working With Control Templates
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.
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.
290
152.From the Text panel of the
Properties panel, change the
font family to Calibri.
291
155.Select the name 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.
○ TextTrimming to
CharacterEllipsis
○ TextWrapping to
Wrap
293
163.The window should now look
like this screenshot.
294
166.In the Objects and
Timeline panel, click the
Scope Up button to bring the
scope up to the level of the
window.
295
168.Right-click the StudentList
node and select Edit Other
Templates | Edit
Generated Items
(ItemTemplate) | Edit
Template from the menu.
296
171.Resize the newly pasted
image so that it has some
space around its margins.
297
177.In the Objects and
Timeline panel, click the
Score Up button to bring the
scope up to the level of the
window.
298
180.From the Object and
Timeline panel, right-click
the ItemContainerStyle
node and select Edit Control
Parts (Template) | Apply
Resource |
SelectedItemStyle.
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.
300
Exercise 8 – Working With Event Handlers
301
187.In the Appearance panel of
the Properties panel, check
the AllowsTransparency
box.
302
190.Press F5 to test the
application.
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
304
Exercise 9 – Working With Bitmap Effects
305
201.At the top of the Properties
panel, click the Properties
button to change the
Properties panel back to
Property Mode.
306
204.With the rectangle still
selected, select Object |
Auto Size | Fill from the
Expression Blend menu.
307
207.Change the GlowColor to
white using the color selector.
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
309
213.Press F5 to run the
application.
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
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.
313
5. Right-click in the center of the
Fabrikam “Catalog” panel area
and select Set Current
Selection | rectangle from
the menu that appears.
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.
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.
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.
317
19.Expand the
SampleControls.xaml
resource dictionary by double-
clicking on it.
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.
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.
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.
321
35.Hold down the CTRL key
while selecting the
FabrikamLogo and
RetailLogo elements from
the top of the
UI_Elements.xaml file.
37.Return to
MainWindow.xaml.
322
41.Press the F5 key to test run
the application and see the
application run with the new
styles applied.
323
Exercise 2 – Using Templates to Create Custom Buttons
324
46.Edit a copy of the button
template by right-clicking on
the button and selecting Edit
Control Parts (Template) |
Edit a Copy.
325
49.If the Resource Key Conflict
window appears, select the
OK button to continue.
326
53.Double-click the Grid node
within the Objects and
Timeline panel to select it.
327
57.Return to MainWindow.xaml
and then select Edit | Paste
from the main menu to insert
ButtonElements into the
MyFabrikamButton
template.
59.Resize ButtonElements as
necessary so that it looks like
the screenshot to the right.
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.
329
65.Single-click the Scope Up
button within the Objects
and Timeline panel.
330
69.Single-click on the first
Button element from within
the Objects and Timeline
panel.
331
73.Double-click the Icon01.png
file to create a copy of it in
the main Fabrikam window.
332
77.Resize the new Image so
that it fits within the first
Button.
333
334
Exercise 3 – Working with Property Triggers and Animation
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.
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.
337
93.In the Objects and Timeline
panel, single-click the
YellowArrow element.
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.
339
101.In the Objects and
Timeline panel, single-click
the ButtonBackground
element to select it.
340
104.In the Objects and
Timeline panel, single-click
the YellowArrow element to
select it.
341
106.Press the Play button ( ) to
see a preview of the
animation in the designer
window.
342
111.Select the OK button when
the Create Storyboard
Resource window appears.
343
114.In the Properties panel,
single-click on the middle
gradient stop button.
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.
345
122.Verify that the details for the
IsMouseOver=True
property trigger match the
screenshot on the right.
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.
347
Exercise 4 – Working with XML Data Binding
348
130.In the “Browse for XML
data source” window,
navigate to the Fabrikam
project directory and select
data.xml.
349
135.In the context menu that
appears, select the Bind
“Extra” to “ListBox” option.
350
139.In the Objects and
Timeline panel, select the
ProductList element at
(Window | DocumentRoot
| MainGrid | Panel_2 |
[Grid] | ProductGrid)
351
142.Select the Foreground
brush.
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.
353
151.Right-click on the
StackPanel element and
select Change Layout Type
| Grid.
354
155.In the Objects and
Timeline panel, single-click
the second TextBlock
element to select it.
355
159.Select the Ellipse drawing
tool by pressing the E key.
356
163.From the context menu that
appears, select Data
Binding…
357
165.Select the All Properties
option from the Show drop-
down box.
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.
358
171.Notice that we now have
colored circles associated with
the number of units available
for each product.
173.Double-click on the
DetailsView element to
select it (at Window |
DocumentRoot | MainGrid
| Panel_2 | [Grid]).
359
175.From the context menu that
appears, select Data
Binding…
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.
361
186.Press the F5 key to test run
the application and verify that
the product selection and data
binding works as expected.
362
Exercise 5 – Working with 3D Animation and Event Triggers
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.
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.
365
200.Repeat the process of setting animation key frames at a time of 1 second for the
remaining timelines:
203.Repeat the process of setting animation key frames at a time of 1 second for
the remaining VPR04 timeline:
366
204.Select the Default timeline
from the drop-down box near
the top of the Objects and
Timeline panel
367
208.Change the new event so
that it will trigger when the
image MouseUp event is
raised.
368
212.Press the F5 key to run the
application and see how the
3D animation work turned
out.
369
Exercise 6 – More Data Binding
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.
371
222.Select the Data binding…
option.
372
227.In the Objects and
Timeline panel, single-click
on the [TextBox] element
(located in Panel_3_Grid).
373
230.Select the Element
Property tab.
375
241.In the Objects and
Timeline panel, double-click
the second [Grid] element
listed under (Window |
DocumentRoot | MainGrid
| LowerGrid | Panel_4 |
[Grid]).
376
244.Use the default name of
“VisualBrush1” by clicking
the OK button.
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.
378
250.Locate the Transform
section of the Properties
panel.
379
255.Press the F5 key to run the
application and verify that the
visual brush mirrors the
currently selected marketing
asset.
380
Exercise 8 – Designer and Developer Collaboration
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.
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]).
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.
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.
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.
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.
387
283.Drag the FabrikamSlider
style resource from the
Resources panel and drop it
on the AnimationController
element.
286.Single-click on the
rectangle element (at
Window | DocumentRoot).
388
287.In the animation timeline,
move the animation
Playhead to 1 second.
389
291.In the animation timeline,
move the animation
Playhead to 2 seconds.
390
298.In the Objects and
Timeline panel, single-click
the [AnimationController]
element.
300.Change the
NumberOfSeconds property
to 4 and press Enter.
391
301.Press the F5 key to run the
application and verify that the
custom slider allows the user
to change the background
color.
392