koestie.files.wordpress.com … · web viewworking with xaml exported from expression design, ......

Expression Blend Hands On LabLab Manual

Intro to Expression Blend End-To-End Exercise

Background

We’ve been commissioned by The Museum of Antiques to develop a kiosk application for their exhibition. 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.

Exercise 1 – Setting Up the Project Structure

Steps Notes1. Select Start | All Programs,

Microsoft Expression | Microsoft Expression Blend.

You can either use Expression Blend 2 or Expression 2.5. March 2008 Preview.

2. From the main menu, select File | New Project….

3. In the Create New Project dialog, select WPF Application, change the Name to ArtViewer and click OK.

You can put the project folder on your desktop for easier access. Just be sure to remember!

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 ArtViewer project node.

6. Select Add Existing Item… from the context menu.

7. In the Add Existing Item dialog, navigate to the ASSETS folder.

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

o catalogdata.xml is an XML file that contains test data.

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

o Buttons.xaml which contains XAML code for the close and drag buttons.

Navigate to the folder you unpacked the downloaded Assets.rar file to.

Note how any files referenced inside XAML code are also imported – the APP-LAYOUT_Files folder contains the background image and the drop shadow image that we imported in Expression Design.

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

10. Select New Folder from the context menu to create a new folder.

11. Click once on the New Folder1 folder. After a short pause, the folder name will become editable.

12. Change the name to images and press Enter. This folder will contain the bitmap images referenced by the catalogadata.xml file.

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

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

15. In the Add Existing Item dialog, navigate to the ASSETS\ images folder.

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

Navigate to the folder you unpacked the downloaded Assets.rar file to and open the images folder.

17. Click on the white triangle

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

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

19. Right-Click on the topmost node in the Files tab named Solution ArtViewer and select Edit in Visual Studio from the context menu.

Note how the project structure in Visual Studio is exactly the same as in Expression Blend. Double-click Window1.xaml to open it and note the split view.

20. Close Visual Studio and switch back to Expression Blend. Press F5 to test your application.

Note the empty window of your application with the standard windows buttons. In Exercise 2, we will start to modify this look.

Exercise 2 – Customizing the Application Window

Steps Screenshots21. On the lower left side of

Expression Blend, locate the Objects and Timeline panel.

22. Click on the Window node to select it.

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

24. In the Layout panel, change the Width to 800 and the Height to 600.

25. Still in the Layout panel, change the Background to transparent by clicking the NoBrush button on the color palette.

26. In the Appearance panel, tick the AllowTransparency box.

27. Click on the Project tab to open it.

28. Double-click on the APP_LAYOUT.XAML file to open it.

29. In the Objects and Timeline panel, right-click on the Background group and select Copy from the context menu to copy it.

30. Switch back to Window1.xaml using the breadcrumb navigation at the top of the artboard window.

31. Click anywhere on the artboard outside the application window to de-select and press CTRL-V to paste.

Note how the complete background, including all the graphic elements appears on your artboard.

32. Press F5 to test the application. It should look similar to the screenshot. Close the window with ALT-F4.

Exercise 3 – Data Binding

Steps Screenshots33. In the Objects and Timeline

panel, click on the LayouRoot node to select it. This node is located at Window | LayoutRoot

34. From the left side tools menu select the double arrow button (>>) to expand the Asset Library

35. In the Asset Library, select the ListBox. If you can not find the ListBox, select Show All at the top.

36. On the artboard, click and drag to define the size of the ListBox. It should start below the museum catalog text and cover the area of the application window. You can resize and move the ListBox to the desired place by dragging the handles.

37. In the Objects and Timeline panel, the new ListBox element should be outside of the background group! If not, click and drag the ListBox entry in the Objects and Timeline panel on to the LayoutRoot node.

You might need to move the ListBox to the final position once again on the artboard.

38. Click on the Project tab to switch to the file view.

39. Below the Project tab, note the Data tab.

40. In the Data tab, click on +XML. This creates a data source connected to an XML file. You can also connect to other data sources via the +CLR button.

41. In the pop up, enter the name of the XML file in the URL box: catalogdata.xml.

Note how Blend automatically reads the structure from the XML file and displays a hierarchical view in the Data tab.

42. In the Data panel, expand the Catalog and Origin nodes with the white arrow until you reach the Entry element.

43. Click the Entry element and drag it onto the artboard and the ListBox.

44. In the context menu, select Bind ENTRY to ListBox. In the next pop up, click OK.

45. In the Create Data Template pop up, click OK.

