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:

Page 1

Expression Blend End-To-End Exercise:

Page 71

The School Of Fine Art:

Page 201

Fabrikam Ordering Application:

Page 259

About the Training: In this course students will work with the following tools and technologies: •

Expression Blend

•

Expression Design

•

NET Framework 3.0, Windows Presentation Foundation, XAML

•

Visual Studio 2005

Students will cover topics such a designing the user interface for a video player and then converting that into an actual fully functioning video player by defining dynamic layout, creating custom controls, incorporating video, binding controls to work with each other, binding to external XML data to create an interactive video catalog and more. Designers will also experience other real world scenarios where they will discover the huge potential that Expression Blend enables them to have to dramatically increase the experience of a Windows application.

Expression Design End-to-End Exercise Contents Contents..................................................................................................................1 Background.............................................................................................................1 Exercise 1 – End-To-End Exercise............................................................................2 Exercise 1 – End-To-End Exercise

Background We’ve been commissioned by Fabrikam to develop a new media player. Working within their style guidelines and wireframes, we have the next 90 minutes to design something visually compelling. This manual is intended as a guide for designing the user interface and does not delve into the same level of detail that you would normally use when designing a production application. During the course of this lab, you may find it useful to zoom in and out when dealing with finely-tuned pixel locations, as well as element heights and widths. However, strict adherence to exact locations and dimensions is not critical, so please don’t worry too much about matching the screenshots exactly.

2

Exercise 1 – End-To-End Exercise Steps

Screenshots

1. Select Start | All Programs, Microsoft Expression | Microsoft Expression Design. 2. From the File menu, select New.... 3. In the New Document dialog, make the following changes: ○

Name to VideoPlay er_UI

○

Resolution to 72 px/inch

○

Width to 850

○

Height to 580

4. Click OK to create the new document.

3

5. From the main menu, ensure that View | Show | Guides is checked. 6. From the main menu, ensure that View | Snap To Guides is checked. 7. Click on the left ruler and drag a vertical guide onto the artboard at the 0 coordinate, which is the left edge of the canvas. 8. Repeat the last step by dragging vertical guides at 515 and 850. 9. Drag horizontal guides at 0, 35, 495, and 580.

4

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

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

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

5

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

14.Press V to activate the Selection tool. 15.Select the top title bar rectangle by clicking on it.

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

6

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

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

7

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

20.Drag a line from top to bottom on the title bar rectangle to have the gradient move downward. 21.The title bar should now look similar to this screenshot.

8

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

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

9

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

25.Select the second gradient stop and change its color to a dark blue.

10

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

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

11

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

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

12

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

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

13

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

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

14

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

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

15

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

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

16

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

40.The top, left, and right edges of the rectangle should snap to their respective guides. You may want to zoom in using the Zoom tool (Z) to verify this. 41.From the Appearance panel, change the Fill to black.

17

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

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

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

18

45.Draw a rectangle over the left body rectangle that uses the lower guide as its top edge. Its left and right edges should snap to the guides used by the left body rectangle. The rectangle should be 25 pixels high. 46.From the Appearance panel, change the Fill to white and the Opacity to 30.

19

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

48.Press Z to activate the Zoom tool. Make a small window around the top edge of the newly draw rectangle to zoom to it. 49.At the bottom of Expression Design, ensure the width is 6 pixels.

20

50.Use the mouse or arrow keys to nudge the rectangle up against the top guide (which is the bottom guide of the title bar). 51.Nudge the rectangle sideways so that it is centered on the middle guide, with 3 pixels on each side.

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

21

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

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

22

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

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

23

57.From the Appearance panel, click the More Swatches button to open the More Swatches menu. 58.From the More Swatches menu, click on the Swatch Options button and select Import Swatch Library.

59.Navigate to \Labs\ Assets and select Fabrikam_Swatc hLibrary.xml. 60.Click Open to open the file. This file contains Fabrikam’s official swatch and will be more convenient than manually selecting colors.

24

61.In the Appearance panel, click on the Fill button to ensure we’re working with the Fill brush. 62.Click on the More Swatches menu and select the dark blue color in the Fabrikam_Swatc hLibrary section.

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

25

64.Change the Opacity to 100.

65.From the main menu, select Edit | Copy. 66.From the main menu, select Edit | Paste in Front. 67.Use the down arrow key to move the newly pasted circle downward roughly 6 pixels below the original (press the down arrow key 8-10 times).

26

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

27

69.Press V to activate the Selection tool. Hold the Shift key and click on each of the circles, as well as the white rectangle behind it. 70.Right-click on one of the selected items and select Group from the context menu.

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

28

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

75.Draw a rectangle on the title bar that is roughly one-third its height. This rectangle will provide a shine on the title bar. 76.Use the up arrow key to move the newly drawn rectangle upward and toward the center of the title bar.

29

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

78.Click on the Stroke button and select None.

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

30

80.Use the arrow keys to center the rectangle vertically. 81.From the Appearance panel, change the Fill to black and the Opacity to 50.

31

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

83.Click on the Text button in the Toolbox to activate the Text tool.

84.Click on the left side of the application name rectangle and type Fabrikam Video Player.

32

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

86.Click on the Selection button in the Toolbox to activate the Selection tool. Note that we can use the shortcut V key, provided we Esc out of the active text region (or else it would type the ‘v’). 87.Click on the title text to select it. 88.Use the arrow keys to fit the text inside the title bar. 89.Click on the Text button in the Toolbox to activate the Text tool.

33

90.Highlight the Fabrikam part of the title. 91.From the Appearance panel, change the text fill to a dark yellow.

92.Highlight the Video Player part of the title.

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

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

34

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

96.Hold the Shift key while dragging to draw a small circle near the right side of the title bar. This will serve as our minimize button. 97.Use the arrow keys to center the circle vertically.

35

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

99.From the Appearance panel, change the Stroke to black and the Width to 1. 100.Next to the Opacity box, click on the Unlink fill and opacity sliders button to unlink their values. Now we can change the opacity of one without updating the other. 101.Change the Stroke Opacity to 100. 36

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

103.Click inside the left side of the circle to set the first point. 104.Hold the Shift key and click inside the right side of the circle to draw a straight line. 105.From the Appearance panel, change the Stroke to white and Width to 3.

37

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

107.Press Ctrl+Shift+A to deselect everything. 108.Hold the Shift key, then click on the circle and line (in that order) to select them both. 109.From the Align dropdown at the bottom of Expression Design, select Align | Vertical Centers to align the line with the vertical center of the circle.

38

110.From the Align dropdown at the bottom of Expression Design, select Align | Horizontal Centers to align the line with the horizontal center of the circle. 111.From the main menu, select Edit | Copy. 112.From the main menu, select Edit | Paste in Front. 113.Use the right arrow to move the newly pasted button to the right of the original. 114.Move the mouse near the outside of a corner of the inner rectangle until the rotation cursor appears.

39

115.Click and drag to rotate the inner rectangle. Hold the Shift key to snap to 45 degree angles. 116.Release the mouse when the line is diagonally downward.

40

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

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

41

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

122.From the Create Rectangle panel, change the Corner Radius to 0. 123.Draw a rectangle in the dark blue region directly under the title bar. This rectangle represents the thumbnail of the currently playing video.

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

42

125.Change the Width to 400 and the Height to 300. Although this size is much larger than we will use, it has the 4x3 proportions we want to maintain for the videos and thumbnails. 126.Click on the Link width and height sliders toggle button to constrain proportions. 127.Change the Height to 65. The Width will automatically update. 128.Use the arrow keys to position the thumbnail entirely within the dark blue section of the left panel.

43

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

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

131.From the main menu, select Edit | Copy. 132.From the main menu, select Edit | Paste In Front. 133.Using the Appearance panel, change the stroke to white.

44

134.Using the Appearance panel, change the fill to black. This rectangle’s purpose is to provide a border for the thumbnail. 135.From the main menu, select Arrange | Order | Send Backward.

136.Click on the Text button in the Toolbox to activate the Text tool.

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

45

138.Highlight the text. 139.From the Appearance panel, change the Fill to white.

140.From the Text panel, change the Font decoration to Regular and the Font size to 18. 141.Click on the Selection button in the Toolbox to activate the Selection tool. 142.Reposition the video name text so that it appears near the top of the panel.

46

143.From the main menu, select Edit | Copy. 144.From the main menu, select Edit | Paste In Front. 145.Use the right arrow key to move the newly pasted text to the right of the video name. This text will represent the video duration. 146.From the Appearance panel, change the Fill to use the bright yellow color from the Fabrikam swatch.

47

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

148.Click on the Text button in the Toolbox to activate the Text tool.

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

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

48

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

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

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

49

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

158.Select the thumbnail to select it.

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

50

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

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

51

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

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

52

167.Holding the Shift key, click on the blue and dark blue background rectangles where shown in this screenshot. The result should be that only the video 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.

53

170.Click inside the left edge of the grey rectangle to create the first point. 171.Click inside the right edge of the grey rectangle to create a straight line. This line represents the rail for our timeline slider. 172.From the Appearance panel, change the Fill to None.

173.Change the Stroke to white.

54

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

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

55

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

177.Change the Stroke to black.

56

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

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

57

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

181.Press Z to activate the Zoom tool. 182.Drag a small box around the play button to zoom in on it.

58

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

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

185.From the Edit Rectangle panel, change the Corner Radius to 5.

59

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

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

60

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

189.Change the Stroke to None.

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

61

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

192.From the Edit Rectangle panel, change the Corner Radius to 5. 193.In the Toolbox, click and hold the Pen button to access its alternative tools menu. Select the Delete Anchor Point tool.

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

62

195.Click on the Direct Selection button in the Toolbox to activate the Direct Selection tool. 196.Holding the Shift key, select the top left anchor point and the top right anchor points.

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

63

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

199.Press V to activate the Selection tool. 200.Press Ctrl+Shift+A everything. 201.Hold the shift key, then click on the button and its highlight to select them both.

64

202.From the main menu, elect Arrange | Group to pair these objects into a group. 203.From the main menu, select Edit | Copy. 204.From the main menu, select Edit | Past In Front. 205.Use the right arrow to move the newly pasted button to the right of the original. This button will be our pause button. 206.Repeat the paste and move the new group to add a third button to the right. This button will be our stop button. 207.Select the triangle on the timeline slider.

65

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

209.From the main menu, select Arrange | Order | Bring to Front. 210.Hold the Shift key while rotating the arrow to have it point to the right.

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

66

