ejemplo con expression blend manual 1

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:

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

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.

1

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:

o Name to VideoPlayer_UI

o Resolution to 72 px/inch

o Width to 850o Height to 580

4. Click OK to create the new document.

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.

2

8. Repeat the last step by dragging vertical guides at 515 and 850.

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

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.

3

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

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.

4

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

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

5

18. Select the second gradient stop and select a slightly darker yellow.

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.

6

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.

7

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.

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

8

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

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

9

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

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

10

31. Select the first gradient stop and change the color to a bright yellow.

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.

11

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


12


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.

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.

13

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

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


14


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.

15

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.

16

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.

17


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.

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

18

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.

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.

19

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

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

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_SwatchLibrary section.

20

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

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).

21

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

22

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.


72. Click on the title bar to select it.

73. From the Edit Rectangle panel, change the Corner Radius to 7.

23

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.

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

24

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.

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.

25

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.

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

26

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.

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.

27

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

94. From the Text panel, change the Font Decoration to Italic.

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.

28

97. Use the arrow keys to center the circle vertically.

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

29

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.

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.

30

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

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.

31

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.

32

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.



119.Rotate the inner rectangle so that it is diagonally downward, forming an X.

33

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

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.

34

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.

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.

35

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.


132.From the main menu, select Edit | Paste In Front.

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

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

36

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.

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.

37

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.



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.

38

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

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.

39


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



154.From the Text panel, change the Font size to 13.

155.Highlight the text and change it to Abstract of Video.


40


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.

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.

41



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

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

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.

42

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.

43

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.

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

44

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.

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

45

177.Change the Stroke to black.

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.

46

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.

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

47

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.

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

48

187.Select the first gradient stop and change its color to white.

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

49

189.Change the Stroke to None.

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

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.

50

194.Click on the two top anchor points to delete them. This will square off the top of the shape.

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.

51

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.

52

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


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.

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

53

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.

212.Change the Stroke to the Fabrikam bright yellow.

54



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).

55



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


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


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).

56


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.


230.Select the entire logo by drawing a selection box around it.


57

232.Switch back to the video player design file.


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.


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.


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

58

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.

59

245.Select the Outer Glow effect.

246.Change the Size to 1 and the Opacity to .5.


60


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.

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

61

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.

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.

62

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.

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.

63

264.Click on the play button to select it.

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

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

64

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.

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.

65

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.



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.

66

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.

67

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.

68

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.

69

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

70

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

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.

71

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.

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.

72

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

8. Select the following files in the folder and press Open to add them to the project:

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

o Testvideo.wmv is a video to test with.

o VideoPlayer_UI .xaml is the exported design file that contains our UI elements.

(note: do NOT select VideoPlayerControls.cs at this time)

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.xaml file.

73

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.

15. In the Add Existing Item dialog, navigate to the <labroot>\BitmapUIElementsfolder.

16. Select all files in the folder and press Open to add them to the project.

74

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.

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.

75

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.

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_Assets\ media\thumbs folder.


76

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_Assets\media\videos folder.


77

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

78

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.

79

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.

80

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.xaml to open it.

81

40. In the Objects and Timeline panel, right-click VideoPlayer_UI_design 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.

82

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.

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.

83

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

84

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

85

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_design container, except for the Panels object, which we will work with.

86

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.

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

87

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, renamingRectangle_0 to YellowRightRectangleandRectangle_1 to DarkTopRectangle.

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

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

58. Click when the orange triangle and line are visible to create a column splitter.

88

59. Click on the left rectangle (BlueLeftRectangle)to select it.

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.

89

61. In the Objects and Timeline panel, click on the Splitter node to select it.

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.

90

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.

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.

91

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

68. Expand the Logo node.69. Right-click the Logo_7 node

and select Cut.

70. Right-click the VideoPlayer_UI_design node and select Paste.

92

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

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.

93

75. On the workspace, click on the logo’s right anchor point to remove its anchoring to the right side.

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">

94

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.

95

81. Right-click the VideoPlayer_UI_design 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_design node.

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

96

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.


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.

97

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.


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.

98

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.

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.

99

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

106.Rename the group to Video_ItemBackground.

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.

100

111.In the Layout panel, change the Right Margin to 0.