46. Press F5 to test your application. Close the window with ALT-F4.

47. With the ListBox still selected, click on the Properties tab.

48. In the Brushes panel of the Properties panel, set the Background property to transparent with the NoBrush button.

49. In the Brushes panel of the Properties panel, set the BorderBrush property to transparent with the NoBrush button.

50. In the Properties panel, type scro in the search box.

51. Set the HorizontalScrollbar property to Hidden.

52. Press F5 to test your Note how there is still a grey background in the ListBox that turns to blue

application. when you click on a ListBox entry!53. In the artboard, right-click on

the ListBox and select View XAML from the context menu.

54. Press F4 to hide all panels. Click on XAML in the view tab list on the right side of the artboard to switch to XAML view.

Note how the ListBox entry is highlighted in the XAML editor.

55. Open the styles.txt file (located in <labroot>\Assets\) in Notepad by double-clicking it.

56. In Notepad, select all and Copy with CTRL-C.

57. Switch back to Blend and paste the text below the ListBox entry.

58. Edit the <ListBox> markup so that it looks exactly like on the right (Note: Line breaks not shown correctly here!). Pay special attention that the <ListBox> tag is closed properly!

<ListBox IsSynchronizedWithCurrentItem="True" Margin="24,120,45.333,41.333" ItemsSource="{Binding Mode=Default, Source={StaticResource CATALOGDS}, XPath=/CATALOG/ORIGIN/ENTRY}" ItemTemplate="{DynamicResource ENTRYTemplate}" Background="{x:Null}" BorderBrush="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

<ListBox.Resources><SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/><SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/><SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/></ListBox.Resources>

</ListBox>59. Press F5 to build and run the

application. Close the window with ALT-F4.

Note how all the colors are gone and the ListBox is fully transparent.Note how Blend is also a full-fledged XAML editor and that it is sometimes easier to work directly in XAML rather than using the design surface.

60. Click on the ListBox on the artboard to select it and click on the little arrow at the top breadcrumb navigation next to [ListBox].

61. Select Edit Other Templates > Edit Generated Items Template > Edit Template from the context menu.

Note how the Objects and Timelines Tab changes.

62. Click on StackPanel in the list to select it and press DELETE. The data in the ListBox vanishes as the template elements are deleted.

63. Switch to APP_LAYOUT.XAML using the breadcrumb navigation at the top of the artboard.

64. Select the Template group in the Objects and Timeline Tab and press CTRL-C to copy.

65. Switch back to WINDOW1.XAML and press CTRL-V to paste.

Note how the template elements appear in the artboard. Move the elements up and position them using the arrow keys or mouse until the layout looks good. You might need to select the elements first in the Objects and Timelines Tab.

66. Press F5 to build and run the application. Close the window with ALT-F4.

Note how it looks much better than before - but the application does not display the data anymore! We need to bind the individual UI elements to the data source fields.

67. Select Title_Left in the Objects and Timelines Tab.

68. On the Properties Tab (right), find the COMMON PROPERTIES group.

69. Click the small square button next to the TEXT property to open the Advanced Property

Options.70. Select Data Binding from the

context menu71. In the Create Data Binding

dialog, expand the data source until the YEAR element is displayed in the list and select it.

72. Click Finish.

Note how the changes are visible immediately in the artboard.

73. Do the same for all the other text elements to map them:o Title_Top maps to TITLEo Description maps to DESCRIPTION

74. Select the Image element and bind the SOURCE property to the IMAGE string in the data source just like you did with the text elements.

75. Press F5 and scroll through the data.

76. Close the window with ALT-F4.

Note that there are still glitches in the display: font sizes are too big for some elements and the title text is cut off. Play around with the layout tools and text properties to get to the final desired design. You might need to modify the ListBox size by dragging it and modifying the wrap property of the title element as well.

Exercise 4 – Data Binding Revisited

Steps Screenshots77. In the Objects and Timeline

panel, double-click on the LayouRoot node to select it.

78. From the left side tools menu select the double arrow button (>>) to expand the Asset Library

79. In the Asset Library, select the ComboBox. If you can not find the ComboBox, select Show All at the top.

80. On the artboard, click and drag to define the size of the ComboBox. It should be located on the right side of the window, above the image and to the right of the museum catalog text. You can resize and move the ComboBox to the desired place by dragging the handles.

81. In the Properties tab, find the ItemSource property (located under Common Properties).

82. Click on the little square next to the ItemSource property field to open the advanced options menu.

83. Select Data Binding from the menu