212.Change the Stroke to the Fabrikam bright yellow.

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

214.From the Create Rectangle panel, change the Corner Radius to 15.

67

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

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

68

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

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

69

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

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

70

229.Press V to activate the Selection tool. 230.Select the entire logo by drawing a selection box around it. 231.From the main menu, select Edit | Copy. 232.Switch back to the video player design file. 233.From the main menu, select Edit | Paste in Front. 234.Move the newly pasted logo to the top right corner of the window. 235.Select the logo. 236.Right-click the selected logo and select Ungroup from the context menu. 237.Press Ctrl+Shift+A to deselect everything.

71

238.Holding the Shift key, select each path in the “Fabrikam” text by clicking on it. 239.In the Appearance panel, change the Fill of the selected paths to use white. 240.Press Ctrl+Shift+A to deselect everything. 241.Holding the Shift key, select each path in the “Incorporated” text (as well as the logo’s horizontal line) by clicking on it.

72

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

243.Select all paths from the logo. This can be done by holding the Shift key and clicking on each path. 244.From the Effects panel, click the Add Effect button and select Effects | Outer Glow to apply an outer glow effect to the logo.

73

245.Select the Outer Glow effect. 246.Change the Size to 1 and the Opacity to .5.

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

74

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

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

75

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

253.Change the Stroke to None.

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

76

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

256.From the main menu, select Arrange | Order | Bring to front. 257.Holding the Shift and Alt keys, resize the triangle from the center so that it fits within the scrollbar button area.

77

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

259.Change the Fill to black.

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

78

261.Hold the Alt key and drag a copy of the pair of elements to the bottom of the canvas. The copied rectangle should still snap to the same guides as its original. 262.Move the mouse near the corner of the rectangle until the rotation cursor appears. 263.Hold the Shift key and rotate the pair of elements 180-degrees so that the arrow points downward. 264.Click on the play button to select it.

79

265.Hold the Alt key and drag a copy of the button to the top of the queued videos area, directly underneath the top scrollbar button. The left side of the button should snap to the left guide and the top of the button should meet the bottom of the scrollbar button. 266.Right-click the button and select Ungroup to ungroup them.

267.Press Ctrl+Shift+A to deselect the elements. 268.Select the background rectangle and drag it across

80

269.From the bottom of Expression Design, change the Height of the queued video background to 72. 270.Click on the Direct Selection button in the Toolbox to activate the Direct Selection tool. 271.Click on the top right anchor point, then hold the Shift key and click on the other two right anchor points to select them as well. 272.Drag the group of points to the right side of the background rectangle. Hold the Shift key to ensure the lines are kept straight.

81

273.Click on the current video information and hold the Alt key while dragging onto the video queue area to make a copy. 274.From the main menu, select Arrange | Order | Bring to Front. 275.Holding the Alt and Shift keys, resize the video group to fit within the background vertically. This group only needs to be made a little bit smaller to fit nicely. 276.Select the video info group, the background rectangle, and the highlight rectangle by holding the Shift key while clicking on each. 277.From the main menu, select Arrange | Group.

82

278.From the main menu, select Edit | Options | General…. 279.In the Options dialog, click on the Units and Grids tab to open that section. 280.Change Stack gap size to 0. 281.Press OK to close the dialog.

282.Select the media item group from the right panel by clicking on it. 283.From the main menu, select Edit | Copy. 284.From the main menu, select Edit | Paste in Front. 285.Repeat the paste 4 more times (for a total of 6 items). Note that they will all be pasted in the same place, so it will appear as though only one is visible.

83

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

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

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

84

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

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

85

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

293.From the main menu, select File | Export…. 294.In the Export dialog, click Save to use the VideoPlayer_UI. xaml file name.

86

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

87

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

Background We’ve been commissioned by Fabrikam to develop a new media player. Working with XAML exported from Expression Design, we’re going to turn a design vision into an application reality. This manual is intended as a guide for designing the user interface and does not delve into the same level of detail that you would normally use when designing a production application. During the course of this lab, you may find it useful to zoom in and out when dealing with finely-tuned pixel locations, as well as element heights and widths. However, strict adherence to exact locations and dimensions is not critical, so please don’t worry too much about matching the screenshots exactly.

88

Exercise 1 – Setting Up The Project Steps

Screenshots

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

89

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

90

7. In the Add Existing Item dialog, navigate to the \VideoPlayer_Asset s folder. 8. Select the following files in the folder and press Open to add them to the project: ○

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

○

Testvideo.w mv is a video to test with.

○

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

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

91

9. In the Files panel, right-click the VideoPlayer project node. 10.Select New Folder from the context menu to create a new project folder.

11.Click once on the New Folder1 folder. After a short pause, the folder name will become editable. 12.Change the name to BitmapUIElements and press Enter. This folder will contain the bitmap elements referenced by the VideoPlayer_UI.xa ml file.

92

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

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

93

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

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

94

18.In the Files panel, right-click the VideoPlayer project node. 19.Select New Folder from the context menu to create a new project folder.

20.Click once on the New Folder1 folder. After a short pause, the folder name will become editable. 21.Change the name to media and press Enter. 22.Right-click the media project node and select New Folder from the context menu. 23.Change the folder’s name to thumbs. This folder will contain the thumbnails referenced by our test playlist file.

95

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

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

96

27.Right-click the media project node and select New Folder from the context menu. 28.Change the folder’s name to videos. This folder will contain the videos referenced by our test playlist file. 29.Right-click the videos project node and select Add Existing Item… from the context menu.

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

97

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

98

Exercise 2 – Layout Steps

Screenshots

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

99

35.In the top right section of Expression Blend, click on the Properties tab to select it. 36.In the Layout panel, change the Width to 850 and the Height to 580.

100

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

38.Click on the Project tab to open it. 39.Double-click VideoPlayer_UI.xa ml to open it.

101

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

41.Switch back to Window1.xaml. The easiest way to do this is to click on its tab at the top of the workspace. 42.In the Objects and Timeline panel, right-click the LayoutRoot node and select Paste. This will paste all of the design elements from the source XAML into the main window.

102

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

103

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

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

104

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

105

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

106

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

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

107

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

53.In the Objects and Timeline panel, right-click the Rectangle node and select Rename. 54.Type BlueLeftRectangle as the new name and press Enter. 55.Repeat the process, renaming Rectangle_0 to YellowRightRecta ngle and Rectangle_1 to DarkTopRectangle .

108

56.Press the V key to use the Selection tool. 57.Making sure VideoPlayer_UI_de sign has scope, and is in Grid layout mode, move the mouse along the top edge of the VideoPlayer_UI_de sign grid to the left edge of the grid splitter. 58.Click when the orange triangle and line are visible to create a column splitter. 59.Click on the left rectangle (BlueLeftRectangle)t o select it.

109

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

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

110

62.In the Layout panel, change the ColumnSpan to 1 and the Right Margin to -8. This will ensure that the right side of the splitter (which is 8 pixels) will always be 8 pixels to the right of the column splitter. In other words, the left side of the grid splitter will always be on the column splitter. 63.You can test out the resizing behavior by dragging the column splitter left and right. 64.If you move the splitter, the easiest way to reset it is to select Edit | Undo Move Gridline from the main menu.

111

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

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

112

68.Expand the Logo node. 69.Right-click the Logo_7 node and select Cut.

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

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

113

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

73.Right-click the Logo_7 node and select Rename. 74.Change the name to Graphic_Logo.

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

114

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

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



115

78.Back in the Design tab, resize the SelectedVideo canvas by dragging its bottom right transformation adorner to snap to the right edges of its dark blue rectangle. (the transformation adorner should be in the lower right hand corner of the window) 79.In the Objects and Timeline panel, select all of the elements under the VideoCollection node. 80.Right-click the group and select Cut.

116

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

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

83.At the bottom of the panel, select all of the items that were just pasted into the VideoPlayer_UI_de sign node. 84.Right-click the group and select Group Into | Grid.

117

85.Right-click the newly created [Grid] node and select Rename. 86.Change the name to VideoCollection.

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

88.Under the Item_VideoList > [Canvas] node, select the Group and Group_34 nodes. 89.Right-click the group and select Cut.

118

90.Double-click the Item_VideoList node to give it scope. When a node has scope, it treats certain actions, such as pasting, relative to it. 91.Right-click the Item_VideoList node and select Paste. 92.Right-click the [Canvas] node under Item_VideoList and select Delete.

93.Right-click the Group node and select Change Layout Type | Grid. 94.Under the Item_VideoList > Group > [Canvas] node, select the Rectangle_32 and Path_33 nodes. 95.Right-click the group and select Cut.

119

96.Double-click the Item_VideoList > Group node to give it scope. 97.Right-click the Group node and select Paste. 98.Right-click the Item_VideoList > Group > [Canvas] node and select Delete.

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

100.Under the Item_VideoList > Group_34 > [Canvas] node, select the VideoThumbnail and all three [TextBlock] nodes. 101.Right-click the group and select Cut.

120

102.Double-click the Item_VideoList > Group_34 node to give it scope. 103.Right-click the Group_34 node and select Paste.

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

105.Right-click the Item_VideoList > Group node and select Rename. 106.Rename the group to Video_ItemBackgr ound.

121

107.Right-click the Item_VideoList > Group_34 node and select Rename. 108.Rename the group to Video_ItemDetails.

109.In the Appearance panel, click on the Advanced Options button to show advanced appearance options. 110.Check the ClipToBounds box to make sure that the contents are only visible within the grid’s bounds.

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

122

112.In the Objects and Timeline panel, under VideoCollection, select the 5 other video list items (Item_VideoList_3 5, Item_VideoList_43, Item_VideoList_51, Item_VideoList_59, and Item_VideoList_65 ). 113.Right-click the group and select Delete. 114.Double-click the VideoCollection node to bring it into scope. 115.Right-Click the Item_VideoList node and select Copy. 116.Right-Click the VideoCollection node and select Paste. This will paste a copy of the item directly on top of the original.

123

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

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

119.Double-click the ScrollBar_Up node to bring it into scope. 120.Select Rectangle_28 and Path_29. 121.Right-click on the selected group and select Cut.

124

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

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

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

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

125

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

Width to 20

○

Horizontal Alignment to Center

○

All margins to 0

127.In the Objects and Timeline panel, double-click the ScrollBar_Down node to bring it into scope.

128.Under ScrollBar_Down > [Canvas] select Rectangle_30 and Path_31. 129.Right-click on the selected group and select Cut.

