Design | Geek | Design, Technology, Microsoft Expression ...
Expression Blend Hands On Lab
Lab 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 |Notes |
|Select Start | All Programs, Microsoft |You can either use Expression Blend 2 or Expression 2.5. March 2008 Preview. |
|Expression | Microsoft Expression Blend. | |
|From the main menu, select File | New |You can put the project folder on your desktop for easier access. Just be sure to remember! |
|Project…. | |
|In the Create New Project dialog, select WPF| |
|Application, change the Name to ArtViewer | |
|and click OK. | |
|In the top right corner of Expression Blend,| |
|locate the Project panel. | |
|In the Project panel, find the Files panel | |
|and right-click the ArtViewer project node. | |
|Select Add Existing Item… from the context | |
|menu. | |
|In the Add Existing Item dialog, navigate to|Navigate to the folder you unpacked the downloaded Assets.rar file to. |
|the ASSETS folder. | |
|Select the following files in the folder and|Note how any files referenced inside XAML code are also imported – the APP-LAYOUT_Files folder |
|press Open to add them to the project: |contains the background image and the drop shadow image that we imported in Expression Design. |
|catalogdata.xml is an XML file that contains| |
|test data. | |
|APP_LAYOUT.xaml is the exported design file | |
|that contains our UI design. | |
|Buttons.xaml which contains XAML code for | |
|the close and drag buttons. | |
|In the Files panel, right-click the | |
|ArtViewer project node. | |
|Select New Folder from the context menu to | |
|create a new folder. | |
|Click once on the New Folder1 folder. After | |
|a short pause, the folder name will become | |
|editable. | |
|Change the name to images and press Enter. | |
|This folder will contain the bitmap images | |
|referenced by the catalogadata.xml file. | |
|The folder should now appear similar to this|[pic] |
|screenshot. | |
|Right-click the images folder and select Add| |
|Existing Item… from the context menu. | |
|In the Add Existing Item dialog, navigate to|Navigate to the folder you unpacked the downloaded Assets.rar file to and open the images folder.|
|the ASSETS\ images folder. | |
|Select all files in the folder and press |[pic] |
|Open to add them to the project. | |
|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. | |
|The project should now look similar to this |[pic] |
|screenshot. | |
|Right-Click on the topmost node in the Files|Note how the project structure in Visual Studio is exactly the same as in Expression Blend. |
|tab named Solution ArtViewer and select Edit|Double-click Window1.xaml to open it and note the split view. |
|in Visual Studio from the context menu. | |
|Close Visual Studio and switch back to |Note the empty window of your application with the standard windows buttons. In Exercise 2, we |
|Expression Blend. Press F5 to test your |will start to modify this look. |
|application. | |
Exercise 2 – Customizing the Application Window
|Steps |Screenshots |
|On the lower left side of Expression Blend, | |
|locate the Objects and Timeline panel. | |
|Click on the Window node to select it. | |
|In the top right section of Expression Blend,| |
|click on the Properties tab to select it. | |
|In the Layout panel, change the Width to 800 | |
|and the Height to 600. | |
|Still in the Layout panel, change the | |
|Background to transparent by clicking the | |
|NoBrush button on the color palette. | |
|In the Appearance panel, tick the | |
|AllowTransparency box. | |
|Click on the Project tab to open it. | |
|Double-click on the APP_LAYOUT.XAML file to | |
|open it. | |
|In the Objects and Timeline panel, | |
|right-click on the Background group and | |
|select Copy from the context menu to copy it.| |
|Switch back to Window1.xaml using the |Note how the complete background, including all the graphic elements appears on your artboard. |
|breadcrumb navigation at the top of the | |
|artboard window. | |
|Click anywhere on the artboard outside the | |
|application window to de-select and press | |
|CTRL-V to paste. | |
|Press F5 to test the application. It should |[pic] |
|look similar to the screenshot. Close the | |
|window with ALT-F4. | |
Exercise 3 – Data Binding
|Steps |Screenshots |
|In the Objects and Timeline panel, click on | |
|the LayouRoot node to select it. This node is| |
|located at Window | LayoutRoot | |
|From the left side tools menu select the | |
|double arrow button (>>) to expand the Asset | |
|Library | |
|In the Asset Library, select the ListBox. If | |
|you can not find the ListBox, select Show All| |
|at the top. | |
|On the artboard, click and drag to define the|[pic] |
|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. | |
|In the Objects and Timeline panel, the new |You might need to move the ListBox to the final position once again on the artboard. |
|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. | |
|Click on the Project tab to switch to the | |
|file view. | |
|Below the Project tab, note the Data tab. | |
|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. |
|In the pop up, enter the name of the XML file|Note how Blend automatically reads the structure from the XML file and displays a hierarchical |
|in the URL box: catalogdata.xml. |view in the Data tab. |
|In the Data panel, expand the Catalog and | |
|Origin nodes with the white arrow until you | |
|reach the Entry element. | |
|Click the Entry element and drag it onto the | |
|artboard and the ListBox. | |
|In the context menu, select Bind ENTRY to | |
|ListBox. In the next pop up, click OK. | |
|In the Create Data Template pop up, click OK.| |
|Press F5 to test your application. Close the |[pic] |
|window with ALT-F4. | |
|With the ListBox still selected, click on the| |
|Properties tab. | |
|In the Brushes panel of the Properties panel,| |
|set the Background property to transparent | |
|with the NoBrush button. | |
|In the Brushes panel of the Properties panel,| |
|set the BorderBrush property to transparent | |
|with the NoBrush button. | |
|In the Properties panel, type scro in the | |
|search box. | |
|Set the HorizontalScrollbar property to | |
|Hidden. | |
|Press F5 to test your application. |Note how there is still a grey background in the ListBox that turns to blue when you click on a |
| |ListBox entry! |
|In the artboard, right-click on the ListBox | |
|and select View XAML from the context menu. | |
|Press F4 to hide all panels. Click on XAML in|Note how the ListBox entry is highlighted in the XAML editor. |
|the view tab list on the right side of the | |
|artboard to switch to XAML view. | |
|Open the styles.txt file (located in | |
|\Assets\) in Notepad by | |
|double-clicking it. | |
|In Notepad, select all and Copy with CTRL-C. | |
|Switch back to Blend and paste the text below| |
|the ListBox entry. | |
|Edit the markup so that it looks | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
|Press F5 to build and run the application. |Note how all the colors are gone and the ListBox is fully transparent. |
|Close the window with ALT-F4. |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. |
|Click on the ListBox on the artboard to |[pic] |
|select it and click on the little arrow at | |
|the top breadcrumb navigation next to | |
|[ListBox]. | |
|Select Edit Other Templates > Edit Generated |Note how the Objects and Timelines Tab changes. |
|Items Template > Edit Template from the | |
|context menu. | |
|Click on StackPanel in the list to select it | |
|and press DELETE. The data in the ListBox | |
|vanishes as the template elements are | |
|deleted. | |
|Switch to APP_LAYOUT.XAML using the | |
|breadcrumb navigation at the top of the | |
|artboard. | |
|Select the Template group in the Objects and | |
|Timeline Tab and press CTRL-C to copy. | |
|Switch back to WINDOW1.XAML and press CTRL-V |Note how the template elements appear in the artboard. Move the elements up and position them |
|to paste. |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. |
|Press F5 to build and run the application. |Note how it looks much better than before - but the application does not display the data |
|Close the window with ALT-F4. |anymore! We need to bind the individual UI elements to the data source fields. |
|Select Title_Left in the Objects and | |
|Timelines Tab. | |
|On the Properties Tab (right), find the | |
|COMMON PROPERTIES group. | |
|Click the small square button next to the | |
|TEXT property to open the Advanced Property | |
|Options. | |
|Select Data Binding from the context menu | |
|In the Create Data Binding dialog, expand the|Note how the changes are visible immediately in the artboard. |
|data source until the YEAR element is | |
|displayed in the list and select it. | |
|Click Finish. | |
|Do the same for all the other text elements | |
|to map them: | |
|o Title_Top maps to TITLE | |
|o Description maps to DESCRIPTION | |
|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. | |
|Press F5 and scroll through the data. |[pic] |
|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 |Screenshots |
|In the Objects and Timeline panel, | |
|double-click on the LayouRoot node to select | |
|it. | |
|From the left side tools menu select the | |
|double arrow button (>>) to expand the Asset | |
|Library | |
|In the Asset Library, select the ComboBox. If| |
|you can not find the ComboBox, select Show | |
|All at the top. | |
|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. | |
|In the Properties tab, find the ItemSource | |
|property (located under Common Properties). | |
|Click on the little square next to the | |
|ItemSource property field to open the | |
|advanced options menu. | |
|Select Data Binding from the menu | |
|In the Create Data Binding dialog, click on | |
|CATALOGDS on the left side. | |
|On the right side, expand the field list |Note how the ComboBox is automatically filled with data. |
|using the little white arrows until you see @| |
|Country: (String). | |
|Select @ Country: (String). | |
|Click Finish. | |
|In the Objects and Timelines tab, | |
|double-click on ListBox to select it. | |
|In the Properties panel, under Common | |
|Properties find the DataContext property. | |
|Click on the little square next to the | |
|DataContext property field to open the | |
|advanced options menu. | |
|Select Data Binding from the menu. | |
|In the Create Data Binding dialog, click the |[pic] |
|ELEMENT PROPERTY tab at the top. | |
|On the left side, expand the Scene elements | |
|using the little arrow until the ComboBox | |
|(System.Windows.boBox) is | |
|displayed in the list. | |
|Select ComboBox in the list. | |
|On the right side, scroll down until you find| |
|the SelectedItem: Object entry in the list. | |
|Select SelectedItem: Object in the list. | |
|Click Finish. | |
|In the Properties panel, click on the little |Note how the data display in the ListBox changes when you change the ComboBox. |
|square next to the ItemsSource property field| |
|to open the advanced options menu. | |
|Select Data Binding from the menu. | |
|In the Create Data Binding dialog, click the | |
|EXPLICIT DATA CONTEXT tab at the top. | |
|Expand the field list using the little arrow | |
|until you see ENTRY (Array). | |
|Select ENTRY (Array) and click Finish. | |
|Press F5 to test your application. Change the| |
|selection in the ComboBox. | |
Exercise 5 – Control Templates
|Steps |Screenshots |
|Click on the [ListBox] element in the | |
|breadcrumb navigation at the top of the | |
|artboard to get back to the topmost layout | |
|level. | |
|Click on the little arrow next to [ListBox]|Note how the Objects and Timelines Tab changes. |
|in the breadcrumb navigation at the top of | |
|the artboard and select Edit Control Parts | |
|(Template) > Edit a Copy from the context | |
|menu. | |
|In the dialog box, click OK. | |
|Click on [Scrollviewer] in the Objects and |Note how the Objects and Timelines Tab changes. |
|Timelines tab to select it. | |
|Click the little arrow in the breadcrumb | |
|navigation next to [Scrollviewer]. | |
|Select Edit Control Parts (Template) > Edit| |
|a Copy. | |
|In the dialog box, click OK. | |
|Click on [PART_VerticalScrollbar] in the |Note how the Objects and Timelines Tab changes. |
|Objects and Timelines tab to select it. | |
|Click the little arrow in the breadcrumb | |
|navigation next to | |
|[PART_VerticalScrollbar]. | |
|Select Edit Control Parts (Template) > Edit| |
|a Copy. | |
|In the dialog box, click OK. | |
|Select the first [Repeatbutton] in the |Note how the Objects and Timelines Tab changes. |
|Objects and Timelines tab. | |
|Select Edit Control Parts (Template) > Edit| |
|Template. | |
|Click on Chrome to select it (this is the | |
|standard Windows arrow in a typical | |
|scrollbar). | |
|Press DELETE to delete the element. | |
|Switch to APP_LAYOUT.XAML using the | |
|navigation buttons at the top of the | |
|artboard and select the left arrow ( Both from the context menu. The | |
|arrow resizes. | |
|Click on [RepeatButton] in the breadcrumb | |
|navigation at the top of the artboard. | |
|Move the Repeatbutton over the existing | |
|left arrow on the artboard using the mouse | |
|or arrow keys. | |
|Resize the arrow by pulling on the | |
|rectangles accordingly. | |
|Size and position the arrow using the | |
|existing arrow on the artboard. | |
|Locate the second RepeatButton on the lower|Note how both RepeatButtons use the same template, so the arrow points in the same direction for |
|part of the scrollbar, select it and move |both buttons … |
|it over the right arrow (>) on the | |
|artboard. | |
|The arrow points in the wrong direction – | |
|to fix this, right click the Repeatbutton | |
|and select Flip > Horizontal from the | |
|context menu. | |
|In the breadcrumb navigation at the top of | |
|the artboard, click on | |
|[PART_VerticalScrollbar]. | |
|In the Objects and Timelines Tab, click on |Note how the Scrollbar is now completely gone. |
|PART_TRACK to select it. | |
|In the Properties Tab, under APPEARANCE, | |
|set the Visibility to Collapsed. | |
|Open the ItemTemplate (select breadcrumb | |
|[ListBox] > Edit other templates > Edit | |
|generated Items template > Edit template). | |
|Select both arrow_left and arrow_right in | |
|the Objects and Timelines Tab and press | |
|DELETE. | |
|Press F5 and scroll through the data. |Note how you have to click exactly on the arrow to scroll. Note also how there is as of yet no |
|Close the window with ALT-F4. |interactivity to show when the mouse is over one of the arrows. |
Exercise 6 – Adding Interactivity
|Steps |Screenshots |
|Click on the [ListBox] element in the |Before adding interactivity, we need to make our scroll arrows more responsive by adding more |
|breadcrumb navigation at the top of the |“click area”. |
|artboard to get back to the topmost layout | |
|level. | |
|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. | |
|Repeat this step until you reach the | |
|[RepeatButton] template once again. | |
|Select the first [Repeatbutton] in the | |
|Objects and Timelines tab. | |
|Select Edit Control Parts (Template) > Edit| |
|Template. | |
|Right-Click on arrow_left in the Objects |You can press F4 to hide the panels. |
|and Timelines panel and select View XAML | |
|from the context menu. | |
|Switch to XAML view by clicking the tab on | |
|the right side of the artboard. | |
|Right above the and below the | |
| statement, enter the code| |
|on the right. Do not change the | |
|statement. The path should be surrounded by| |
|a transparent Grid when you are finished. | |
|Switch back to Design view and press F4 to |Note how you can click in the area around the arrows now. The Grid is part of the button and even|
|show all the panels. Press F5 to test your |though it is invisible, it can still be clicked. |
|application. | |
|Still in the [RepeatButton] control | |
|template, click on the Grid in the objects | |
|and timelines tab to select it. | |
|In the Triggers panel, click the +Property | |
|button. | |
|In the second drop-down menu that currently| |
|shows Delay, select IsMouseOver. | |
|In the first drop-down menu. select Grid. | |
|In the Objects and Timelines tab, click on | |
|arrow_left to select it. | |
|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. | |
|Press F5 to test your application. When you| |
|move the mouse pointer over one of the | |
|arrows, the arrow should get darker. | |
|Press ALT-F4 to close the window. | |
|Still in the [RepeatButton] control | |
|template, click on the Grid in the objects | |
|and timelines tab to select it. | |
|In the Triggers panel, click the +Property | |
|button. | |
|In the second drop-down menu that currently| |
|shows Delay, select IsPressed. | |
|In the first drop-down menu. select Grid. | |
|In the Objects and Timelines tab, click on |You can layer different properties on an element to build more complicated interaction in |
|arrow_left to select it. |elements. Also, note how the Grid is the active element but the Arrow is the element that changes|
|In the Properties panel, change the color |when the mouse pointer interacts with the Grid. You can influence any UI element in that way. |
|of the arrow to #FFFFC800. The arrow is now| |
|yellow as a result. | |
|Press F5 to test your application. When you| |
|click on one of the arrows, the arrow | |
|should flash yellow. | |
|Press ALT-F4 to close the window. | |
Exercise 7 – Adding Events
|Steps |Screenshots |
|In the Projects tab, double-click on |The Window_Controls file contains one button element and on Wrap Panel. |
|Window_controls.xaml to open it. | |
|In the Objects and Timelines panel, click | |
|on the Button element to select it. | |
|Press CTRL-C to copy the button element. | |
|Switch back to the Window1.xaml file using | |
|the breadcrumb navigation at the top of the| |
|artboard. | |
|In the Objects and Timelines panel, select | |
|the LayoutRoot element by double-clicking | |
|it. | |
|Press CTRL-V to paste the button. | |
|Move the button with the arrow keys or the | |
|mouse to the top of the yellow bar on the | |
|right side of the artboard. | |
|In the Properties tab, click on the Events |A list of available button events replaces the usual Properties elements. |
|button (it is located to the right of the | |
|name panel at the top of the panel above | |
|the search bar) | |
|Locate the Click event and type WindowClose|As soon as you press enter, Visual Studio starts up and shows the code behind file of your |
|into the field. |application. Note how the code for your new event handler has been created already. |
|Between the two brackets { }, enter the red|private void windowClose(object sender, RoutedEventArgs e) |
|text on the right side. |{ |
|Still in Visual Studio, press F5 to test |this.close(); |
|your application. |} |
|Click on the X button. The application | |
|window closes. | |
|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. | |
|Position the Wrap Panel in the middle of | |
|the yellow border. | |
|In the events list in the Properties panel,| |
|find the MouseLeftButtonDown event. | |
|In the text field next to the |Again, Visual Studio opens and shows the created event handler code. |
|MouseLeftButtonDown event, enter DragMove | |
|and press Enter. | |
|Between the two brackets { }, enter the red|private void DragMove(object sender, MouseButtonEventArgs e) |
|text on the right side. |{ |
|Still in Visual Studio, press F5 to test |this.DragMove(); |
|your application. |} |
|Click on the area of the Wap Panel and drag| |
|the window. | |
|Click on X to close the application window | |
|closes. | |
| |
|Congratulations, your first WPF application is now finished! |
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.