84. In the Create Data Binding dialog, click on CATALOGDS on the left side.

85. On the right side, expand the field list using the little white arrows until you see @ Country: (String).

86. Select @ Country: (String).87. Click Finish.

Note how the ComboBox is automatically filled with data.

88. In the Objects and Timelines tab, double-click on ListBox to select it.

89. In the Properties panel, under Common Properties find the DataContext property.

90. Click on the little square next to the DataContext property field to open the advanced options menu.

91. Select Data Binding from the menu.

92. In the Create Data Binding dialog, click the ELEMENT PROPERTY tab at the top.

93. On the left side, expand the Scene elements using the little arrow until the ComboBox (System.Windows.Controls.ComboBox) is displayed in the list.

94. Select ComboBox in the list.95. On the right side, scroll down

until you find the SelectedItem: Object entry in the list.

96. Select SelectedItem: Object in the list.

97. Click Finish.

98. In the Properties panel, click on the little square next to the ItemsSource property field to open the advanced options menu.

99. Select Data Binding from the menu.

100.In the Create Data Binding dialog, click the EXPLICIT DATA CONTEXT tab at the top.

101.Expand the field list using the little arrow until you see ENTRY (Array).

102.Select ENTRY (Array) and click Finish.

103.Press F5 to test your application. Change the selection in the ComboBox.

Note how the data display in the ListBox changes when you change the ComboBox.

Exercise 5 – Control Templates

Steps Screenshots104.Click on the [ListBox]

element in the breadcrumb navigation at the top of the artboard to get back to the topmost layout level.

105.Click on the little arrow next to [ListBox] in the breadcrumb navigation at the top of the artboard and select Edit Control Parts (Template) > Edit a Copy from the context menu.

106.In the dialog box, click OK.


107.Click on [Scrollviewer] in the Objects and Timelines tab to select it.

108.Click the little arrow in the breadcrumb navigation next to [Scrollviewer].

109.Select Edit Control Parts (Template) > Edit a Copy.



111.Click on [PART_VerticalScrollbar] in the Objects and Timelines tab to select it.

112.Click the little arrow in the breadcrumb navigation next to [PART_VerticalScrollbar].

113.Select Edit Control Parts (Template) > Edit a Copy.



115.Select the first [Repeatbutton] in the Objects and Timelines tab.

116.Select Edit Control Parts (Template) > Edit Template.


117.Click on Chrome to select it (this is the standard Windows arrow in a typical scrollbar).

118.Press DELETE to delete the element.

119.Switch to APP_LAYOUT.XAML using the navigation buttons at the top of the artboard and

select the left arrow (<) by clicking on it.

120.Press CTRL-C to copy the arrow to the clipboard.

121.Switch back to WINDOW1.XAML using the navigation buttons at the top of the artboard and press CTRL-V to paste the arrow into the control template. The arrow is too big to fit into the spot of the former chrome element.

122.Right-click on the arrow and select Auto Size > Both from the context menu. The arrow resizes.

123.Click on [RepeatButton] in the breadcrumb navigation at the top of the artboard.

124.Move the Repeatbutton over the existing left arrow on the artboard using the mouse or arrow keys.

125.Resize the arrow by pulling on the rectangles accordingly.

126.Size and position the arrow using the existing arrow on the artboard.

127.Locate the second RepeatButton on the lower part of the scrollbar, select it and move it over the right arrow (>) on the artboard.

Note how both RepeatButtons use the same template, so the arrow points in the same direction for both buttons …

128.The arrow points in the wrong direction – to fix this, right click the Repeatbutton and select Flip > Horizontal from the context menu.

129.In the breadcrumb navigation at the top of the artboard, click on [PART_VerticalScrollbar].

130.In the Objects and Timelines Tab, click on PART_TRACK to select it.

131.In the Properties Tab, under APPEARANCE, set the Visibility to Collapsed.

Note how the Scrollbar is now completely gone.

132.Open the ItemTemplate (select breadcrumb [ListBox]

> Edit other templates > Edit generated Items template > Edit template).

133.Select both arrow_left and arrow_right in the Objects and Timelines Tab and press DELETE.

134.Press F5 and scroll through the data.

135.Close the window with ALT-F4.

Note how you have to click exactly on the arrow to scroll. Note also how there is as of yet no interactivity to show when the mouse is over one of the arrows.

Exercise 6 – Adding Interactivity

Steps Screenshots136.Click on the [ListBox]

element in the breadcrumb navigation at the top of the artboard to get back to the topmost layout level.