126

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

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

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

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

127

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

Width to 20

○

Horizontal Alignment to Center

○

All margins to 0

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

128

136.Double-click the VideoPlayer_UI_de sign node to bring it into scope. 137.Select the child nodes of the VideoControls node. 138.Right-click the selected group and select Cut.

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

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

141.Under VideoPlayer_UI_de sign, select all of the newly pasted video player control elements. 142.Right-click the selected group and select Group Into | Grid.

129

143.Right-click the newly created grid node and select Rename. 144.Rename the node to VideoControls. 145.Select the Button_Play, Button_Pause, and Button_Stop nodes by clicking the first and holding the Ctrl key while clicking the others. 146.Right-click the selected group and select Group Into | StackPanel. 147.In the Layout panel of the Properties panel, change the Orientation to Horizontal.

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

130

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

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

151.Right-click the [StackPanel] node and select Rename. 152.Rename the node to Stack_ButtonCont rols.

131

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

154.On the workspace, resize the stack panel from the top so that it snaps to the bottom of the slider. 155.Select the Graphic_IconPlay, Graphic_IconPaus e, and Graphic_IconStop buttons.

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

132

157.In the Objects and Timeline panel, expand the VideoPlayer_UI_de sign | Video | Group_81 | [Canvas] node. 158.Select the Graphic_VideoBor der and VideoPlaceHolder nodes. 159.Right-click the select group and select Cut. 160.Double-click the VideoPlayer_UI_de sign note to give it scope. Right-click the VideoPlayer_UI_de sign node and select Paste.

161.Scroll to the bottom of the panel and select the Graphic_VideoBor der and VideoPlaceHolder nodes. 162.Right-click the selected group and select Group Into | Grid.

133

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

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

134

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

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

135

167.Click on the right anchor point of the video to turn off anchoring to the right edge. As a result, the video will not resize horizontally. 168.Select the right column by clicking on the column header right outside the window’s top edge.

169.From the Layout panel in the Properties panel, click on the Advanced Options button. 170.Change the MaxWidth to 700 and the MinWidth to 124.

Exercise 3 – Button Controls

136

Steps

Screenshots

171.In the Objects and Timeline panel, click on the Button_Play node to select it. This node is located at Window | LayoutRoot | VideoPlayer _UI_design | VideoContro ls | Stack_Butto nControls. 172.From the main menu, select Tools | Make Button…. 173.In the Create Style Resource dialog, change the Resource name (Key) to Button_Vide oControls and press OK.

137

174.In the Common Properties panel of the Properties panel, clear the Content field. 175.In the Objects and Timeline panel, under VideoPlayer _UI_design | VideoContro ls | Stack_Butto nControls, right-click the [Button] node and select Edit Control Parts (Template) | Edit Template. 176.Select the [ContentPre senter] node.

138

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

178.Click the VerticalAlig nment and select Reset.

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

139

180.In the Triggers panel, click on the IsPressed = True node. We can now edit how we want this button to appear when the button is pressed. 181.In the Brushes panel, change the fill brush of the selected rectangle to use a very light shade of blue.

182.Press F5 to build and run the application. 183.Use the mouse to see how the play button reacts to the mouse clicking on it. 184.Close the application.

140

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

186.In the Actions when activating section, click on the Add new action button. 187.In the Timeline Needed dialog box, press OK to create a new timeline. 188.In the Objects and Timeline panel, change the name of the timeline to RollOver.

141

189.In the Timeline, drag the marker to the 0:00.300 mark. We can now make changes to the rectangle to indicate how we want it to look at this offset in time. 190.In the Brushes panel of the Properties panel, change the fill to a slightly lighter shade of blue.

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

142

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

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

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

143

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

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

144

197.Manually change the G attribute back to its original state. The reason we make this change is to create a key frame in our timeline that has the original fill so that the RollOff timeline knows what to return it to. 198.Press F5 to build and run the application. 199.Use the mouse to see how the play button reacts to the mouse moving over it, as well as clicking on it. Both triggers and animations are useful ways to create effects. 200.Close the application. 145

201.Click on the Scope up button to return scope to the top level of the application. 202.Select the newly create [Button] node. 203.In the Layout panel of the Properties panel, change the Right Margin to 5. 204.Double-click on the Stack_Butto nControls to bring it into scope. 205.Select the Button_Paus e and Button_Stop nodes. 206.Right-click the selected group and select Delete.

146

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

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

147

210.Drag the Graphic_Ico nPlay node onto the first [Button] node. This will set its ContentPres enter to use the play button vector graphic. 211.Drag the Graphic_Ico nPause node onto the second [Button] node. This will set its ContentPres enter to use the pause button vector graphic. 212.Drag the Graphic_Ico nStop node onto the third [Button] node. This will set its ContentPres enter to use the stop button vector graphic.

148

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

149

Exercise 4 – Slider Controls Steps

Screenshots

214.In the Objects and Timeline panel, right-click the Slider_Thumb node and select Cut. 215.Select the Slider_Background and Slider_Track nodes. 216.Right-click the selected group and select Delete. 217.Double-click the VideoControls node to bring it into scope.

218.In the Toolbox, click on the Asset Library button to open the Asset Library.

150

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

220.Draw a slider in place of the slider assets we just deleted. In this screenshot, it begins at the top left circle and extends to the bottom right circle. 221.Right-click the newly created [Slider] node and select Edit Control Parts (Template) | Edit a Copy…. 222.In the Create Style Resource dialog, change the Resource name (Key) to SliderStyle_VideoC ontrols and click OK.

151

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

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

225.Right-click the Template node and select Paste to insert the Slider_Thumb node that was cut earlier. 226.Click on the Scope up button to bring the slider’s scope back into context.

152

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

228.In the Objects and Timeline panel, under Template | Boreder, click on the [Grid] node to select it. 229.Resize the grid from the bottom so that the entire triangle thumb is visible. 230.Click on the Template | [Border] | [Grid] | [Border] node to select it.

153

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

232.In the Appearance panel, set all border thicknesses to 0.

233.In the Layout panel, change the Height to 1.

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

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

154

236.In the Background dialog, click Reset.

237.Click on the Solid Brush tab and select a dark grey color to change the slider background to a dark grey.

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

155

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

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

156

Exercise 5 – GridSplitter Controls Steps

Screenshots

243.In the Objects and Timeline panel, double-click the VideoPlayer_UI_de sign to bring it into scope. 244.Select the Splitter and Splitter_Thumb nodes. 245.Right-click the selected group and select Cut.

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

157

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

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

158

249.Press V to activate the Selection tool. 250.Move the grid splitter so that its top edge snaps to the bottom edge of the logo region and its left edge snaps to the right edge of the video region. You may want to use the Zoom tool to get a better view. 251.Resize the grid splitter using its bottom right transformation adorner so that its bottom edge snaps to the bottom of the window. 252.From the Layout panel in the Properties panel, change the Width to 8 and Right Margin to -4. This will center it on the middle grid line.

159

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

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

160

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

256.From the Toolbox, double-click the Grid button to add a grid to the template.

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

161

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

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

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

162

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

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

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

163

Exercise 6 – ViewBox Controls Steps

Screenshots

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

164

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

269.When the XAML for the window is brought up, the section that defines the selected node is highlighted.

165

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

This XAML looks like this:

166

<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,6.0288"/> Name of Video <MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,25.0463"/> Abstract of Video <MatrixTransform Matrix="1.33333,0,0,1.33333,233.468,6.44908"/>
271.First, remove all the XAML with strikethroughs:

168

<MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,6.0288"/> Name of Video <MatrixTransform Matrix="1.33333,0,0,1.33333,107.385,25.0463"/> Abstract of Video <MatrixTransform Matrix="1.33333,0,0,1.33333,233.468,6.44908"/>
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: Name of Video Abstract of Video 00:00 273.The final XAML should look like this:

170

274.Click on the Design tab near the top right corner of the XAML page to switch back to design view.

275.Notice that the text blocks on the video list item are now overlapping.

171

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

172

277.Press V to activate the Selection tool. 278.Use the arrow keys to move the text blocks near their original positions. Note that you will need to select each node from the Objects and Timeline panel independently to move them in different directions. 279.Double-click the VideoCollection node to bring it into scope. 280.Click on the first [TextBlock] (the video name) to select it. 281.From the Text panel in the Properties panel, change the Font size to 15.

282.Click on the second [TextBlock] (the video abstract) to select it.

173

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

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

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

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

174

288.In the Objects and Timeline panel, select the first and third text blocks (the name and duration). 289.Right-click the selected group and select Group Into | StackPanel. 290.From the Layout panel, change the Orientation to Horizontal and the Right Margin to 10. This will allow the duration text block to appear after the end of the name text block, which can resize as needed.

291.In the Objects and Timeline panel, click on the duration text block node to select it.

175

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

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

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

176

295.Under VideoPlayer_UI_de sign | VideoCollection | Item_VideoList | Video_ItemDetails | VideoThumbnails | [Grid] Right-click the VideoThumbnailPl aceHolder node and select Delete. 296.From the Toolbox, click on the Asset Library button.

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

177

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

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

178

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

179

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

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

180

305.Under VideoPlayer_UI_de sign | VideoCollection | Item_VideoList | Video_ItemDetails | [StackPanel] Click on the “00:00” text block to select it. 306.In the Common Properties panel, click on the Advanced Options button of the Text property and select Data Binding….

181

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

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

182

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

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

183

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

316.In the Objects and Timeline panel, rename the three text blocks AbstractText, NameText, and DurationText, respectively. These names could have been applied in Expression Design and carried through to here, or done in Expression Blend as we are doing right now. 317.Under VideoPlayer_UI_de sign | VideoCollection | Item_VideoList | Video_ItemDetails | VideoThumbnails | [Grid], click on the [Image] node to select it.

184

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

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

185

322.In the Objects and Timeline panel, under VideoPlayer_UI_de sign, double-click the VideoCollection node to bring it into scope. 323.Under VideoPlayer_UI_de sign | VideoCollection, right-click the Item_VideoList node and select Cut. 324.From the Toolbox, click and hold the Button button to bring up the alternate tools menu and select ListBox.

186

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

326.Press V to activate the Selection tool. 327.Drag the listbox so that its left edge snaps to the right edge of the grid splitter and top edge snaps to the bottom edge of the top scrollbar button.

187

328.Resize the listbox from its bottom right transformation adorner so that its right edge snaps to the edge of the window and bottom edge snaps to the top edge of the bottom scrollbar button. 329.Right-click the listbox and select Edit Other Templates | Edit Generated Items (ItemTemplate) | Create Empty….

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

