Designing Windows Applications with Expression Blend - ManualTo 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: The School Of Fine Art: Fabrikam Ordering Application:

Page 1 Page 71 Page 201 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 ExerciseContentsContents ................................................................................................................................................... 1 Background ............................................................................................................................................... 1 Exercise 1 End-To-End Exercise ............................................................................................................. 2

Background

Weve 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 dont worry too much about matching the screenshots exactly.

1

Exercise 1 End-To-End Exercise

Steps 1. Select Start | All Programs, Microsoft Expression | Microsoft Expression Design. From the File menu, select New.... In the New Document dialog, make the following changes: o Name to VideoPlayer_UI o Resolution to 72 px/inch o Width to 850 o Height to 580 Click OK to create the new document.

Screenshots

2. 3.

4.

5.

6.

7.

From the main menu, ensure that View | Show | Guides is checked. From the main menu, ensure that View | Snap To Guides is checked. 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.

9.

Repeat the last step by dragging vertical guides at 515 and 850. 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.

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

12

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

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

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

14

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

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

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

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

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 \Labs\Assets and select Fabrikam_SwatchLibrary .xml. 60. Click Open to open the file. This file contains Fabrikams official swatch and will be more convenient than manually selecting colors.

61. In the Appearance panel, click on the Fill button to ensure were 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.

71. Press V to activate the Selection tool. 72. Click on the title bar to select it. 73. From the Edit Rectangle panel, change the Corner Radius to 7.

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.

117. From the main menu, select Edit | Copy. 118. From the main menu, select Edit | Paste in Front. 119. Rotate the inner rectangle so that it is diagonally downward, forming an X.

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

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

131. From the main menu, select Edit | Copy. 132. From the main menu, select Edit | Paste In Front. 133. Using the Appearance panel, change the stroke to white. 134. Using the Appearance panel, change the fill to black. This rectangles 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.

143. From the main menu, select Edit | Copy. 144. From the main menu, select Edit | Paste In Front. 145. Use the right arrow key to move the newly pasted text to the right of the video name. This text will represent the video duration.

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 labels text to 00:00.

39

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

151. Click on the video name to select its text. 152. From the main menu, select Edit | Copy. 153. From the main menu, select Edit | Paste In Front. 154. From the Text panel, change the Font size to 13.

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

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

40

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

158. Select the thumbnail to select it.

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

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

161. From the main menu, select Edit | Copy. 162. From the main menu, select Edit | Paste In Front. 163. Using the Appearance panel, change the stroke to white. 164. Using the Appearance panel, change the fill to black.

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 informationspecific 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. 203. From the main menu, select Edit | Copy. 204. From the main menu, select Edit | Past In Front. 205. Use the right arrow to move the newly pasted button to the right of the original. This button will be our pause button. 206. Repeat the paste and move the new group to add a third button to the right. This button will be our stop button.

207. Select the triangle on the timeline slider.

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

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

214. From the Create Rectangle panel, change the Corner Radius to 15. 215. Draw a thin rectangle on the left side of the play button triangle. This is half of the pause button and were 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

217. From the main menu, select Edit | Copy. 218. From the main menu, select Edit | Paste in Front. 219. Use the right arrow key to move the second half of the pause symbol to the right of the first half.

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

221. Press Ctrl+Shift+A to deselect the rectangle. 222. From the Create Rectangle panel, change the Corner Radius to 3. 223. Hold the Shift key and draw a square next to the triangle on the play button, but slightly smaller. 224. Move the new square onto the stop button (the right one).

56

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

226. From the main menu, select File | Open. 227. Navigate to \Labs\Assets and select Fabrikam_Logo.design. 228. Click Open to open the file.

229. Press V to activate the Selection tool. 230. Select the entire logo by drawing a selection box around it. 231. From the main menu, select Edit | Copy.

57

232. Switch back to the video player design file. 233. From the main menu, select Edit | Paste in Front. 234. Move the newly pasted logo to the top right corner of the window.