112.In the Objects and Timeline panel, under VideoCollection, select the 5 other video list items (Item_VideoList_35, 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.

101

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

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.

102

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.

103

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

o Width to 20o Horizontal

Alignment to Center

o 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.

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

104

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.

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

o Width to 20o Horizontal

Alignment to Center

o All margins to 0

105

135.Collapse any expanded nodes under VideoPlayer_UI_design 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.

136.Double-click the VideoPlayer_UI_design 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_design node and select Paste.

106

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

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

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

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.

107

148.In the Objects and Timeline panel, select the Button_Play, Button_Pause, and Button_Stop nodes.

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_ButtonControls.

108

153.In the Layout panel, change the HorizontalAlignment 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_IconPause, and Graphic_IconStop buttons.

156.Using the right arrow key, center the icons over the buttons.

109

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

158.Select the Graphic_VideoBorder and VideoPlaceHolder nodes.

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

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

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

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

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

110

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

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.

111

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

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.

112

Exercise 3 – Button Controls

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 | VideoControls | Stack_ButtonControls.

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

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

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

113

175.In the Objects and Timeline panel, under VideoPlayer_UI_design | VideoControls | Stack_ButtonControls, right-click the [Button] node and select Edit Control Parts (Template) | Edit Template.

176.Select the [ContentPresenter] node.

177.In the Layout panel, click the HorizontalAlignment and select Reset.

114

178.Click the VerticalAlignment and select Reset.

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

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.

115

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.

185.In the Triggers panel, click on the IsMouseOver = True node.

116

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.

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.

117

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 IsMouseOver = True node.

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

118

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.

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

119

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

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.


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.


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

120

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_ButtonControls to bring it into scope.

205.Select the Button_Pause and Button_Stop nodes.

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

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

121

208.Right-click the Stack_ButtonControls node and select Paste.

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

210.Drag the Graphic_IconPlay node onto the first [Button] node. This will set its ContentPresenter to use the play button vector graphic.

211.Drag the Graphic_IconPause node onto the second [Button] node. This will set its ContentPresenter to use the pause button vector graphic.

212.Drag the Graphic_IconStop node onto the third [Button] node. This will set its ContentPresenter to use the stop button vector graphic.

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

122

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.


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.

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

124

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_VideoControls and click OK.

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.

125

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.

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.

126

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

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.

127

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

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.

128

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.


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.


129

Exercise 5 – GridSplitter Controls

Steps Screenshots

243.In the Objects and Timeline panel, double-click the VideoPlayer_UI_design 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.

130

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.

131


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.

132

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_VideoPlayer and press OK.

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

133

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.

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

259.From the Layout panel in the Properties panel, change the margins to 0.

134

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

261.In the Layout panel, change the HorizontalAlignment to Center and the VeritcalAlignment to Center.

262.From the Objects and Timeline panel, click on the Scope Up button.


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.


135

Exercise 6 – ViewBox Controls

Steps Screenshots

266.In the Objects and Timeline panel, under VideoPlayer_UI_design | VideoCollection, select the five copied video list items.


136

268.In the Objects and Timeline panel, under VideoPlayer_UI_design | 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.

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:

137

<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" Foreground="#FFFFF000">00:00</Run></TextBlock>

271.First, remove all the XAML with strikethroughs:

138

<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" Foreground="#FFFFF000">00:00</Run></TextBlock>

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:

139

<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:

<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.

140

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


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.

141

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.


284.Click on the third [TextBlock] (the video duration) to select it.


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.

142

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.

143

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_design | 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.

144

295.Under VideoPlayer_UI_design | VideoCollection | Item_VideoList | Video_ItemDetails | VideoThumbnails | [Grid] Right-click the VideoThumbnailPlaceHolder 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.

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

145

299.From the Layout panel in the Properties panel, change all margins to 3.5.

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

146

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.

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

147

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


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_design | VideoCollection | Item_VideoList | Video_ItemDetails , click on the “Abstract” text block to select it.

148

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


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.

149

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_design | VideoCollection | Item_VideoList | Video_ItemDetails | VideoThumbnails | [Grid], click on the [Image] node to select it.

150

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


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.

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

151

323.Under VideoPlayer_UI_design | 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.

152

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


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.

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.

153

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_VideoItem and press OK.

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.

154

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.

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

155

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

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

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

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

156

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

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.

157

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.

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

346.In the Appearance panel, change the border thickness to 0.

158

347.In the Layout panel, change HorizontalScrollBarVisible to Disabled and VerticalScrollBarVisible to Visible.

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

349.In the Create Style Resource dialog, change the Resource name (Key) to ListBoxItemStyle_VideoItem and click OK.

159

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

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

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

353.From the Toolbox, double-click the Grid button to add one to the template.

160

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.

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.

161

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 HorizontalAlignment to Stretch.

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.

162

363.Select the second gradient stop and change its alpha to 0.

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.

163

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.

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.

164

370.From the Toolbox, click the Brush Transform button to activate the Brush Transform tool.

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.

165

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

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.

166


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


379.In the Objects and Timeline panel, under VideoPlayer_UI_design | VideoCollection, right-click the ScrollBar_Down node and select Delete.

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

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

167

382.In the Objects and Timeline panel, under VideoPlayer_UI_design | 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.

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

168

385.In the Create Style Resource dialog, change the Resource name (Key) to ListBoxStyle_VideoCollection and press OK.

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 ScrollViewerControlTemplat e_VideoCollection and press OK.

169


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

390.Click the PART_ScrollContentPresenter 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_VerticalScrollBar node to select it.

170

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

o Width to Autoo Horizontal

Alignment to Stretch

o Left Margin to 0o Right Margin to 0

394.In the Brushes panel, change the Background brush to No brush.

395.Change the Foreground brush to No brush.

171

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

397.In the Create Style Resource dialog, change the Resource name (Key) to ScrollBarStyle_VideoCollection and press OK.

172

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.

173

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.

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.

174

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.

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.

175

411.In the Objects and Timeline panel, click the Scope up button to move up one level.

412.Click the PART_ScrollContentPresenter node to select it.

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.

176

416.Click the Scope up button again to move up to the top level.


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


177

Exercise 7 – Video Controls & Triggers

Steps Screenshots

420.In the Objects and Timeline panel, under VideoPlayer_UI_design, 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_design | 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.

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

178

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.


428.The video should play automatically.


179

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_design | VideoControls | Stack_ButtonControls , locate the Button_Play node.

432.In the Triggers panel, click + Event to add an event.

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.

180

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.


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.


181

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.

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

182

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.

183

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.

184

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.


455.You can now use all the buttons, which work as expected. When the movie is paused the Play button resumes it.


185

Exercise 8 –Event Handlers

Steps Screenshots

457.In the Objects and Timeline panel, under VideoPlayer_UI_design | 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….

460.In the Add Existing Item dialog, navigate to the <labroot>\VideoPlayer_Assets folder and select the VideosPlayerControls.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.

186

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

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.

187

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.

188

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_design | Video, click the testvideo_wmv node to select it.

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"/>

189

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

483.In the Objects and Timeline panel, under VideoPlauer_UI_design | VideoControls, click on the slider node to select it.

484.Set the PreviewMouseLeftButtonDown event to BeginScrub and press Enter.

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

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

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

190


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.


191

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.

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

496.Drag this node onto the video collection listbox.

192

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.

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

193

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.

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

506.Select the items under the SelectedVideo node.


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

194

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.

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….

195

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.


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.


196

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.

197

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.


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

198

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.

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


199

535.In the Create Style Resource dialog, change the Resource name (Key) to ButtonStyle_ButtonClose 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.

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

200


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


201

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

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.

202

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\SchoolOfFineArt.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.

203

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.

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

204

8. Review the application. Note that it is fully functional, but is visually unappealing. When satisfied, close the application.

205

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.

206

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.

207

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:

o Pick the color from a swatch

o Edit the RGB valueso 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:

o Set Width to 850o Set Height to 650

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).