188

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

332.In the Objects and Timeline panel, right-click the DataTemplate node and select Paste. This will paste the video collection item elements we cut from the main layout. Under Properties, set width and height to auto. 333.Click the Scope up button to return to the top-level scope.

189

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

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

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

190

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

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

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

191

340.Select all 6 [ListboxItem] nodes.

341.In the Layout panel, change the Width to Auto.

342.Click on the [ListBox] node to select it. 343.From the Brushes panel of the Properties panel, click on the Background brush and set it to use No brush.

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

192

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

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

347.In the Layout panel, change HorizontalScrollBa rVisible to Disabled and VerticalScrollBarVi sible to Visible.

193

348.From the main menu, select Object | Edit Other Styles | Edit ItemContainerStyl e | Edit a Copy…. 349.In the Create Style Resource dialog, change the Resource name (Key) to ListBoxItemStyle_ VideoItem and click OK. 350.Right-click the ItemContainerStyl e node and select Edit Control Parts (Edit Template) | Edit Template….

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

194

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

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

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

355.In the Layout panel, change the Height to Auto.

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

195

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

358.In the Objects and Timeline panel, click on the [Grid] node to select it.

359.From the Toolbox, double-click the Rectangle node to add one to the grid.

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

196

361.In the Brushes panel, change the Fill brush to use a Gradient brush. 362.Select the first gradient stop and change its color to white with an alpha of 0.

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

197

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

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

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

198

367.In the Brushes panel, click the Fill brush button. 368.Change the alpha of the second gradient stop to 50.

369.The item templates should now look similar to this screenshot, which indicates the look when the item has the mouse over it. 370.From the Toolbox, click the Brush Transform button to activate the Brush Transform tool.

199

371.Drag the back of the gradient transform arrow near the middle of the top of the item template. Note that the arrow may not refresh immediately. In that case, you can zoom in one level and then back out to refresh it manually. 372.From the Triggers panel, click on the IsSelected = True node to select it.

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

200

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

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

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

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

201

380.In the Objects and Timeline panel, under VideoPlayer_UI_de sign | VideoCollection, right-click the ScrollBar_Up node and select Cut. 381.Double-click the VideoPlayer_UI_de sign node to bring it into scope.

382.In the Objects and Timeline panel, under VideoPlayer_UI_de sign | VideoCollection, Click the [ListBox] node to select it. 383.From the Layout panel in the Properties panel, change the Top and Bottom margins to 0.

202

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

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

203

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

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

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

204

390.Click the PART_ScrollConten tPresenter node to select it.

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

392.In the Objects and Timeline panel, click on the PART_VerticalScrol lBar node to select it.

205

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

Width to Auto

○

Horizontal Alignment to Stretch

○

Left Margin to 0

○

Right Margin to 0

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

395.Change the Foreground brush to No brush.

206

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

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

207

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

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

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

208

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

402.Click on the Scope Up button to move up one level.

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

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

209

405.At the top left corner of the video collection there is a row marker (an unlocked lock). Click the lock, which will turn into a locked lock. 406.Click the locked lock once again. This will provide more height to the top scrollbar button so that the whole arrow is visible. 407.Near the bottom left of the video collection is another unlocked lock icon. Click it, which will turn into a locked lock. 408.Click the locked lock once again to give the bottom scrollbar button more space to display.

210

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

410.From the Appearance panel in the Properties panel change the Visibility to Hidden. 411.In the Objects and Timeline panel, click the Scope up button to move up one level.

412.Click the PART_ScrollConten tPresenter node to select it.

211

413.On the workspace, resize the selected item from its top left transformation adorner so that it snaps to the grid splitter and rests directly underneath the top scrollbar button. 414.Resize the selected item from its bottom right transformation adorner so that it snaps to the right edge of the window and rests directly above the bottom scrollbar button. 415.Click the Scope up button to move up one level.

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

212

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

213

Exercise 7 – Video Controls & Triggers Steps

Screenshots

420.In the Objects and Timeline panel, under VideoPlayer_UI_de sign, double-click the [Grid] node to bring it into scope. 421.Rename the [Grid] node to Video. 422.In the Objects and Timeline panel, under VideoPlayer_UI_de sign | Video, rightclick the VideoPlaceHolder node and select Delete. 423.From the Files panel in the Project panel, double-click the textvideo.wmv file to add it to the Video grid.

214

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

425.The video is added to the scoped container and should look similar to this screenshot.

426.From the Layout of the Properties panel, change all margins to 5.

215

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

430.From the Triggers panel, make sure the Window.Loaded trigger is selected and click - Trigger. 431.In the Objects and Timeline panel, under VideoPlayer_UI_de sign | VideoControls | Stack_ButtonContr ols , locate the Button_Play node. 432.In the Triggers panel, click + Event to add an event.

216

433.Change the object to Button_Play.

434.Change the event to Click.

435.Click the Add new action button to add a new action to start when the trigger occurs. 436.By default, the action here is to begin playing testvideo_wmv, so we don’t need to make any changes. However, we could access the other objects and their respective events from these dropdowns if needed.

217

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

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

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

218

442.Select the Button_Stop.Click trigger. 443.Change its action to Begin the video.

444.In the Triggers panel, select the Button_Play.Click trigger. 445.Change its action to Resume the video. Rather than start from the beginning, this button will pick up where it left off.

219

446.Select the Button_Stop.Click trigger. Click on the Add new action button to add a new action for the Button_Stop.Click. 447.Make it so that the second action will Pause the video. Beginning and pausing the video will leave it ready for the Button_Play to start it.

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

220

449.The default event is Window.Loaded, which is what we want. 450.Click on Add new action to add a new action.

451.The default action is to start the movie, which is what we want. 452.Click on Add new action to add another new action.

221

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

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

222

Exercise 8 –Event Handlers Steps

Screenshots

457.In the Objects and Timeline panel, under VideoPlayer_UI_de sign | VideoControls, right-click the [Slider] node and select Rename. 458.Type slider as the new name. 459.From the Project panel, right-click the VideoPlayer project node and select Add Existing Item….

223

460.In the Add Existing Item dialog, navigate to the \ VideoPlayer_Asset s folder and select the VideosPlayerContr ols.cs file. This file contains code written for us by a developer. 461.Press Open to add it to the project. 462.From the main menu, select Project | Build Project. 463.From the Common Properties dialog, click the Advanced property options button next to Maximum.

224

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

465.In the Create Data Binding dialog, click the Element Property tab. 466.With the Window node selected under Scene elements, select the TotalDuration node under Properties and press Finish.

225

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

468.In the Properties panel, click on the Events button to switch to events view. 469.Scroll to find the Loaded event. 470.Type WindowLoaded and press Enter. This method was written by a developer ahead of time. Visual Studio 2005 will launch after Enter is pressed. (If installed) 471.In Visual Studio 2005, we can review the code written by our developer (if installed), otherwise you will see the following dialog box.

226

472.Switch back to Expression Blend (if you are in VS) otherwise click OK in the Copy to Clipboard dialog box. 473.In the Objects and Timeline panel, under VideoPlayer_UI_de sign | Video, click the testvideo_wmv node to select it.

227

474.In the Properties panel, locate the MediaOpened event and type getInfo. 475.Press Enter to apply the event handler, which will open Visual Studio 2005 to it. (if installed) 476.Review the code written by the developer. (if VS installed) 477.Switch back to Expression Blend, or click OK in the dialog box. 478.In the workspace, click the XAML button to switch to XAML view. 479.From the main menu, select Edit | Find…. 480.In the Find dialog, type mediatimeline and click Find Next. 481.In the MediaTimeline tag, add the following XAML in bold italics: <MediaTimeline CurrentTimeInvalidated="UpdatePosition" d:DesignTimeNaturalDuration="58.925" BeginTime="00:00:00" Storyboard.TargetName="testvideo_wmv" Source="testvideo.wmv"/> 228

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

483.In the Objects and Timeline panel, under VideoPlauer_UI_de sign | VideoControls, click on the slider node to select it. 484.Set the PreviewMouseLeft ButtonDown event to BeginScrub and press Enter.

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

229

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

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

230

Exercise 9 –Data Binding Steps

Screenshots

491.In the Data panel of the Project panel, click the +XML button to create a new XML data source. 492.In the Add XML Data Source dialog, click Browse….

493.Navigate to the folder the project was created in and select Playlist.xml. 494.Press Open to create the data source.

231

495.Expand the data source nodes to locate the Video (Array) node. 496.Drag this node onto the video collection listbox.

497.In the context menu, select Bind “Video” to “ListBox”.

498.In the Create Data Binding dialog, click OK.

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

232

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

501.In the Objects and Timeline panel, locate the [ListBox] node under the VideoCollection. 502.Right-click the node and select Edit Other Templates | Edit Generated Items (ItemTemplates) | Edit Template. 503.Right-click the Video_ItemDetails node and select Copy.

504.Click the Scope up button to move up to the top-level scope.

233

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

506.Select the items under the SelectedVideo node. 507.Right-click the selected group and select Delete. 508.Right-click the SelectedVideo node and select Paste.

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

510.Hold the Shift key while resizing from the bottom so the group maintains it proportions.

234

511.From the Common Properties panel under the Properties panel, click on the Advanced property options button next to the DataContext item. 512.In the Advanced property options dialog, click Data Binding….

235

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

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

236

Exercise 10 –Customizing The Application Window Steps

Screenshots

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

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

522.From the Common Properties panel, change the ResizeMode to CanMinimize.

237

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

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

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

238

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

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

530.Switch back to Expression Design. 531.Click on the Properties button to switch back to Properties view. 532.In the Common Properties panel, clear out the content so no text is drawn in the button.

239

533.In the Objects and Timeline panel, click on Button_Close to select it. 534.From the main menu, select Tools | Make Button….

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

536.In the Common Properties panel, clear out the content so no text is drawn in the button. 537.Click on the Events button to switch to Events view.

240

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

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

241

The School Of Fine Art Contents

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

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

242

Exercise 1 – Importing Visual Studio Projects Steps

Screenshots

1. Choose Start, All Programs, Microsoft Expression, Microsoft Expression Blend Beta 1. 2. On the File menu, select Open Project.... Navigate to \Assets\SchoolOfFine Art.sln and then click OK. 3. Select the Project panel by clicking on its tab in the Solution Explorer, which is in the top right corner of Expression Blend by default.

