Article Series: Designing Beautiful Applications with Expression Part 2

Author : Michael Köster - Designer Marketing Manager, Microsoft
Blog : http://koestie.wordpress.com

This article appeared in the Expression Newsletter; subscribe to get the next issue.

Welcome back! This is the second part of the article series about designing and building beautiful applications using only the Expression tools. In the first part, we have started working on the application design and now it is time to finalize our little project. Just to remind you – here is what our application UI looks like after the designer has finished working creative magic …

Now it’s your turn! You can use the trial versions of Expression Studio to follow along the exercises. In this second part of the tutorial, we will cover the following tasks:

• UI Styling – Data Binding, Data Templates and Control Templates
• Adding Interactivity – Triggers and Events
• Deploying your Application

The finished application, the source code and the artwork files can be downloaded here.

Exercise 1 – Data Binding

1. In the Objects and Timeline panel, click the LayoutRoot node to select it. This node is located at Window | LayoutRoot.
2. From the left side tools menu, select the double arrow button (>>) to expand the Asset Library.
3. In the Asset Library, select the ListBox. If you cannot find the ListBox, select Show All at the top. 
4. 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.

   

5. 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 top of the LayoutRoot node.

   You might need to move the ListBox to the desired position once again on the artboard after changing the hierarchy in the Objects and Timelines panel.

6. Select the Project tab to switch to the file view. 
7. Below the Project tab, note the Data tab. In the Data tab, select +XML. This creates a data source connected to an XML file. You can also connect to other data sources via the +CLR button.
8. 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.
9. In the Data panel, expand the Catalog and Origin nodes with the white arrow until you reach the Entry element. 
10. Click the Entry element, drag it onto the artboard, and drop it on the ListBox. 
11. In the context menu, select Bind ENTRY to ListBox. In the next pop-up, click OK. 
12. In the Create Data Template pop up, click OK. 
13. Press F5 to test your application. Close the window with Alt+F4.

    