208

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.

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.

209

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.

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.

210

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.

211

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.

212

Exercise 4 – Applying Resources

34. Open the Resources panel by clicking its tab in the Solution Explorer.

35. Expand the ResourceDictionary_01.xaml node.

213

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.

214

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.

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

215

46. Return to the Resources pane. Inside the ResourceDictionary_01.xaml node, select the OrangeColor resource.

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

48. Select the LoginLabelStyle resource.

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

216

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.

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.

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

217

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.

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.

218

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.

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.

219

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.

220

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.

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.

221

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.


75. Click and drag the second column gridline slightly to the left.

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.

222

78. For each control that moved when the gridline was moved, remove its anchor to the gridline. This can be accomplished by selecting the control and clicking on the 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:

o The Go buttono The _LoginGrido The LoginPanel

Anchored:

Not anchored:

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.


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.

223

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.

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.


86. Select the middle column of the main grid by clicking on the area next to the unlocked lock icon.

224

87. In the Properties panel, expand the Layout panel by clicking on its expansion arrow.

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.


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.

225

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.

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.

226

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.


97. Click on the Asset Library in the Toolbox.

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

99. Draw a thin GridSplitter to the right of the second column gridline.

227

100. From the Brushes panel in the Properties panel, select a dark red to color the GridSplitter.

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.

228

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.

229

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.

230

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.

231

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.

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

232

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.

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.

233

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.


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

234

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.

235

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.

236

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


237

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.

135. Expand the Layout panel to show advanced properties.

238

136. Disable the HorizontalScrollBar.

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

138. From the ResourceDictionary_01.xaml 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.xaml 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.