243

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

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

6. From the Project menu, select Test Solution to run the application.

244

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

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

245

Exercise 2 – Working With Design & Layout Tools 9. In Expression Blend, select the open SOFALogin.xaml page tab to bring it to the front. 10.Select the Zoom tool from the Toolbox.

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

12.From the Toolbox, select the Direct Selection tool.

246

13.In the Objects and Timeline panel, double-click the [Grid] item to select it. Be sure to double-click as single-clicking the item will not select it. You will know the item is selected once it is surrounded by a yellow rectangle. 14.Select the Properties panel by clicking on its tab in the Solution Explorer.

15.Click the No Brush button in the Brushes panel to remove the pink background.

16.The login window will now look like this.

247

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

Pick the color from a swatch

○

Edit the RGB values

○

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

18.In the Layout panel, make the following property changes: ○

Set Width to 850

○

Set Height to 650

248

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

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

249

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

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

250

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

24.In the Properties panel, set the highlighted row to have a Height of 175 pixels. Note that the button and login grid will now overlap.

251

Exercise 3 – Importing Design Elements From A XAML File 25.Select the Project panel from the Solution Explorer by clicking on its tab.

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

27.Select Edit | Select All to select all items in the workspace. 28.Select Edit | Copy to copy the items to the clipboard.

252

29.Switch back to the SOFALogin.xaml page. 30.From the Blend menu bar, select Edit | Paste to paste the art from the clipboard. 31.From the Blend menu bar, select Object | Order | Send to Back to send the art to the background, allowing us to realign the controls.

32.Click the Selection tool from the top of the toolbox.

33.Rearrange the user interface controls to look like the layout in the screenshot here.

253

Exercise 4 – Applying Resources 34.Open the Resources panel by clicking its tab in the Solution Explorer.

35.Expand the ResourceDictionary_01.xa ml node.

254

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

37.In the context menu, select Style to apply the style of the resource to the existing button. Note that this doesn’t change the functionality, just the look. 38.Select the Username label.

39.Bring the Properties panel to the front by clicking its tab in the Solution Explorer.

255

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

41.Select the Username textbox. 42.Hold the Ctrl key and select the Password textbox. Both textboxes will now be selected. 43.In the Brushes panel, click the No Brush button to remove the background from the textboxes. 44.In the Brushes panel, click the BorderBrush button to select the brush used to draw the border of the textboxes.

256

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

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

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

257

48.Select the LoginLabelStyle resource.

49.Drag the LoginLabelStyle resource onto each label, selecting Style from the context menu provided each time. 50.At this point, the text from the labels might not be fully visible behind the textboxes. To fix this, make sure you have the Selection tool enabled (press V or select it from the Toolbox). Click on the grid containing the labels and textboxes. Find the circle near the left edge of the grid and resize the box so all items are completely visible. Your window should now look like this.

258

51.Drag and drop the LoginPanel resource from the Resources panel onto the window, but not on any existing controls. This will create a new instance of that control. 52.Switch to the Selection tool by pressing V. 53.Resize the LoginPanel to align with the right side of the middle column as shown in the screenshot. Make sure that the “Login” text rests at the top of the color art. Note that the UI controls will not be properly aligned with the new panel. 54.With the LoginPanel still selected, select Object | Order | Send to Back. 55.With the LoginPanel still selected, select Object | Order | Bring Forward. The LoginPanel is now visible, but behind the other UI controls.

259

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

57.Move the _LoginGrid so that its controls roughly fit into the background art provided by the LoginPanel.

58.Double-click the _LoginGrid node of the Objects and Timeline panel to select it.

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

260

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

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

62.If desired, drag both textboxes slightly up or down to better center in the background. 63.The login portion of the window should now look like this.

261

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

65.Note that when you move the mouse over the Go button, it shows an animation effect inherited from the resource we applied from the Resources panel. 66.Press Go to log in to the application. Note that the functionality still remains, even though we’ve completely redesigned the user interface. 67.Close the application when satisfied.

262

Exercise 5 – Working With Grids 68.Double-click the [Grid] node of the Objects and Timeline panel to select it.

69.From the Resources panel, drag and drop the DotsAnimationControl onto the window to the left of the LoginPanel. 70.Resize the DotsAnimation control so that it stretches the height of the red portion of the window.

263

71.Press F5 to show the window. Note that the dots animation we just added animates in the window. 72.Close the window when satisfied.

73.Make sure the workspace is in Grid Layout Mode. Resting the mouse over the Layout Mode Toggle Button at the top left corner of the window in the workspace can confirm this. If not in Grid Layout Mode, click the toggle. Unlocked padlocks will appear when you are in the right mode. 74.Press V to activate the Selection tool. 75.Click and drag the second column gridline slightly to the left.

264

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

77.Select Undo Move Gridline from the Edit menu to move the gridline back where it was originally.

265

78.For each control that moved 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: ○

The Go button

○

The _LoginGrid

○

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. 80.Select Undo Move Gridline from the Edit menu to move the gridline back where it was originally.

266

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

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

267

83.Remove the anchor from the right side of the control. 84.Drag the second column gridline to the left to test that the LoginPanel and all controls disappear when the column is resized to small. 85.Select Undo Move Gridline from the Edit menu to move the gridline back where it was originally.

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

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

268

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

89.Drag the second column gridline as far left as it will go. It should stop 240 pixels to the right of the first column gridline. 90.Select Undo Move Gridline from the Edit menu to move the gridline back where it was originally. 91.There are two pieces of background art that we want to anchor to the second column gridline. First, select the red band artwork by clicking on it. You’ll need to be sure to click on it between the animation and the logo.

269

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

270

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

95.To test out our new anchoring scheme, drag the second column gridline to the left. While the main UI elements will disappear, the artwork will gracefully resize and compress. 96.Select Undo Move Gridline from the Edit menu to move the gridline back where it was originally. 97.Click on the Asset Library in the Toolbox.

271

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

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

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

272

101.Press F5 to show the window. 102.In the new window, drag the GridSplitter we just added to the left. Note how it has the same impact on the running app as dragging the column gridline had on the design-time version. 103.Close the window when satisfied.

273

Exercise 6 – Midpoint Review 104.Open SOFAMain.xaml by double-clicking its node in the Project panel of the Solution Explorer.

105.Select the SOFAMainPage node of the Objects and Timeline panel by singleclicking it.

106.In the Layout panel in the Properties panel, change the Width to 850 and the Height to 650.

274

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

108.Double-click the MainGrid node in the Objects and Timeline panel to select it.

275

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

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

276

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

112.The window should now look like this screenshot.

277

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

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

278

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

116.Select the ClassList, and two [StackPanel] controls from the Objects and Timeline panel. Remember that you can select multiple items by single-clicking the first one and then holding the Ctrl key while single-clicking the others. 117.After all three are selected, right-click the selection and select the Delete option to remove these controls from the window.

279

118.The window should now look like this screenshot.

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

280

120.Select Edit | Select All to select all items in the workspace. 121.Select Edit | Copy to copy the items to the clipboard.

122.Switch back to the SOFAMain.xaml file. 123.Select Edit | Paste to paste the items from the clipboard to the window. 124.From the Expression Blend menu, select Object | Order | Send to Back to send the newly copied art to the background.

125.Switch back to the Main_Elements.xaml file. 126.Select the Mockup05b_Login_Small_ 800_Export node from the Objects and Timeline panel.

281

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

128.Switch back to the SOFAMain.xaml window. 129.Select the MainGrid node from the Objects and Timeline panel.

130.From the Brushes panel of the Properties panel, click the Brush Resources button.

282

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

132.The window should now look like this screenshot.

283

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

134.In the Properties panel, select the BorderBrush property of the StudentList and click the No Brush button to remove the border.

284

135.Expand the Layout panel to show advanced properties.

136.Disable the HorizontalScrollBar.

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

285

138.From the ResourceDictionary_01.xa ml section of the Resources panel, drag the ExportReport resource onto the Export Report button of the form. 139.Select Style from the resulting menu. This will apply the style of the resource to the button. 140.From the ResourceDictionary_01.xa ml section of the Resources panel, drag the LogOutButton resource onto the Log Out button of the form. 141.Select Style from the resulting menu. This will apply the style of the resource to the button. 142.The window should now look like this screenshot.

286

287

Exercise 7 – Working With Control Templates 143.Right-click the student listbox and select Edit Other Templates | Edit Generated Items (ItemTemplate) | Edit Template from the menu.

144.Note that the editable template item now has a yellow rectangle around it. Each control inside the template can be edited individually. 145.In addition, the Objects and Timeline panel is updated to reflect the item template being edited.

288

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

147.Note that all instances of the name label in the other items of the listbox are changed when the template is changed.

148.From the Resources panel, drag the YellowColor resource onto the rating label of the item template and select Foreground from the resulting menu.

289

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

150.The window should now look like this screenshot.

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

290

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

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

154.In the Layout panel of the Properties panel, change the Height to 90.

291

155.Select the name label.

156.Drag the bottom edge of the name label up until the Layout panel of the Properties panel indicates its Height is roughly 20. 157.Select the TextBlock2 node from the Objects and Timeline panel. This node refers to the rating label in the item template.

158.Use the up arrow key of the keyboard to move the rating label upward until the top margin indicator shows roughly 24.

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

292

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

161.Resize the description label so that it fits comfortably against the edges of the template. 162.With the description label still selected, change the following values in the Text panel of the Properties panel: ○

TextTrimming to CharacterEllipsis

○

TextWrapping to Wrap

293

163.The window should now look like this screenshot.

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

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

294

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

167.Right-click the [Image] node under the [Border] node and select Copy from the resulting context menu.

295

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

169.Right-click the StackPanel node and select Paste from the resulting context menu.

170.The window should now look like this screenshot.

296

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

172.Press F5 to test the application. 173.Press the GO button to log in.

174.On the main page of the application, scroll the listbox up and down to see how the text is nicely formatted and fits in with the application. 175.Select the first listbox item (“Higginbotham, Tom”). Note that the “selected item” color theme does not fit well with the app. 176.Close the application when satisfied.

297

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

178.From the Expression Blend menu, select Object | Edit Other Styles | Edit ItemContainerStyle | Edit a Copy….

179.In the Create Style Resource dialog, press OK to accept the default options.

298

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

181.Press F5 to test the application. 182.Press the GO button to log in.

299

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

300

Exercise 8 – Working With Event Handlers 185.Open the Window1.xaml file by double-clicking its node in the Project panel.