Before adding interactivity, we need to make our scroll arrows more responsive by adding more “click area”.

137.Click on the little arrow next to [ListBox] in the breadcrumb navigation at the top of the artboard and select Edit Control Parts (Template) > Edit a Copy from the context menu.

138.Repeat this step until you reach the [RepeatButton] template once again.

139.Select the first [Repeatbutton] in the Objects and Timelines tab.

140.Select Edit Control Parts (Template) > Edit Template.

141.Right-Click on arrow_left in the Objects and Timelines panel and select View XAML from the context menu.

142.Switch to XAML view by clicking the tab on the right side of the artboard.

You can press F4 to hide the panels.

143.Right above the <Path ..> and below the <ControlTemplate> statement, enter the code on the right. Do not change the <Path> statement. The path should be surrounded by a transparent Grid when you are finished.

<Grid Background="#00000000" x:Name="grid"><Path … >

</Grid>

144.Switch back to Design view and press F4 to show all the panels. Press F5 to test your application.

Note how you can click in the area around the arrows now. The Grid is part of the button and even though it is invisible, it can still be clicked.

145.Still in the [RepeatButton] control template, click on the Grid in the objects and timelines tab to select it.

146.In the Triggers panel, click the +Property button.

147.In the second drop-down

menu that currently shows Delay, select IsMouseOver.

148.In the first drop-down menu. select Grid.

149.In the Objects and Timelines tab, click on arrow_left to select it.

150.In the Properties panel, change the Opacity (located to the right of the color mixer field and titled A) to 75% instead of 30%. The arrow looks darker as a result.

151.Press F5 to test your application. When you move the mouse pointer over one of the arrows, the arrow should get darker.

152.Press ALT-F4 to close the window.

153.Still in the [RepeatButton] control template, click on the Grid in the objects and timelines tab to select it.

154.In the Triggers panel, click the +Property button.

155.In the second drop-down menu that currently shows Delay, select IsPressed.

156.In the first drop-down menu. select Grid.

157.In the Objects and Timelines tab, click on arrow_left to select it.

158.In the Properties panel, change the color of the arrow to #FFFFC800. The arrow is now yellow as a result.

159.Press F5 to test your application. When you click on one of the arrows, the arrow should flash yellow.

160.Press ALT-F4 to close the window.

You can layer different properties on an element to build more complicated interaction in elements. Also, note how the Grid is the active element but the Arrow is the element that changes when the mouse pointer interacts with the Grid. You can influence any UI element in that way.

Exercise 7 – Adding Events

Steps Screenshots161.In the Projects tab, double-

click on Window_controls.xaml to open it.

The Window_Controls file contains one button element and on Wrap Panel.

162.In the Objects and Timelines panel, click on the Button element to select it.

163.Press CTRL-C to copy the button element.

164.Switch back to the Window1.xaml file using the breadcrumb navigation at the top of the artboard.

165.In the Objects and Timelines panel, select the LayoutRoot element by double-clicking it.

166.Press CTRL-V to paste the button.

167.Move the button with the arrow keys or the mouse to the top of the yellow bar on the right side of the artboard.

168.In the Properties tab, click on the Events button (it is located to the right of the name panel at the top of the panel above the search bar)

A list of available button events replaces the usual Properties elements.

169.Locate the Click event and type WindowClose into the field.

As soon as you press enter, Visual Studio starts up and shows the code behind file of your application. Note how the code for your new event handler has been created already.

170.Between the two brackets { }, enter the red text on the right side.

171.Still in Visual Studio, press F5 to test your application.

172.Click on the X button. The application window closes.

private void windowClose(object sender, RoutedEventArgs e) {

this.close(); }

173.Switch back to Expression Blend and copy and paste the Wrap Panel from Window_Controls.xaml to Window1.xaml in the same way as you did with the button.

174.Position the Wrap Panel in the middle of the yellow

border.175.In the events list in the

Properties panel, find the MouseLeftButtonDown event.

176.In the text field next to the MouseLeftButtonDown event, enter DragMove and press Enter.

Again, Visual Studio opens and shows the created event handler code.

177.Between the two brackets { }, enter the red text on the right side.

178.Still in Visual Studio, press F5 to test your application.

179.Click on the area of the Wap Panel and drag the window.

180.Click on X to close the application window closes.

private void DragMove(object sender, MouseButtonEventArgs e) {

this.DragMove(); }

Congratulations, your first WPF application is now finished!

koestie.files.wordpress.com … · web viewworking with xaml exported from expression design, ......

Documents