14. With the ListBox still selected, select the Properties tab.
15. In the Brushes panel of the Properties panel, set the Background property to transparent with the NoBrush button.
16. In the Brushes panel of the Properties panel, set the BorderBrush property to transparent with the NoBrush button.
17. In the Properties panel, type scro in the search box.
18. Set the HorizontalScrollbar property to Hidden.
19. Press F5 to test your application. Note how there is still a grey background in the ListBox that turns to blue when you select a ListBox entry!
20. In the artboard , right-click the ListBox and select View XAML from the context menu.
21. Press F4 to hide all panels. Select 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.
22. Open the styles.txt file (located in <labroot>\Assets\ ) in Notepad by double-clicking it.
23. In Notepad, select all and copy with Ctrl+C.
24. Switch back to Blend and paste the text below the ListBox entry.
25. Edit the <ListBox> markup so that it looks exactly like the following listing (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>

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

    Note how all the annoying colors are gone and the ListBox is now 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.

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

    

28. Select Edit Other Templates > Edit Generated Items Template > Edit Template from the context menu. Note how the Objects and Timelines Tab changes.
29. Select StackPanel in the list and press Del. The data in the ListBox vanishes as the template elements are deleted.
30. Switch to APP_LAYOUT.XAML using the breadcrumb navigation at the top of the artboard.  
31. Select the Template group in the Objects and Timeline Tab and press Ctrl+C to copy. 
32. 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.
33. 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.
34. Select Title_Left in the Objects and Timelines Tab.
35. On the Properties Tab (right), find the COMMON PROPERTIES group.
36. Click the small square button next to the TEXT property to open the Advanced Property Options.
37. Select Data Binding from the context menu. 
38. In the Create Data Binding dialog box , expand the data source until the YEAR element is displayed in the list and select it.
39. Click Finish. Note how the changes are visible immediately in the artboard.
40. Do the same for all the other text elements to map them:
    • Title_Top maps to TITLE
    • Description maps to DESCRIPTION
41. 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. 
42. Press F5 and scroll through the data.
43. Close the window with Alt-F4.

    

44. 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 2 – Two Way Data Binding

1. In the Objects and Timeline panel, select the LayoutRoot node.
2. From the left-side tools menu, select the double arrow button (>>) to expand the Asset Library.
3. In the Asset Library, select the ComboBox. If you cannot find the ComboBox, select Show All at the top.
4. 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.
5. In the Properties tab, find the ItemSource property (located under Common Properties).
6. Click the little square next to the ItemSource property field to open the advanced options menu.
7. Select Data Binding from the menu.
8. In the Create Data Binding dialog, select CATALOGDS on the left side.
9. On the right side, expand the field list using the little white arrows until you see @Country:(String).
10. Select @Country:(String).
11. Click Finish. Note how the ComboBox is automatically filled with data.
12. In the Objects and Timelines tab, select ListBox.
13. In the Properties panel, under Common Properties, find the DataContext property.
14. Click the little square next to the DataContext property field to open the advanced options menu.
15. Select Data Binding from the menu.
16. In the Create Data Binding dialog, click the ELEMENT PROPERTY tab at the top.
17. On the left side, expand the Scene elements using the little arrow until the ComboBox (System.Windows.Controls.ComboBox) is displayed in the list.
18. Select ComboBox in the list.
19. On the right side, scroll down until you find the SelectedItem: Object entry in the list.
20. Select the SelectedItem: Object in the list.
21. Click Finish.

    

22. In the Properties panel, click the little square next to the ItemsSource property field to open the advanced options menu.
23. Select Data Binding from the menu.
24. In the Create Data Binding dialog, click the EXPLICIT DATA CONTEXT tab at the top.
25. Expand the field list using the little arrow until you see ENTRY (Array).
26. Select ENTRY (Array) and click Finish.
27. 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 3 – Control Templates

1. Select the [ListBox] element in the breadcrumb navigation at the top of the artboard to get back to the topmost layout level.
2. Click 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.
3. In the dialog box, click OK. Note how the Objects and Timelines Tab changes.
4. Select [Scrollviewer] in the Objects and Timelines tab.
5. Click the little arrow in the breadcrumb navigation next to [Scrollviewer].
6. Select Edit Control Parts (Template) > Edit a Copy.
7. In the dialog box, click OK. Note how the Objects and Timelines Tab changes.
8. Select [PART_VerticalScrollbar] in the Objects and Timelines tab.
9. Click the little arrow in the breadcrumb navigation next to [PART_VerticalScrollbar].
10. Select Edit Control Parts (Template) > Edit a Copy.
11. In the dialog box, click OK. Note how the Objects and Timelines Tab changes.
12. Select the first [Repeatbutton] in the Objects and Timelines tab.
13. Select Edit Control Parts (Template) > Edit Template. Note how the Objects and Timelines Tab changes.
14. Select Chrome (this is the standard Windows arrow in a typical scrollbar).
15. Press Del to delete the element.
16. Switch to APP_LAYOUT.XAML using the navigation buttons at the top of the artboard and select the left arrow (<) by clicking on it.
17. Press Ctrl+C to copy the arrow to the clipboard.
18. Switch back to WINDOW1.XAML using the navigation buttons at the top of the artboard, and then 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.
19. Right-click the arrow and select Auto Size > Both from the context menu. The arrow resizes.
20. Select [RepeatButton] in the breadcrumb navigation at the top of the artboard.
21. Move the Repeatbutton over the existing left arrow on the artboard using the mouse or arrow keys.
22. Resize the arrow by pulling on the rectangles accordingly.
23. Size and position the arrow using the existing arrow on the artboard.
24. 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.
25. The arrow points in the wrong direction. To fix this, right-click the Repeatbutton and select Flip > Horizontal from the context menu.
26. In the breadcrumb navigation at the top of the artboard, select [PART_VerticalScrollbar].
27. In the Objects and Timelines Tab, select PART_TRACK.
28. In the Properties Tab, under APPEARANCE, set the Visibility to Collapsed. Note how the Scrollbar is now completely gone.
29. Open the ItemTemplate (select breadcrumb [ListBox] > Edit other templates > Edit generated Items template > Edit template ).
30. Select both arrow_left and arrow_right in the Objects and Timelines Tab and press Del.
31. Press F5 and scroll through the data.
32. 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 4 – Adding Interactivity

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

2. Click 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.
3. Repeat this step until you reach the [RepeatButton] template once again.
4. Select the first [Repeatbutton] in the Objects and Timelines tab.
5. Select Edit Control Parts (Template) > Edit Template.
6. Right-click arrow_left in the Objects and Timelines panel and select View XAML from the context menu.
7. Switch to XAML view by clicking the tab on the right side of the artboard. You can press F4 to hide the panels.
8. 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>

9. 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.
10. Still in the [RepeatButton] control template, clickon the Grid in the objects and timelines tab to select it.
11. In the Triggers panel, click the +Property button.
12. In the second drop-down menu that currently shows Delay, select IsMouseOver.
13. In the first drop-down menu. select Grid.
14. In the Objects and Timelines tab, select arrow_left.
15. 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.
16. Press F5 to test your application. When you move the mouse pointer over one of the arrows, the arrow should get darker.
17. Press ALT-F4 to close the window.
18. Still in the [RepeatButton] control template, select the Grid in the objects and timelines tab.
19. In the Triggers panel, click the +Property button.
20. In the second drop-down menu that currently shows Delay, select IsPressed.
21. In the first drop-down menu, select Grid.
22. In the Objects and Timelines tab, select arrow_left.
23. In the Properties panel, change the color of the arrow to #FFFC80. The arrow is now yellow as a result.
24. Press F5 to test your application. When you click one of the arrows, the arrow should flash yellow.
25. 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 5 – Adding Events

1. In the Projects tab, double-click Window_controls.xaml to open it. The Window_Controls file contains one button element and one Wrap Panel.
2. In the Objects and Timelines panel, select the Button element.
3. Press Ctrl+C to copy the button element. 
4. Switch back to the Window1.xaml file using the breadcrumb navigation at the top of the artboard.
5. In the Objects and Timelines panel, select the LayoutRoot element.
6. Press Ctrl+V to paste the button.
7. Move the button with the arrow keys or the mouse to the top of the yellow bar on the right side of the artboard.
8. In the Properties tab, click 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.
9. 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.
10. Between the two brackets { }, enter the bold text as shown below:

    private void windowClose(object sender, RoutedEventArgs e)
            {
    this.close();
            }

11. Still in Visual Studio, press F5 to test your application.
12. Click the X button. The application window closes.
13. 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.
14. Position the Wrap Panel in the middle of the yellow border.
15. In the events list in the Properties panel, find the MouseLeftButtonDown event.
16. 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.
17. Between the two brackets { }, enter the bold text as shown below:

    private void DragMove(object sender, MouseButtonEventArgs e)
            {
    this.DragMove();
            }

18. Still in Visual Studio, press F5 to test your application.
19. Click the area of the Wap Panel and drag the window.
20. Click X to close the application window.

Congratulations, your first WPF application is now finished!

That was fun, wasn’t it? And so easy! This little application project has introduced some major concepts that are present in all WPF and Silverlight applications. You can now deploy your application from within Visual Studio and it will create a nice little installer so that you can hand over the application to anybody.

You can reach me for questions or suggestions on my blog or at mkoster@microsoft.com. Thank you very much for your interest and all the best for your projects!

Cheers
Michael