186.Select the window by clicking its node in the Objects and Timeline panel.

301

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

188.In the Layout panel, change the Width to 850 and the Height to 650.

189.In the Miscellaneous panel, clear the ShowsNavigationUI box. You may need to expand the panel to make this option visible.

302

190.Press F5 to test the application. 191.Note that although the application looks great now and is fully functional, you can no longer move or resize the window. 192.Close the application when satisfied by pressing Alt+F4.

193.At the top of the Properties panel, click the Events button to show the registered event handlers. This will change the Properties panel from Property Mode to Event Mode. 194.Scroll down to find the MouseLeftButtonDown event and type in StartDrag followed by the Enter key, the name of a function that will provide the dragging functionality for our window. Note that you may see a dialog asking for elevated permissions to perform this task. If so, allow the task to execute.

303

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

196.Press F5 to test the application. 197.Now you should be able to drag the window around the screen. 198.Close the application when satisfied by pressing Alt+F4.

304

Exercise 9 – Working With Bitmap Effects 199.Switch back to the SOFAMain.xaml window by double-clicking its node in the Project panel.

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

305

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

202.In the Brushes panel, click the No Brush button to remove the fill brush from the rectangle.

203.Resize the rectangle to take up most of the window.

306

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

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

206.Click on the yellow bar indicating the GlowColor of the effect.

307

207.Change the GlowColor to white using the color selector. 208.Press the Esc key to dismiss the color selector when done.

209.Change the GlowSize to 30 and the Opacity to 20%.

308

210.With the rectangle still selected, select Edit | Copy from the Expression Blend menu to copy it to the clipboard. 211.Open SOFALogin.xaml by double-clicking its node in the Project

212.Select Edit | Paste to paste the rectangle into the login form.

309

213.Press F5 to run the application. 214.On the login window, press the GO button to log in. 215.On the main window, you can see the subtle glow effect most noticeably near the bottom right corner, although it is present throughout the edge of the form. Note that the glow does not spill out beyond the boundary of the window itself. 216.Close the application when satisfied.

310

Fabrikam Ordering Application Contents Contents..............................................................................................................259 Background.........................................................................................................259 Notes...................................................................................................................259 Exercise 1 – Getting Started with Expression Blend and the Fabrikam Demo.....260 Exercise 2 – Using Templates to Create Custom Buttons....................................270 Exercise 3 – Working with Property Triggers and Animation...............................278 Exercise 4 – Working with XML Data Binding......................................................288 Exercise 5 – Working with 3D Animation and Event Triggers..............................300 Exercise 6 – More Data Binding...........................................................................305 Exercise 7 – Working with Visual Brushes...........................................................309 Exercise 8 – Designer and Developer Collaboration............................................313 Exercise 8 – Designer and Developer Collaboration

Background Fabrikam Incorporated has developed an ordering application to be used by customers. While the application is functionally complete, the developer did not attempt to make it visually appealing, leaving all design tasks to you. In this lab, we’ll walk through the process of making the existing application beautiful by using the features of Expression Blend.

Notes This lab was built and tested using Microsoft Expression Blend Beta 2.At numerous points in this lab you may run into the situation where selecting an element does not seem to update the Properties pane. This is a known issue and the best workaround is to scroll up and down within the Objects and Timeline panel until the Properties panel refreshes. If this workaround does not work, the alternative is to save the project, restart Expression Blend, and then re-load the project and continue your work.

311

Exercise 1 – Getting Started with Expression Blend and the Fabrikam Demo Steps

Screenshots

1. From the Start menu, select All Programs | Microsoft Expression | Microsoft Expression | Microsoft Expression Blend (Beta 2). 2. On the File menu, select Open Project.... Navigate to \Assets\Fabrika m_04.sln and then click the Open button.

312

3. Open the MainWindow.xaml file by double-clicking on it from within the Project panel. This will load the main Fabrikam window in design view.

4. Press the Tab key to maximize the available design workspace.

313

5. Right-click in the center of the Fabrikam “Catalog” panel area and select Set Current Selection | rectangle from the menu that appears.

6. Notice that six buttons have appeared on the far-right side of Expression Blend. These buttons represent the property categories into which all properties are organized.

314

7. Move and pause the mouse cursor over each of the six property buttons and read the tool tip that appears next to it. You should see buttons for Brushes, Appearance, Layout, Common Properties, Transform, and Miscellaneous.

8. Click the Brushes property button to load the Brushes window. This window gives you full access to all available brush related properties.

9. Press the Esc key to make the Brushes property window disappear.

10.Press the F5 key to have Expression Blend build and run the application. The Results pane will provide feedback during the build process.

315

11.After the Fabrikam application window is launched, survey the current design and capabilities present. Notice that the Catalog, Shopping Cart, Reviews, and Marketing Assets panes are ready for implementation and customization.

12. Close the Fabrikam application before moving on to the next step.

13.In Expression Blend, press the Tab key to return to the normal working mode where you can see all available panels. 14.From the Tools menu, select Options… to load the Options window.

316

15. Experiment with the Workspace Zoom slider to see how you can modify your work environment to suit your needs. The zoom value must be between 50 and 150. The screenshot to the right shows that a large zoom value makes the panels bigger and easier to read, but it also shrinks the available design area.

16. Select the zoom value that you

want to work with and click the OK button. Alternatively, you could also click the Cancel button to use the original zoom value.

17.Double-click the vertical GridSplitter control between the Catalog and Shopping Cart panels of the Fabrikam window. When selected, it will appear as shown in the screenshot to the right.

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

317

19.Expand the SampleControls.xaml resource dictionary by doubleclicking on it.

20.Drag the Vertical_Splitter style resource from the Resources panel and drop it onto the GridSplitter control that was selected during the previous step. 21.Select Style from the context menu that appears.

318

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

23.Drag the Horizontal_Splitter style resource from the Resources panel and drop it onto the GridSplitter control that was selected during the previous step. 24.Select Style from the context menu that appears. 25.Drag the Vertical_Splitter style resource from the Resources panel and drop it onto the GridSplitter control located between the “Reviews” and “Marketing Assets” Fabrikam application panels. 26.Select Style from the context menu that appears.

319

27.Drag the Horizontal_Splitter style resource from the Resources panel and drop it onto the GridSplitter control located between the “Shopping Cart” and “Marketing Assets” Fabrikam application panels. 28.Select Style from the context menu that appears.

29.Drag the Panel style from the SampleControls.xaml resource dictionary and drop it onto the “Catalog” Fabrikam application panel. 30.Select Style from the context menu that appears.

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

320

32.Repeat the process for the other panels by dragging the Panel style resource onto the “Shopping Cart”, “Reviews”, and “Marketing Assets” panels and selecting Style for each. When done, your window should look like this.

33.Select the Project panel and locate the UI_Elements.xaml file.

34.Open the UI_Elements.xaml file by double-clicking on the file within the Project panel.

321

35.Hold down the CTRL key while selecting the FabrikamLogo and RetailLogo elements from the top of the UI_Elements.xaml file.

36.Select Edit | Copy from the main menu.

37.Return to MainWindow.xaml. 38.Select the DocumentRoot element by double-clicking on it in the Objects and Timeline panel. 39.Select Edit | Paste from the main menu top paste the copied resources into the main window. Note that they will likely paste above the top left corner of the window, so you may need to scroll the workspace to see them. 40.Hold down the ALT key and drag the pasted logos over the empty white area of the Fabrikam application window, and drop them into place.

322

41.Press the F5 key to test run the application and see the application run with the new styles applied. 42.Close the Fabrikam application.

323

Exercise 2 – Using Templates to Create Custom Buttons 43.In the Objects and Timeline panel, double-click the [StackPanel] element at (Window | DocumentRoot | NavigationGrid).

44.Select the Button tool from the toolbox on the left side of Expression Blend.

45.Draw a new Button element within the selected StackPanel by holding down the left mouse button and dragging until the button looks similar in size to the screenshot on the right.

324

46.Edit a copy of the button template by right-clicking on the button and selecting Edit Control Parts (Template) | Edit a Copy.

47.In the Create Style Resource window, name the new style resource “MyFabrikamButton”. Note that the new resource is created in the current document by default, rather than in an external resource dictionary.

48.Select the OK button to continue.

325

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

50.The Objects and Timeline panel now shows the contents of the MyFabrikamButton template.

51.Single-click the Chrome element and press the Delete key. You should only see the Template node left in the Objects and Timeline panel.

52.Add a new Grid element to the MyFabrikamButton template by double-clicking on the Grid button from the toolbar.

The grid will be used to help layout our new design.

326

53.Double-click the Grid node within the Objects and Timeline panel to select it.

54.Open the UI_Elements.xaml file and zoom into the top-left corner to find the button design elements.

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

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

327

57.Return to MainWindow.xaml and then select Edit | Paste from the main menu to insert ButtonElements into the MyFabrikamButton template.

58.In the Properties panel, change the Left and Top Margin properties to 0 so that the ButtonElements fit within the Grid. 59.Resize ButtonElements as necessary so that it looks like the screenshot to the right.

60.Select the Asset Library button ( ) located in the toolbar on the left side of Expression Blend to load the Asset Library window.

61.Single-click on the ControlPresenter control within the Asset Library window. The ControlPresenter is now the currently selected control and

328

is also shown in the toolbar. 62.Double-click the ContentPresenter button to add a ContentPresenter control as a child of the Grid element in the MyFabrikamButton template.

63.Verify that a new ContentPresenter element was added by looking for it in the Objects and Timeline panel. You will also see the text “Button” in black in the top left corner of the control on the window. 64.In the Properties panel, change the HorizontalAlignment and VerticalAlignment properties to Center. This will center the text in the control.

329

65.Single-click the Scope Up button within the Objects and Timeline panel.

66.Press the V key to use the Selection tool.v 67.With the new Button element selected, press Ctrl+C to copy the button element, and then press Ctrl+V to paste a copy of the button. Because it is being pasted into a StackPanel, it appears in the next available spot, which is directly to the right of the original. 68.Press Ctrl+V four more times so that there are a total of six buttons. These buttons will also paste in to the right.

330

69.Single-click on the first Button element from within the Objects and Timeline panel.

70.Hold the Shift key down and then single-click on the last Button element from within the Objects and Timeline panel. All six buttons should now be selected as shown in the screenshot to the right. 71.In the Properties panel, increase the Right Margin property to 10 pixels so that the buttons have some separation between them.

72.In the Project panel, expand the images folder and locate Icon01.png through Icon06.png.