239


240

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.

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

241

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.

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

242


151. From the Objects and Timeline panel, select all three textblock objects.

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

243

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.

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.

244

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.

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.

245

162. With the description label still selected, change the following values in the Text panel of the Properties panel:

o TextTrimming to CharacterEllipsis

o TextWrapping to Wrap


164. In the Objects and Timeline panel, select the three textblock nodes.

246

165. In the Layout panel, set the left margin to 70.

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.

247

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.


248

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.


249

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.

250

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


182. Press the GO button to log in.

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.


251

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.

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

253

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.


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.

254

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.

195. If you have a version of Visual Studio installed, 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.

Depending on whether Visual Studio is installed, one of the following will be displayed:

Or

255


197. Now you should be able to drag the window around the screen.

198. Close the application when satisfied by pressing Alt+F4.

256

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.

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

257

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.

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

258

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.

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%.

259

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.

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.


260

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

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.

262

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\Fabrikam_04.sln and then click the Open button.

263

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.

264

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.

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.

265

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.

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.

266

14. From the Tools menu, select Options… to load the Options window.

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.

267

18. Click on the Resources tab to make the Resource panel visible.

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.

22. Select the horizontal GridSplitter between the “Catalog” and “Reviews” panels, as shown in the screenshot to the right.

268

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.


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.


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.


29. Drag the Panel style from the SampleControls.xaml resource dictionary and drop it onto the “Catalog” Fabrikam application panel.


269

31. The new panel style should look like this now.

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.

270

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.

271

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.

272

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.

273

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.

49. If the Resource Key Conflict window appears, select the OK button to continue.

274

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.

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.

275

55. Press the V key to use the Selection tool.

56. Select the ButtonElements element and then select Edit | Copy from the main menu.

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.

276

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 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.

277

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.

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.

278

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.

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.

279

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.


280

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.

281

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.

89. In the Properties panel, locate the Brushes section and single-click on the Fill property to select it.

282

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.

93. In the Objects and Timeline panel, single-click the YellowArrow element.

283

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.


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.

284

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.

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.

285

104. In the Objects and Timeline panel, single-click the YellowArrow element to select it.


This will add an animation key frame to the timeline, represented as a white oval ( ) on the same row as the YellowArray element.

106. Press the Play button ( ) to see a preview of the animation in the designer window.

286

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.

111. Select the OK button when the Create Storyboard Resource window appears.

112. Move the animation Playhead to 0.5 seconds.

287

113. In the Objects and Timeline panel, single-click the ButtonBackground element to select it.

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.

288


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.

289

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 ( ).

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.


290

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.

291

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.

292

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.


293

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.

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.

294

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.

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.


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.

295

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.

296

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.

297

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).

163. From the context menu that appears, select Data Binding…

298

164. In the Create Data Binding window, select the Explicit Data Context tab.

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.

299

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).

175. From the context menu that appears, select Data Binding…

300

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.


180. In the Objects and Timeline panel, single-click on the ProductDetailImage element (under DetailsView | DetailsImage).

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.

301

182. In the Create Data Binding window, select the Explicit Data Context tab.

183. Expand the Fields sections and select the Image node.


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.

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.

302

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.

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.

303

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.

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.

304

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.

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.



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.


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.

305

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.

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.

306

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.

212. Press the F5 key to run the application and see how the 3D animation work turned out.


307

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.

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.

308

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.

222. Select the Data binding… option.

309

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.

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.

310

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 continue.

311

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.


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”.

312

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.

244. Use the default name of “VisualBrush1” by clicking the OK button.

313

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.

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.

314

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.

255. Press the F5 key to run the application and verify that the visual brush mirrors the currently selected marketing asset.


315

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”.


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.

316


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.

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.

317

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

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.

318

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.

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.


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.

319

278. In the Asset Library window, select the Custom Controls tab.

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.

320


283. Drag the FabrikamSlider style resource from the Resources panel and drop it on the AnimationController element.


285. In the Objects and Timeline panel, click the drop-down box and select Timeline1.

321

286. Single-click on the rectangle element (at Window | DocumentRoot).

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.

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.


294. Use the color picker to choose a green scheme. This will record another key frame.


296. Use the color picker to choose a purple scheme. This will record another key frame.

322

297. Select the Default timeline from the drop-down box near the top of the Objects and Timeline panel

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.

323

301. Press the F5 key to run the application and verify that the custom slider allows the user to change the background color.


324

ejemplo con expression blend manual 1

Documents

gradient brush

gradient transform tool

gradient path

gradient transform button

rectangle tool

rectangle button

title bar rectangle

left body rectangle