235. Select the logo. 236. Right-click the selected logo and select Ungroup from the context menu. 237. Press Ctrl+Shift+A to deselect everything. 238. Holding the Shift key, select each path in the Fabrikam text by clicking on it. 239. In the Appearance panel, change the Fill of the selected paths to use white. 240. Press Ctrl+Shift+A to deselect everything.

241. Holding the Shift key, select each path in the Incorporated text (as well as the logos 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.

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

60

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

249. Draw a rectangle underneath the logo section, using the bottom edge of the dark yellow rectangle as an upper edge. This rectangle will be the top button of a scrollbar. 250. From the bottom of Expression Design, click on the Unlink width and height sliders toggle button. 251. Change the Height to 15.

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. 283. From the main menu, select Edit | Copy. 284. From the main menu, select Edit | Paste in Front. 285. Repeat the paste 4 more times (for a total of 6 items). Note that they will all be pasted in the same place, so it will appear as though only one is visible.

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

BackgroundWeve been commissioned by Fabrikam to develop a new media player. Working with XAML exported from Expression Design, were 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 dont worry too much about matching the screenshots exactly.

71

Exercise 1 Setting Up The Project

Steps 1. Select Start | All Programs, Microsoft Expression | Microsoft Expression Blend. From the main menu, select File | New Project. In the Create New Project dialog, change the Name to VideoPlayer and click OK.

Screenshots

2. 3.

4.

5.

6.

In the top right corner of Expression Blend, locate the Project panel. In the Project panel, find the Files panel and right-click the VideoPlayer project node. Select Add Existing Item from the context menu.

72

7.

In the Add Existing Item dialog, navigate to the \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.

73

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

74

15. In the Add Existing Item dialog, navigate to the \BitmapUIElements folder. 16. Select all files in the folder and press Open to add them to the project.

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

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.

75

20. Click once on the New Folder1 folder. After a short pause, the folder name will become editable. 21. Change the name to media and press Enter.

22. Right-click the media project node and select New Folder from the context menu. 23. Change the folders 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.

76

25. In the Add Existing Item dialog, navigate to the \VideoPlayer_Assets\ media\thumbs folder. 26. Select all files in the folder and press Open to add them to the project.

27. Right-click the media project node and select New Folder from the context menu. 28. Change the folders 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.

77

30. In the Add Existing Item dialog, navigate to the \VideoPlayer_Assets \media\videos folder. 31. Select all files in the folder and press Open to add them to the project.

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

78

Exercise 2 Layout

Steps 33. On the lower left side of Expression Blend, locate the Objects and Timeline panel. 34. Click on the Window node to select it.

Screenshots

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 artworks width to be slightly smaller than the viewboxs.

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 windows 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. Rightclick 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 were not changing the objects 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, renaming Rectangle_0 to YellowRightRectangle and Rectangle_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 its 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 logos 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.

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. Rightclick this node and select Change Layout Type | Grid.

88. Under the Item_VideoList > [Canvas] node, select the Group and Group_34 nodes. 89. Right-click the group and select Cut. 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. 95. Right-click the group and select Cut.

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 grids 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 20 o 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 20 o 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. Rightclick 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 windows 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 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_d esign | VideoControls | Stack_ButtonContr ols. 172. From the main menu, select Tools | Make Button. 173. In the Create Style Resource dialog, change the Resource name (Key) to Button_VideoCont rols and press OK.

Screenshots

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_d esign | VideoControls | Stack_ButtonContr ols, 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 HorizontalAlignme nt and select Reset.

178. Click the VerticalAlignment and select Reset.

114

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.

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

115

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.

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.

116

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.

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

117

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.

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.

118

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

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

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.

119

198. Press F5 to build and run the application. 199. Use the mouse to see how the play button reacts to the mouse moving over it, as well as clicking on it. Both triggers and animations are useful ways to create effects. 200. Close the application. 201. Click on the Scope up button to return scope to the top level of the application.

202. Select the newly create [Button] node. 203. In the Layout panel of the Properties panel, change the Right Margin to 5.

204. Double-click on the Stack_ButtonContr ols to bring it into scope. 205. Select the Button_Pause and Button_Stop nodes. 206. Right-click the selected group and select Delete.

120

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

208. Right-click the Stack_ButtonContr ols node and select Paste. 209. Right-click the Stack_ButtonContr ols 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.

121

211. Drag the Graphic_IconPaus e 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 214. In the Objects and Timeline panel, right-click the Slider_Thumb node and select Cut. 215. Select the Slider_Background and Slider_Track nodes. 216. Right-click the selected group and select Delete.

Screenshots

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.

123

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.

124

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

125

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.

126

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.

127

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

240. Press F5 to build and run the application. 241. Use the mouse to drag the slider. Notice how it has practically the same look and feel as our original design, but acts just like a user would expect a slider to. 242. Close the application.

128

Exercise 5 GridSplitter Controls

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

Screenshots

246. In the Toolbox, click on the Asset Library.

129

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. Its tough to get it to fit exactly, so well refine the layout in the next few steps.

130

249. Press V to activate the Selection tool. 250. Move the grid splitter so that its top edge snaps to the bottom edge of the logo region and its left edge snaps to the right edge of the video region. You may want to use the Zoom tool to get a better view.

251. Resize the grid splitter using its bottom right transformation adorner so that its bottom edge snaps to the bottom of the window. 252. From the Layout panel in the Properties panel, change the Width to 8 and Right Margin to -4. This will center it on the middle grid line.

131

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

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

132

256. From the Toolbox, doubleclick 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.

133

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.

263. Press F5 to build and run the application. 264. Use the mouse to move the grid splitter. Notice how it has practically the same look and feel as our original design, but acts just like a user would expect a grid splitter to. 265. Close the application.

134

Exercise 6 ViewBox Controls

Steps 266. In the Objects and Timeline panel, under VideoPlayer_UI_design | VideoCollection, select the five copied video list items. 267. Right-click the selected group and select Delete.

Screenshots

135

268. In the Objects and Timeline panel, under VideoPlayer_UI_design | VideoCollection | Item_VideoList | Video_ItemDetails, rightclick 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. Were 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:

136

Name of Video Abstract of Video 00:00

271. First, remove all the XAML with strikethroughs:

137

Name of Video Abstract of Video 00:00

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:

138

Name of Video Abstract of Video 00:00 273. The final XAML should look like this: 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.

139

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

277. Press V to activate the Selection tool. 278. Use the arrow keys to move the text blocks near their original positions. Note that you will need to select each node from the Objects and Timeline panel independently to move them in different directions. 279. Double-click the VideoCollection node to bring it into scope.

140

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. 283. From the Text panel in the Properties panel, change the Font size to 12.

284. Click on the third [TextBlock] (the video duration) to select it. 285. From the Text panel in the Properties panel, change the Font size to 15.

286. Click on the first text block again to select it.

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

141

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.

142

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.

143

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, doubleclick the Image button to add it to the scoped grid.

144

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.

145

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.

146

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

307. In the Create Data Binding dialog, click on the Explicit Data Content. 308. Check the Use a custom path expression box and enter XPath=Duration as the expression. This means that when an object is bound to this control, its Duration field will be extracted and used as the text of the block. 309. Click Finish.

310. Under VideoPlayer_UI_design | VideoCollection | Item_VideoList | Video_ItemDetails , click on the Abstract text block to select it.

147

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

312. In the Create Data Binding dialog, click on the Explicit Data Content. 313. Check the Use a custom path expression box and enter XPath=Abstract as the expression. This means that when an object is bound to this control, its Abstract field will be extracted and used as the text of the block. 314. Click Finish.

148

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.

149

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

319. In the Create Data Binding dialog, click on the Explicit Data Content. 320. Check the Use a custom path expression box and enter XPath=Thumbnail as the expression. This means that when an object is bound to this control, its Thumbnail field will be extracted and used as the image for this control. 321. Click Finish.

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

150

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.

151

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

326. Press V to activate the Selection tool. 327. Drag the listbox so that its left edge snaps to the right edge of the grid splitter and top edge snaps to the bottom edge of the top scrollbar button. 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.

152

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.

153

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.

154

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.

155

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.

156

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.

157

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.

158

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, doubleclick the Grid button to add one to the template.

159

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.

160

359. From the Toolbox, doubleclick 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.

161

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.

162

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.

163

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.

164

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.

165

376. Press F5 to build and run the application. 377. Try out the functionality of the listbox by moving the mouse over the items and clicking on them. 378. Close the application.

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

166

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.

167

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

168

388. Press V to activate the Selection tool. 389. Double-click the column gridline to remove it.

390. Click the PART_ScrollContentPresent er 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.

169

393. From the Layout panel of the Properties panel, make the following changes: o Width to Auto o Horizontal Alignment to Stretch o Left Margin to 0 o Right Margin to 0

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

395. Change the Foreground brush to No brush.

170

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

171

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.

172

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.

173

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.

174

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

412. Click the PART_ScrollContentPresent er 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.

175

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

417. Press F5 to build and run the application. 418. Try out the functionality of the listbox by pressing the bottom scrollbar button. It should scroll down once. 419. Close the application.

176

Exercise 7 Video Controls & Triggers

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

Screenshots

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.

177

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.

427. Press F5 to build and run the application. 428. The video should play automatically. 429. Close the application.

178

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 dont need to make any changes. However, we could access the other objects and their respective events from these dropdowns if needed.

179

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

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

439. Press F5 to build and run the application. 440. You can now use the buttons to start and stop the video, but when you pause, there is no way to resume. We will fix that in the next few steps. 441. Close the application.

180

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.

181

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.

182

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.

183

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

454. Press F5 to build and run the application. 455. You can now use all the buttons, which work as expected. When the movie is paused the Play button resumes it. 456. Close the application.

184

Exercise 8 Event Handlers

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

Screenshots

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

185

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.

186

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.

187

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:

188

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 PreviewMouseLeftButtonD own event to BeginScrub and press Enter.

485. Switch back to Expression Blend, or click OK in the dialog box. 486. Set the PreviewMouseLeftButtonU p 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.

189

488. Press F5 to build and run the application. 489. Notice how the slider now automatically follows the flow of the video. You can also manually drag the slider to change the current video location. 490. Close the application.

190

Exercise 9 Data Binding

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

Screenshots

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.

191

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.

192

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. 507. Right-click the selected group and select Delete.

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

193

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.

194

513. In the Create Data Binding dialog, click the Element Property tab. 514. Under Scene elements, locate the [System.Windows.Controls. ListBox] node and click on it. 515. Under Properties, click on the SelectedItem property. 516. Click Finish to apply the data context.

517. Press F5 to build and run the application. 518. Notice how the video collection is now populated with the items from the XML file. You can even scroll up and down and select items, which show in the current video info. 519. Close the application.

195

Exercise 10 Customizing The Application Window

Steps 520. In the Objects and Timeline panel, click on the Window node to select it.

Screenshots

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.

196

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

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

525. Switch back to Expression Design. 526. In the Objects and Timeline panel, click on Button_Minimize to select it. 527. From the main menu, select Tools | Make Button.

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

197

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. 534. From the main menu, select Tools | Make Button.

198

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.

199

539. Press F5 to build and run the application. 540. The application should now be able to be dragged around the screen as well as minimized and closed using the custom buttons. 541. Close the application.

200

The School Of Fine ArtContents

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

BackgroundThe 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, well walk through the process of making the existing application beautiful by using the features of Expression Blend.

201

Exercise 1 Importing Visual Studio ProjectsSteps 1. Choose Start, All Programs, Microsoft Expression, Microsoft Expression Blend Beta 1. 2. On the File menu, select Open Project.... Navigate to \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. Screenshots

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.

202

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