331

73.Double-click the Icon01.png file to create a copy of it in the main Fabrikam window.

Since the StackPanel that contains the buttons is still the currently selected container, the new Image element will be placed at the end of the StackPanel by default. The image may or may not be visible to you, depending upon how wide the buttons are defined to be. 74.Drag the new Image element so that the mouse cursor is over the first (far-left) Button.

75.Hold the Image element over the first Button until a message stating “ALT-drag to place into [Button]” appears. 76.Press and hold the Alt key and then release left mouse button to place the Image within the first Button. You may release the Alt key after the image has been pasted.

332

77.Resize the new Image so that it fits within the first Button.

78.Repeat the process of adding icon images to the remaining Button elements so that the next button uses Icon02.png, and so on until all six Button elements look like the screenshot to the right. 79.Press the F5 key to see the application run with the new button images. 80.Close the Fabrikam application.

333

334

Exercise 3 – Working with Property Triggers and Animation 81.In the Objects and Timeline panel, double-click the first Button element to select it (at Window | DocumentRoot | NavigationGrid | [StackPanel]).

82.Right-click on the Button element and select Edit Control Parts (Template) | Edit Template.

83.Locate the Triggers section of the Interaction panel.

84.Click on the “+ Property” button to add a new property trigger for the MyFabrikamButton template.

335

85. Observe that the new property trigger is currently set to be activated when “MinWidth = 0” and that trigger recording mode is turned on.

86.Change the property trigger so that it is activated when the IsMouseOver property is equal to True.

87.In the Objects and Timeline panel, expand the ButtonElements node by clicking on the expansion button ( ) located to its left.

88.Single-click the ButtonBackground element to select it.

336

89.In the Properties panel, locate the Brushes section and single-click on the Fill property to select it. 90.Single-click on the middle gradient stop button.

91.Change the Alpha color component to 50% so that the button backgrounds will seem to glow when the mouse is placed over them.

92.Note that the changes to the Fill property have been recorded in the Triggers section of the Interaction panel.

337

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

94.Hold down the Shift key and then press the Up arrow to move the YellowArrow element up slightly as shown in the screenshot to the right.

95.Press the F5 key to run the application and see how the property triggers behave. Notice that the backgrounds now glow and the yellow arrows move up slightly whenever you mouse over one of the buttons. 96.Close the Fabrikam application.

338

97.In the Triggers section of the Objects and Timeline panel, click on the small minus buttons ( ) on the right-hand side of each previously recorded property to delete them.

98.Click on the small plus button ( ) to the right of the Actions When Activating description.

99.When the Timeline Needed window appears asking you to consent to the creation of a new timeline, select OK to continue.

100.In the Objects and Timeline panel, drag the animation Playhead to 0.5 seconds using the yellow triangle ( ), as shown in the screenshot to the right.

The alternative way to move the animation Playhead is to type the desired time value into the Playhead Position text box just above the timeline.

339

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

102.In the Properties panel, single-click on the middle gradient stop button.

103.Change the Alpha color component to 50% so that the button backgrounds will seem to glow when the mouse is placed over them. This will add an animation key frame to the timeline, represented as a white oval ( ) on the same row as the ButtonBackground element.

340

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

105.Hold down the Shift key and then press the Up arrow to move the YellowArrow element up slightly as shown in the screenshot to the right.

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

341

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

107.In the Objects and Timeline panel, select the Default timeline from the drop-down box.

108.In the Triggers panel, select IsMouseOver = True.

109.Click on the small plus button ( ) to the right of the Actions When Deactivating description.

110.Select the New Timeline… option in the first drop-down box below the Actions When Deactivating section.

342

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

112.Move the animation Playhead to 0.5 seconds.

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

343

114.In the Properties panel, single-click on the middle gradient stop button.

115.Change the Alpha color component to 12% and then back to the original 11%. This will add an animation key frame to the timeline, represented as a white oval ( ) on the same row as the ButtonBackground element.

116.In the Objects and Timeline panel, single-click the YellowArray element to select it.

344

117.Hold down the Shift key and then press the Up arrow to move the YellowArrow element up slightly as shown in the screenshot to the right.

118.Hold down the Shift key and then press the Down arrow to move the YellowArrow element back down to the original position.

119.This will add an animation key frame to the timeline, represented as a white oval ( ) on the same row as the YellowArray element. 120.In the Objects and Timeline panel, select the Default timeline from the drop-down box.

121.In the Triggers panel, select IsMouseOver = True.

345

122.Verify that the details for the IsMouseOver=True property trigger match the screenshot on the right.

When the IsMouseOver property is set to True for a button, Timeline1 will gradually animate a glow effect in the background of the button while slowly moving the yellow arrow up.

As soon as the mouse leaves the button area, the IsMouseOver property will be set to False, and Timeline1 will handoff control to Timeline2. Timeline2 will then gradually return the background and yellow arrow to their original values. 123.In the Objects and Timeline panel, click the Scope Up button (

).

346

124.Press the F5 button to run the application and see how the addition of property triggers and animation can quickly add some dynamic style to your application. Notice that all of the buttons are animated since we edited their shared template. 125.Close the Fabrikam application.

347

Exercise 4 – Working with XML Data Binding 126.Double-click on the [Grid] element located within Panel_2 (Window | DocumentRoot | MainGrid | Panel_2).

127.In the Appearance section of the Properties panel, change the Visibility property to “Visible”.

128.In the Data section of the Project panel, select the “+ XML” button to add a new XML data source. 129.In the Add XML Data Source window, select the Browse button.

348

130.In the “Browse for XML data source” window, navigate to the Fabrikam project directory and select data.xml.

131.Click the Open button.

132.In the Add XML Data Source window, select the OK button to continue.

133.In the Data section of the Project panel, locate and expand the SectionsDS2 | Sections | Extras | Extra node.

134.Drag the Extra (Array) data source node and drop it onto the ProductList element as shown in the screenshot to the right.

349

135.In the context menu that appears, select the Bind “Extra” to “ListBox” option.

136.In the Create Data Binding window, click the OK button to data bind the new data source to the ItemsSource (default) field.

137.In the Create Data Template window, de-select the Image and Description fields so that only Name, Price, and Units remain.

Note that a preview is rendered on the right-hand side of the Create Data Template window.

138.Select the OK button to continue.

350

139.In the Objects and Timeline panel, select the ProductList element at (Window | DocumentRoot | MainGrid | Panel_2 | [Grid] | ProductGrid)

140.In the Properties panel, select the Background brush.

141.Click the “No Brush” button ( ) to remove the white brush.

351

142.Select the Foreground brush.

143.Move the mouse cursor over the color picker and hold down the left mouse button. 144.With the left mouse button still pressed, move the mouse to the upper-left corner of the color picker so that a white color is selected. 145.Release the left mousebutton. 146.Right-click on the ProductList element and select Edit Control Parts (Template) | Apply Resource | ListBoxProducts so that the scroll bar matches the Fabrikam theme.

352

147.Press the F5 key to run the application and verify that the data binding was successful.

Note that the list of products uses the default template associated with a ListBox control, so it does not match the Units, Product, and Price columns that were designed.

148.Close the Fabrikam application. 149.Right-click the ProductList element and select Edit Other Templates | Edit Generated Items (ItemTemplate) | Edit Template from the context menu that appears. 150.In the Objects and Timeline panel, note that the item template consists of a StackPanel with three TextBlock children elements.

353

151.Right-click on the StackPanel element and select Change Layout Type | Grid.

152.Expand the new Grid element so that you can see the three TextBlock elements.

153.In the Objects and Timeline panel, single-click the first TextBlock element to select it.

154.In the Layout section of the Properties panel, change the Left Margin property to 64.

354

155.In the Objects and Timeline panel, single-click the second TextBlock element to select it.

156.In the Layout section of the Properties panel, change the Left Margin property to 218 and the Bottom Margin property to 0.

157.In the Objects and Timeline panel, single-click the third TextBlock element to select it.

158.In the Layout section of the Properties panel, change the Left Margin property to 21 and the Bottom Margin property to 0.

355

159.Select the Ellipse drawing tool by pressing the E key.

160.Double-click the Ellipse button from the toolbox to insert an ellipse into the item template Grid.

161.In the Layout section of the Properties panel, change the Width and Height properties to 11.

162.In the Brushes section of the Properties panel, singleclick the Advanced Property Options button to the right of the Fill brush (it is a small square).

356

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

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

357

165.Select the All Properties option from the Show dropdown box.

166.Expand the Fields treeview so that the Sections | Extras | Extra node is expanded.

167.Select the Units node as the property to bind to. 168.Expand the available dialog options by clicking on the expand arrow near the bottom of the window (to the top left of the Finish button). 169.Select the UnitsToBrushConverter value converter. This value converter will take certain value ranges of the Units field and convert them into Brush colors. Note that this value converter was created by a programmer and is not something that comes with Expression Blend. 170.Click the Finish button.

358

171.Notice that we now have colored circles associated with the number of units available for each product.

172.Click the Scope Up button in Objects and Timeline to return to the main window.

173.Double-click on the DetailsView element to select it (at Window | DocumentRoot | MainGrid | Panel_2 | [Grid]). 174.In the Common Properties section of the Properties panel, single-click on the Advanced Property Options button (the little square to the right of the DataContext’s New button).

359

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

176.In the Create Data Binding window, select the Element Property tab.

177.Under Scene Elements, navigate to and select the ProductList element (at Window | DocumentRoot | MainGrid | Panel_2 | [System.Windows.Controls .Grid] | ProductGrid) 178.Under Properties, navigate to and select SelectedItem. 179.Click the Finish button. 180.In the Objects and Timeline panel, single-click on the ProductDetailImage element (under DetailsView | DetailsImage).

360

181.In the Common Properties section of the Properties panel, single-click on the Advanced Property Options button to the right of the Source property.

182.In the Create Data Binding window, select the Explicit Data Context tab. 183.Expand the Fields sections and select the Image node. 184.Click the Finish button.

185.Note that the remaining elements in the DetailsView grid, including the product name, description, and price details, were databound previously. There are no further action items for this step.

361

186.Press the F5 key to test run the application and verify that the product selection and data binding works as expected.

187.Close the Fabrikam application after you are done testing it.

362

Exercise 5 – Working with 3D Animation and Event Triggers 188.In the Objects and Timeline panel, double-click on the Viewport_3D element (at Window | DocumentRoot | MainGrid | Panel_2 | [Grid]).

189.Single-click the Hide\Show button found to the right of the Viewport_3D element so that it is no longer hidden. This is a small button that visually toggles between an eye and a circle. 190.An eye icon will appear when an element is made visible.

191.In the Objects and Timeline panel, single-click on the OrthographicCamera element (at Viewport_3D | Camera) and explore the available Camera properties in the Properties panel.

363

192.Single-click on the [AmbientLight] element (at ViewPort_3D | VPR1000_Group | ModelVisual3D | <>Content | Scene2) and explore the available Light properties in the Properties panel. 193.In the Objects and Timeline panel, double-click on the Meshes element (at ViewPort_3D | VPR1000_Group | ModelVisual3D | <>Content | Scene2).

194.Expand the Group_of_4_Objects element. Note that the 3D object is composed of numerous meshes that were previously designed outside of Expression Blend. 195.Double-click on the VPR1000_Group element.

364

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

197.Move the animation Playhead to 1 second.

198.In the Transform section of the Properties panel, click on the Rotation button.

199.Change the Rotation property for both X and Y to 90 degrees and keep Z at 0 degrees.

365

200.Repeat the process of setting animation key frames at a time of 1 second for the remaining timelines:

VPR01: Rotate X to 0 degrees, Rotate Y to 0 degrees, and Rotate Z to 0 degrees. VPR02: Rotate X to 180 degrees, Rotate Y to 0 degrees, and Rotate Z to 90 degrees. VPR03: Rotate X to 90 degrees, Rotate Y to 0 degrees, and Rotate Z to 90 degrees. 201.In the Objects and Timeline panel, create a new timeline by clicking on the ‘+’ button (shows “Create new timeline” during mouse over) and type VPR04 for the resource name.

202.Select the OK button to continue. 203.Repeat the process of setting animation key frames at a time of 1 second for the remaining VPR04 timeline:

VPR04: Rotate X to 40 degrees, Rotate Y to -40 degrees, and Rotate Z to 20 degrees.

366

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

205.In the Objects and Timeline panel, double-click on the [StackPanel] element (at Window | DocumentRoot | MainGrid | Panel_2 | [Grid] | Viewbox | [StackPanel]). This element contains the 5 static images representing the different 3D views of the real 3D element.

206.Single-click on the image element. 207.In the Triggers section of the Interaction panel, click the “+ Event” button to add a new event trigger.

367

208.Change the new event so that it will trigger when the image MouseUp event is raised.

209.Click the ‘+’ button to the right of the description for the image.MouseUp event trigger to add a new action to perform.

210.Change the new action to begin the VPR00 timeline.

211.Repeat the process of adding event triggers for the remaining images (5 total) and setting up the appropriate actions to be performed. For example, the next image should begin the VPR01 timeline when the MouseUp property is raised.

368

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

213.Close the Fabrikam application.

369

Exercise 6 – More Data Binding 214.In the Objects and Timeline panel, select the Panel_3_Grid element (at Window | DocumentRoot | MainGrid | LowerGrid | Panel_3).

215.In the Properties panel, change the Visibility property to “Visible”. 216.In the design view, note that the Panel_3_Grid already includes a customized TabControl with prepopulated text and a Slider for controlling zoom functionality. 217.Open the Resources panel and expand the SampleControls.xaml resource dictionary.

370

218.Drag the FabrikamSlider style resource from the Resources panel and drop it over the Slider control that is next to the magnifying glass icon.

219.From the context menu that appears, select the Style option.

220.In the Objects and Timeline panel, double-click on the [RichTextBox] element (at Panel_3_Grid | [TabControl] | [TabItem] “Review1” | [Grid]).

221.In the Text section of the Properties panel, select the Advanced Property Options button to the right of the FontSize property.

371

222.Select the Data binding… option.

223.Select the Element Property tab.

224.In the Scene elements tree view, select the Slider_FontSize element (at Window | DocumentRoot | MainGrid | LowerGrid | Panel_3 | Panel_3_Grid). This is the element that has the property we want to bind to. 225.In the Properties tree view, select the Value property. This is the property that we would like to have bound to the FontSize property of our text box. 226.Select the Finish button to continue.

372

227.In the Objects and Timeline panel, single-click on the [TextBox] element (located in Panel_3_Grid).

228.In the Common Properties section of the Properties panel, select the Advanced Property Options button to the right of the Text property. 229.Select the Data binding… option.

373

230.Select the Element Property tab.

231.In the Scene elements tree view, select the Slider_FontSize element (at Window | DocumentRoot | MainGrid | LowerGrid | Panel_3 | Panel_3_Grid). This is the element that has the property we want to bind to. 232.In the Properties tree view, select the Value property. This is the property that we would like to have bound to the Text property of our text box. 233.Select the small down arrow button near the bottom for more options. 234.Select the TwoWay binding direction. This means that changes to the [TextBox] element will update the Value property of the Slider_FontSize element, plus the other way around. 235.In the “Update source when” drop-down box, select the PropertyChanged option. 236.Select the Finish button to 374

237.Press the F5 key to run the application and verify that the zoom slider and text box for controlling the font size works as expected.

238.Close the Fabrikam application.

Exercise 7 – Working with Visual Brushes 239.In the Objects and Timeline panel, double-click the [Grid] element at (Window | DocumentRoot | MainGrid | LowerGrid | Panel_4).

240.In the Properties panel, change the Visibility property for the [Grid] element to “Visible”.

375

241.In the Objects and Timeline panel, double-click the second [Grid] element listed under (Window | DocumentRoot | MainGrid | LowerGrid | Panel_4 | [Grid]).

242.In the Objects and Timeline panel, expand the [Grid] | grid node and single-click the viewport3D element. 243.Select Tools | Make Brush Resource | Make Visual Brush Resource from the main menu.

We will use this visual brush to create a reflection of the currently selected marketing asset.

376

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

245.Press the R key to select the Rectangle tool and draw a rectangle below the drawing of the billboard by holding down the left mouse button and dragging.

The large yellow arrow in the screenshot to the right shows the location of the new rectangle.

377

246.In the Brushes section of the Properties panel, click the Advanced Property Options button to the right of the Stroke property and select Reset from the context menu that appears.

The Stroke property should now say “No brush” as shown in the screenshot to the right. 247.Click on the Fill property in the Brushes section.

248.Select the “Brush resources” button. 249.Navigate to and select the “VisualBrush1” resource.

378

250.Locate the Transform section of the Properties panel.

251.Select the Flip tab (far right) of the Transform section. 252.Click the “Flip Y Axis” button so that the rectangle looks more like a reflection. 253.Press V to use the Selection tool. 254.Re-size and move the reflection rectangle until it looks similar to the screenshot to the right.

379

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

256.Close the Fabrikam application.

380

Exercise 8 – Designer and Developer Collaboration 257.In the Objects and Timeline panel, double-click the CartGrid element (at Window | DocumentRoot | MainGrid | Panel_1).

258.In the Properties panel, change the Visibility property to “Visible”.

259.Open the Resources panel and expand the SampleControls.xaml resource dictionary.

381

260.Drag the OrderButton style resource from the Resources panel and drop it over the grey Button control that is in the “Shopping Cart” Fabrikam application panel.

261.From the context menu that appears, select the Style option.

262.Drag the ShoppingCartButton style resource from the Resources panel and drop it over the grey Button control that is in the “Catalog” panel of the window.

382

263.In the Objects and Timeline panel, single-click the order button (represented by the [Button] "Button" element under Window | DocumentRoot | MainGrid | Panel_2 | [Grid]). 264.In the Properties panel, select the Events button to show the available events.

265.In the Click event text box, type AddToShoppingCart and press the Enter key. AddToShoppingCart refers to a block of code that will be executed to handle clicks on the order button.

383

266.If you have a version of Visual Studio installed, Expression Blend will attempt to launch it with your current project and load the AddToShoppingCart method.

267.If Visual Studio is not installed, Expression Blend will provide you with a function definition you can paste into your code editor of choice, or email to a developer.

OR

384

268.If Visual Studio was opened with the project, select all of the green text contained within the curly braces for the AddToShoppingCart method and select Edit | Advanced | Uncomment Selection from the main menu. This will help simulate having a developer add the needed functionality.

269.Close Visual Studio and save your changes when prompted. 270.If Visual Studio was not opened, dismiss the Copy To Clipboard window by clicking the Cancel button.

271.Load Notepad and open the CodeFile2.cs file (you will need to search for all files *.*).

272.Remove the “//” comment characters from all lines in the AddToShoppingCart method. 273.Close Notepad and save your changes when prompted.

385

274.Back in Expression Blend, press the F5 key to run the application and verify that the shopping cart functionality has been hooked up to the Fabrikam user interface correctly.

275.Close the Fabrikam application.

276.In the Objects and Timeline panel, double-click the DocumentRoot element. 277.Single-click on the Asset Library button from the toolbar on the left side of Expression Blend. 278.In the Asset Library window, select the Custom Controls tab.

386

279.Drag the AnimationController control onto the MainWindow.xaml design surface and drop it just to the right of the multicolored circle in the top-right corner of the Fabrikam user interface.

280.Press the V key to activate the Selection tool. 281.Move and re-size the new AnimationController element so that it looks like the screenshot on the right. 282.Open the Resources panel and expand the SampleControls.xaml resource dictionary.

387

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

284.From the context menu that appears, select the Style option.

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

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

388

287.In the animation timeline, move the animation Playhead to 1 second.

288.In the Properties panel, select the Properties button in the top-right part of the panel to exit the Events mode. 289.In the Brushes section of the Properties panel, select the Fill property.

290.Use the color picker to choose a red scheme. This will record a key frame.

389

291.In the animation timeline, move the animation Playhead to 2 seconds. 292.Use the color picker to choose a yellow scheme. This will record another key frame. 293.In the animation timeline, move the animation Playhead to 3 seconds. 294.Use the color picker to choose a green scheme. This will record another key frame. 295.In the animation timeline, move the animation Playhead to 4 seconds. 296.Use the color picker to choose a purple scheme. This will record another key frame. 297.Select the Default timeline from the drop-down box near the top of the Objects and Timeline panel

390

298.In the Objects and Timeline panel, single-click the [AnimationController] element.

299.In the Miscellaneous section of the Properties panel, change the StoryBoardName property to Timeline1 and press Enter.

300.Change the NumberOfSeconds property to 4 and press Enter. These are custom properties were added by the developer of the AnimationController control.

391

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

302.Close the Fabrikam application.

392