Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Expression_Blend_Manual_2

VIEWS: 8 PAGES: 120

									Designing Windows Applications with Expression Blend –
Manual 2

A Button’s Life: Page 1

Color Swatch: Page 37

Branded Web Search Sample: Page 54

RecipeBox: Page 82
Expression Design + Expression Blend: A Button's Life

 You will experience the creation of the most simple of the UI controls: the button. You will get to experience the button being designed in
 Expression Design and then will make that design an actual interactive rich button in Expression Blend.




                                                                                                                                               1
In this HOL you will experience a Button’s life. One of the most basic of the WPF controls, the button, is enough to showcase some of the key concepts behind the
break through concepts of customizing controls. There are different ways to customize a control, in this case we will start in Expression Design, creating visual
assets for our Button and then we will jump into Expression Blend to give those graphics life by converting them into an actual fully working .NET button. Windows
desktop applications don’t have to be gray or rectangular, now, with .NET 3.0 thanks to WPF, designers and developers can have fun creating their own look and
feel.



This HOL only covers a few of the many scenarios that are possible with these tools. If you wish to experiment more with Expression Media and Expression Web we
invite you to visit www.microsoft.com/expression to download a Trial version of any of the Expression products.



The concepts you will go through this Expression Design + Expression Blend HOL are:


    1. Expression Design
          a. Exploring Expression Design
          b. Drawing vector shapes using B-Splines
          c. Adding color to shapes
          d. XAML Export
    2. Expression Blend
          a. Importing your graphic assets into Expression Blend
          b. Creating a standard looking Button
          c. Editing the Button template
          d. Customizing the appearance of your Button
          e. Defining a rollover state using Property Triggers
          f. Inserting you Expression Design icons into your brand new button




                                                                                                                                                                    2
TO DO                                                                                   TO KNOW

A. Getting Started
1.   Start Microsoft Expression Design from the Start menu or use the shortcut on the   In the first part of this lab you will focus on two things: the drawing and editing features
     Desktop                                                                            of Expression Design that pertain to vector-based graphics; and how to export these
2.   Maximize the application if needed.                                                graphics to other formats such as bitmap-based formats (JPG, GIF, etc.) and XAML.
3.   Go to File | Open.
4.   Go to C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR01 –                  XAML is a new language that was created to allow designers and developers to
     DesignToBlend\                                                                     collaborate together on rich user interface experiences based on the Windows
5.   Select Icons.design, and then click Open.                                          Presentation Foundation (WPF).

                                                                                        Expression Blend is a perfect tool for designing interfaces that leverage XAML and WPF.
                                                                                        Expression Design fully integrates with Expression Blend, making it the perfect tool to
                                                                                        create all of the graphics needed for a stunning and functional user interface.

                                                                                        Let’s begin by opening a collection of vector-based icons that have been created for this
                                                                                        lab.
6.   Click the spaceship icon in the upper left corner.                                 Notice that, unlike bitmap-based images, you can zoom in closely on vector-based
7.   Go to View | Zoom on Selection.                                                    images and they do not lose their quality.




                                                                                                                                                                                       3
8.    Press CTRL+ several times to zoom in on the icon.                       You can also see (and individually select) all of the paths that form the graphic.




9.    Go to View | Actual Size.                                               Feel free to select and zoom in closely on the other icons. When you are finished, the lab
10.   Click the mouse icon.                                                   will proceed with the mouse icon.
11.   Go to View | Zoom on Selection.
12.   Click on the white surface outside of the box that borders the image.   You will now see how to create one of these icons.

                                                                              The nice-looking mouse you see here was created by tracing a digitized photograph.

                                                                              When you select the icon all of the paths that comprise it are made visible.




                                                                                                                                                                       4
13. Click the icon.
B. Tracing a Photograph to Create a Vector-Based Graphic
1.   In the Layers pane, scroll down and find the Icon_Mouse layer, which will be   Let’s take a look at the photo that inspired this icon. First turn off the current layer and
     highlighted with a yellow bounding box.                                        then turn on the layer containing the photo.
2.   On the left click the small eye icon to turn off the layer.
                                                                                    Using a digital camera as a basis for creating vector-based images is a terrific way to
                                                                                    supplement your artistic abilities. Very few people can draw something even as simple as
                                                                                    this mouse icon without some help. Expression Design was built with you, the budding
                                                                                    digital artist, in mind.

                                                                                    The photograph of this mouse is from the Microsoft.com Web site.




                                                                                                                                                                                   5
3.   Click the small eye icon on the Mouse_TracePhoto layer.




4.   Click the Mouse_TracePhoto layer to select it. You will see the yellow bounding box   To create a vector-based image from a photo, begin by tracing the object’s shape. Before
     appear around to this layer.                                                          doing so, make sure that the layer on which the photo resides is “locked” so that you
                                                                                           don’t inadvertently move it while tracing.
5.   In the lower right corner, click the New Layer button.                                Add a new layer that will contain your vectors. Expression Design automatically adds the
                                                                                           layer above the currently selected layer (in this case, the Mouse_TracePhoto layer).




6.   Double-click “Layer 9” and then type a more meaningful name such as
     “Mouse_TracePaths”. (Make sure this layer is on above Mouse_TracePaths




                                                                                                                                                                                 6
7.   In the upper left, click the pen icon.                                           In the Toolbox you can see a collection of different tools that allow you to create and edit
8.   Click B-Spline.                                                                  vector paths. The top four are the traditional Bezier curve tools with which every designer
                                                                                      is familiar. The Pen tool lets you build Bezier paths by placing a series of nodes. Each
                                                                                      node or point has a control handle (or "tangent handle"), and by varying the length and
                                                                                      direction of the handle you can affect the shape of the curve. The Add Anchor Point and
                                                                                      Delete Anchor Point tools allow you to add a point to, or delete a node from, an existing
                                                                                      Bezier curve. Finally, with the Convert Anchor Point you can convert an existing point to
                                                                                      one of six types of nodes: Symmetrical, Smooth, Unconstrained, Angle Lock, Corner and
                                                                                      Cusp. Point conversion is beyond the scope of this lab, so if you want to know more
                                                                                      about this or the point manipulation tools, please consult the F1 Help.

                                                                                      Also available are a Polyline tool and a B-Spline tool. The latter is more common in 3-D
                                                                                      graphics applications such as 3D Studio MAX or LightWave. However, Expression Design
                                                                                      has incorporated the B-Spline into a 2-D environment, giving you a terrific tool for
                                                                                      creating vectors.

                                                                                      There may not be sufficient time in this lab to fully create the mouse icon. It’s a time
                                                                                      consuming—though fun!—job to trace everything that comprises the final mouse icon
                                                                                      you have seen. You will at least see how to start the process.
9. In a white portion of the layer click around to practice with the B-Spline tool.   Notice that if you press the ALT key the curve is not interpolated but instead follows the
10. Press ALT to see how the B-Spline cursor and behavior changes. Notice in this     segments exactly. This allows you to make sharp corners.
    screenshot the last segment does not have a curve inside.
                                                                                      When you use the B-Spline tool you are really just defining straight line segments, which
                                                                                      are represented by dashed lines. The first two mouse clicks define the first segment. Each
                                                                                      subsequent mouse click creates a new segment, as well as an interpolated, curved path.

                                                                                      You can also practice closing a path by making your last point coincide with the first
                                                                                      point. When you get near the first point the cursor will change and the path will snap to a
                                                                                      closed shape.




                                                                                                                                                                                   7
11. Press the A key to switch to Direct Selection mode, which allows you to change any
    of the path vertices. Click and drag any of the vertices.
12. Press the V key to revert to normal Selection mode. Click and drag the path to see
    how this mode operates.
13. When done, double-click and then press DELETE one or more times to remove the
    path.
14. In the upper right, click the box with the red slash through it (tooltip: None).        Before tracing let’s make sure the fill color is set to “none”. If set, fill colors get applied to
                                                                                            areas bounded by a path even when the path is not closed.




15. In the Toolbox click the B-Spline icon.                                                 With a little practice you can quickly create object traces.
16. Starting in the lower right corner of the mouse photo, click to place points close to
    the straighter areas of the mouse’s border, and slightly further from the curvy areas   Be careful only to single click the mouse. If you double-click the path will end (complete
    (the distance allows the B-Spline curves to work their magic).                          itself).
17. When you have completely encompassed the mouse, close off the path by clicking
                                                                                                                                                                                             8
    as close as possible to the first point you laid.




18. In the Toolbox click the top arrow icon (Selection tool).                               You are done working with the B-Spline tool, so revert to the Selection tool.

                                                                                            After deselecting the path you can easily reselect it by simply creating a selection region
                                                                                            that touches the path. When the path is selected you can then adjust its width and then
                                                                                            choose a stroke color.




19. Click on the white space outside of the bordered mouse area in order to deselect the
    path you just created.
20. Select the path by clicking outside of the mouse and dragging across a portion of it,
    then releasing the mouse button.




                                                                                                                                                                                      9
21. If the path does not appear thick enough, in the upper right, double-click the Width
    value and change it to a higher number, such as .5 (px), then press ENTER.
22. Ensure that the Stroke icon is selected, and then click on the red square to its right.




23. Click on the white space outside of the bordered mouse area in order to deselect the      When you again deselect the path you can probably now see it more easily.
    path.




                                                                                                                                                                          10
24. Time permitting you may trace the other main lines of the mouse. Again, press ALT   The next steps, however, unveils a completed layer of paths that comprise the mouse
    for sharp corners like you see here.                                                icon. So there is no need to continue tracing if time and interest do not permit.




25. Click the eye icons for both the Mouse_TracePhoto and Mouse_TracePaths layers to    This layer shows all the paths that comprise the mouse icon. Currently it looks like a wire-
    turn them off.                                                                      frame graphic because no fill colors have yet been applied to the shapes.
26. Click the eye icons for the Mouse_Paths layer to show the completed paths.
27. Go to Select | All (or press CTRL+A) to select all the paths in the layer.

                                                                                                                                                                                 11
28. Click anywhere outside of the mouse and then click the outer border near the tail.             To apply a gradient fill to the main shape, click on the outer border and then choose a
29. In the upper right, click the larger left-most rectangle (tooltip: Fill), and then click the   gradient fill color, adjusting the first color stop to a medium dark gray instead of black.
    gradient square to its right.




30. In the gradient control, click the left color stop and then click on the left of the
    custom palette, about midway vertically.




                                                                                                                                                                                             12
31. In the Toolbox click the shaded arrow and then select Gradient Transform.   Let’s say you want the light source to appear to emanate from the right. You can change
                                                                                the gradient direction using the Gradient Transform tool.

                                                                                You can then click and drag in the direction you want the gradient to flow, light to dark.
                                                                                When you release the mouse button the gradient will change.


32. Click on the middle of the left side and drag across to the right side.

                                                                                                                                                                        13
33. In the Toolbox click the top arrow icon (Selection tool).                    Change to the Selection tool, deselect the current path, and then multi-select the three
34. Click anywhere outside of the mouse.                                         inner regions to apply a fill color that has some translucence (opacity of only 60% instead
35. Click the lower right portion of the larger region’s path.                   of 100%).

                                                                                 Feel free to continue to select other regions and fill with colors and opacities of your
                                                                                 choice.




36. Press and hold SHIFT, then click the smaller, gray path in the upper left.


                                                                                                                                                                            14
37. In the upper right click the white square to apply a white fill color.
38. Double-click the Opacity value, type “60”, and then press ENTER.




39. Click the eye icon for the Mouse_Paths layer to turn it off.                            To prepare for the next part of this lab, turn off the Mouse_Paths layer you have been
40. Click the eye icon for the Icon_Mouse layer to turn it on.                              working in. You should now have only six layers visible: one for each of the pre-made
                                                                                            icons.
C. Exporting Vector-Based Images into XAML Format
1.   Go to View | Fit to Screen.                                                            You will now learn how to export vector-based images as other image formats.
2.   Click and drag your mouse to select all the icons.
3.   At the bottom click the arrow in the Align button, and then select BottomEdges.        But first, organize the icons that appear to be randomly placed on the layer.




4.   Click the arrow in the Distribute button, and then select To Horizontal Center. They   Notice that the white space between the icons is not evenly distributed. You can correct
     should now look like this:                                                             that with the Distribute option.




                                                                                                                                                                                     15
5.    Go to File | Export |                                                                 During the export process the Xaml Export tool appears. This allows you to preview the
6.    Select the XAML file type                                                             images and XAML source code before the new export file, Icons.xaml, is actually created.
7.    Click Desktop, and then click Save.
8.    In the Xaml Export dialog, click and drag the icons to re-center them.                The icons appear exactly as they will after export, in a XAML-based environment. You can
9.    Move the mouse wheel forward and backward to zoom in and out.                         move them around, and zoom in or out with the mouse wheel, or by right-clicking and
10.   In the upper right click the XAML Code tab.                                           selecting the menu option.

                                                                                            The XAML code is visible by clicking the XAML Code tab. This is the XML-based
                                                                                            representation of the icons.
11. Click the Graphics tab.                                                                 These controls allow you manipulate the export process.
12. Click the circle next to each of the two main menu items on the right, exposing their
    sub-menus.                                                                              The “Canvas” option exports all of the icons as single file. You will still be able to treat the
                                                                                            icons as separate entities, but they will all reside in one file.




13. Under Document Format click Canvas.
14. Click Resource Dictionary.                                                              “Resource Dictionary” exports them as a library of objects. You can see how this XAML
15. Scroll through the thumbnails across the bottom, clicking them to view the full         tool now displays each icon is a set of scrolling thumbnails, much like Windows Explorer
    image.                                                                                  when in Filmstrip mode.

                                                                                            This is a great export method because it allows you to share the library with other

                                                                                                                                                                                         16
                                                                                       designers or developers, who can then easily reuse these assets in a WPF project.




16. Click Canvas.                                                                      For this lab you’ll use the Canvas method.
17. In the lower right click Export.
                                                                                       Clicking Export creates the Icons.xaml file on the Desktop. It’s now time to use Expression
                                                                                       Blend.
D. Creating a Custom .NET 3.0 Button Using Expression Blend
1.   Start Expression Blend from the Start menu or use the shortcut on the Desktop     You will now import the XAML file you just generated, and then create some custom,
     called WPF Expression Blend                                                       fully functional, .NET 3.0-based buttons from scratch. In this way you will see how
2.   Go to File | New Project.                                                         Expression Design and Expression Blend collaborate together to create great-looking
3.   In the Create New Project dialog, for Name type “MyCustomButton”.                 user interfaces.
4.   For Location browse to the Desktop, then click OK.
                                                                                       Creating a project gives you an empty workspace on which you can start laying out
                                                                                       different elements.
5.   In the upper right, right-click the root project element (“MyCustomButton”) and   The first task is to import the XAML-based icons you just created.
     select Add Existing Item.
                                                                                       In Expression Blend this project area in the upper right is called the “Project palette”. It
                                                                                       will look familiar to developers because under the hood it is actually the Solution
                                                                                       Explorer pane in Visual Studio.




                                                                                                                                                                                      17
6.   In the Add Existing Item dialog, click Desktop, then select Icons.xaml.
7.   Click Open.
8.   In the Project palette double-click Icons.xaml.                                       You can double-click the imported file to view it just as you did Expression Design.
9.   Feel free to click and drag the icons, zoom in or zoom out, etc.                      Selecting an icon you can see that it is an independent object within the single XAML file.

                                                                                           Closing the Results palette gives you more workspace. The TAB key controls the visibility
                                                                                           of all palettes.




10. Toggle F8 to show/hide the Results palette. When done, leave the palette hidden.
11. Toggle TAB to show/hide all palettes. When done, keep the remaining palettes
    visible.
12. Above the main palette click the Window1.xaml tab.                                     Switch to the other XAML file in the project to create a new button. The Toolbox contains
13. In the Toolbox, click and hold the Button icon to expose the other UI elements, then   numerous .NET 3.0 user interface controls.
    click Button.
                                                                                           NOTE: There are other even easier and faster methods to create a Button in Expression
                                                                                                                                                                                   18
                                                                                       Blend but for the purpose of this HOL we will take you through one of the methods
                                                                                       which will allow you to interact with a wider range of concepts within the tool.




14. Press and hold the SHIFT key, then on the white design surface click and drag to   Pressing and holding the SHIFT key keeps the length and width proportional as you size
    create a square button that is 125 units long (as determined by the dynamic        it. Without the SHIFT key you would likely end up with a rectangle.
    numbers along each side).




15. In the Toolbox click the Zoom icon.                                                So far this is just a “generic, gray Windows button,” devoid of any artistic appeal. You will
16. On the design palette click the button three times to zoom in.                     now see how WPF and Expression Blend enable you to create a really cool looking
17. Notice the Window palette on the left.                                             button.

                                                                                       The XAML document hierarchy is visible in the Window palette. This shows that the
                                                                                       button resides on a LayoutRoot control, which in turn is contained in a Window.




                                                                                                                                                                                 19
18. Right-click the button and go to Edit Control Parts (Template) | Edit a Copy.         Editing the template means that any button instances created from this template will
                                                                                          share the same characteristics. This is very useful for creating multiple buttons that look
                                                                                          alike except for perhaps the image and/or text on them. You edit a copy of the template
                                                                                          because the original template is part of the WPF.




19. In the Create Style Resource dialog, for Resource name type “GelButton01”, and then   This dialog allows you to set a resource name for one the button and define where you
    click OK.                                                                             want it saved. In this case the location will be the default “This document.”

                                                                                          Click OK drops you into the template hierarchy for the button itself, which you can
                                                                                          determine by looking at the Template palette (which replaced the Window palette). Each
                                                                                          of these hierarchical items—Template, Chrome and [ContentPresenter]—comprise the
                                                                                          button. No longer are buttons isolated entities, as they were in the past. It’s now a
                                                                                          collection of WPF controls. This means that you now have much more control over the
                                                                                          button’s behavior and appearance.

                                                                                          The Template control comes directly from the WPF. It’s your button’s “base class,” as it
                                                                                          were, providing the button’s core functionality. (This is why you only edited a copy of the
                                                                                          template.) Think of the template as the “bodiless soul” or “essence” of the button.

                                                                                          The Chrome control is the button’s “body”. It is what provides the button’s generic
                                                                                          appearance.

                                                                                          The ContentPresenter control allows us to host content inside as a layer on top of the
                                                                                          chrome. In this case it is only hosting the text “Button”. It can also host full-motion video,
                                                                                          graphics…even other buttons! This allows you to create complex nested controls for rich
                                                                                          user interface experiences.
20. Click [ContentPresenter] and press CTRL+X to cut and save the control to memory.      The Chrome control is actually not required; and because it is a bit ugly, delete it after
                                                                                                                                                                                     20
21. Click Chrome and press DELETE.                                                        first cutting its child ContentPresenter control.

                                                                                          All that is left is the Template control, visible by the yellow border.
22. In the Toolbox double-click the Grid icon.                                            Now you will proceed to do what UI designers have for years dreamed about—create a
                                                                                          rounded button.

                                                                                          In the absence of chrome you need to give the button a “body”. You need a different
                                                                                          type of content container, in this case a Grid. A Grid control allows you to draw shapes on
                                                                                          it and contain a ContentPresenter control.



23. The main palette should now appear as a green box inside the yellow box:




24. In the Template palette double-click Grid to open it inside the Template control in   The Ellipse tool is what enables you to create a button in the shape of a circle.
    the main design palette.
25. In the Toolbox, click and hold the Rectangle icon to expose the other shapes, then    When done, you can paste the ContentPresenter that was cut from the Chrome control
    select Ellipse.                                                                       into the Grid control.




                                                                                                                                                                                 21
26. Press and hold SHIFT, then, on the main design palette, click and drag on the Grid to
    create a circle that fills the Grid.
27. In the Template palette click Grid and press CTRL+V to paste the ContentPresenter
    control into the Grid control.
28. If at this time you do not see positioning guides emanating from the “Button” text,       Grid layout mode provides extra visual cues to help you in your design work.
    go to Tools | Options, Artboard, check “Use grid layout mode”, and then click OK.




29. In the upper right click the Properties tab.                                              The numbers in the positioning guides indicate the distance of each side of the
30. Below, in the Layout palette, click into each Margin field and change the value to “0”.   ContentPresenter control from the Grid control. You may be able to see that currently the
                                                                                              ContentPresenter control is not big enough to contain the graphics you created.

                                                                                              Setting the margins to zero makes the ContentPresenter control the same size as its
                                                                                              parent Grid control.



                                                                                                                                                                                    22
31. In the Layout palette, for HorizontalAlignment click the Center (second) icon to its      However, the “Button” text now appears in the upper left. You can correct this changing
    right.                                                                                    the horizontal and vertical alignment properties.
32. For VerticalAlignment click the Center (second) icon to its right.
                                                                                              Notice also that the position guide numbers are now gone, indicating that the sides of
                                                                                              the PresenterControl are coincident with the boundary of the Grid control.




33. In the Template palette click Ellipse.                                                    It’s now time to give the ellipse a nice gradient color.
34. In the Brushes palette click the Gradient Brush icon.




35. Click the right color stop and then above it select a dark blue color from the palette.
36. Select the left color stop and then select a lighter blue color from the palette.
37. Slide the right color stop to the left about one-third to increase the dark fill.




                                                                                                                                                                                       23
38. In the Toolbox click the Brush Transform icon.                            It looks cooler to have the gradient come from an angle. The Brush Transform tool
                                                                             allows you to easily modify the gradient by clicking and dragging the arrow’s head or tail.

                                                                             You can even make the arrow larger or smaller.

                                                                             Try this and see how it affects your gradient’s look, then try to end up with something
                                                                             like you see in this screenshot (the arrow position might be quite different—just try and
                                                                             make the button’s appearance similar).
Click and drag the arrow’s head and tail to below and center of the frame.




                                                                                                                                                                     24
39. In the Brushes palette, click Stroke and then select a bright yellow from the color        Stroke is the ellipse’s border. The button will look better if you change this, too.
    palette.
40. In the Appearance palette set StrokeThickness to 5.
41. In the Toolbox click the Ellipse icon.                                                     Another cool thing you can add is a highlight effect in the form of a white oval with a low
42. In the upper right click and drag to draw an elongated oval.                               opacity.
43. In the Brushes palette select the No Brush icon (rectangle with horizontal line).
44. Click Fill, click the Solid Color Brush icon (to the right of No Brush), and then select
    white from the color palette.
45. Next to the color palette, for the “A” field type 40 and press ENTER.
46. Hover over the corner of the white oval and then click and drag down a little to
    orient it at an angle.
47. Finally, click the oval’s edge until the “move cursor” appears, then drag it up and to
    the right to move it next close to the yellow border.




                                                                                                                                                                                       25
48. Go to Object | Path | Convert to Path.                                   This looks pretty good, but you can improve the highlight by converting the shape to a
49. In the Toolbox click the Direct Selection icon (or press the A key).     vector-based path and then tweaking the vertices to get the shape to look more realistic.
                                                                             This will give a better ”gel” appearance.




50. Click and drag the vertices to make the highlight look more like this:




                                                                                                                                                                   26
51. In the Objects and Timeline palette click the Scope Up icon.   You are done with modifying the button’s template (copy), so you “scope up” to the
                                                                   Window again. Notice that the Template palette is replaced by the Window palette.




52. Press F5.                                                      Pressing F5 launches a .NET 3.0 test application to preview how your button will look and
                                                                   behave.

                                                                   The button does not yet have any behaviors associated with it, so previewing at this
                                                                   point does not show you much.




                                                                                                                                                          27
53. Close the Window application.
54. Click the Icons.xaml tab.                                                               You can easily copy one of the icons in the project’s other XAML file with a simple copy
55. Press the V key to ensure you in Selection mode.                                        and paste action.
56. Click one of the icons and press CTRL+C.
57. Click the Window1.xaml tab.                                                             With the icon in the button document you can place it onto the button and then resize it
58. Press CTRL+V. Don’t worry about the size of the icon relative to button. You will fix   to fit properly.
    this shortly.
59. Click and drag the icon over the button until the dashed box appears.




                                                                                                                                                                                   28
60. While still holding the mouse button down, press ALT, release the mouse button,   When the icon snaps into place, it may appear to clip part of the graphic. But when you
    and then release the ALT key. The icon should appear to “snap into” the button.   resize it the entire icon will be there.




                                                                                                                                                                            29
61. Click one of the corners of the blue border around the icon and drag inward to
    resize the icon so that it fits properly inside the button.




                                                                                     30
62.   Press F5.                                                                         You can see that the custom button is looking much better. It does not, however, act like
63.   Hover your mouse over the button.                                                 a button yet. So it’s time to add some nice behavioral effects.
64.   Close the Window application.
65.   Right-click the button and go to Edit Control Parts (Template) | Edit Template.   In this case you don’t edit a copy of the template because the template in the project
                                                                                        now is already a copy.
66. In the upper left, in the Triggers palette, click + Property Trigger.               To add a behavior you combine a Property Trigger with a “logic statement”.




67. Click and drag the bottom palette border to expose all of its menu options.




                                                                                                                                                                                 31
68. In the “Activated when” group, in the right dropdown menu, select IsMouseOver.              This statement could be expressed in English as something like “Whenever the property
                                                                                                of this button called ‘MouseOver’ is True, make the main ellipse glow a little, and the
                                                                                                button border to thicken.”




69.   Click into the menu just below and to the left, type “True”, and then press ENTER.
70.   In the Template palette click Ellipse.                                                    To create the highlight effect simply lighten the left-most gradient color.
71.   In the Brushes palette click the left color stop.
72.   Above it, click and drag the circle in the color palette, moving it in the general area
      of the upper left corner.

                                                                                                                                                                                     32
73. In the Appearance palette change the StrokeThickness value to 8. The button should
    now look something like this:




74. Press F5 to preview the button.                                                       This is just a very simple example of rollover behavior. Expression Blend has many other
75. Hover your mouse over it to test the rollover effect. It should look something like   effects from which to choose.
    this screenshot, which shows both button states:




                                                                                                                                                                                 33
76. Close the Window application.
77. Click the Scope Up icon.                                                              The last task is to create a button for each of the icons you exported.




78. If needed press CTRL and the – (minus) key to zoom out from the workspace so that
    six copies of the button can fit in the white area.
79. Press CTRL+C and CTRL+V.
80. Click and drag the button (which is actually a new copy of the button) and place it
    next to the original. Make four more copies and arrange them in the workspace, like
    so:




                                                                                                                                                                    34
81. Click the Icons.xaml tab.                                                           Make sure before releasing the mouse button and ALT key that the text above the
82. Click a different icon and press CTRL+C.                                            segmented box contains the word “[Button]”, not “[Canvas]”.
83. Click the Window1.xaml tab.
84. Press CTRL+V.
85. If you do not see the newly pasted icon, you may have to scroll the worskspace
    horizontally or vertically.
86. Click and drag the newly pasted icon over one of the buttons until the dashed box
    appears and the box’s message reads “ALT-drag to place into [Button]”.




87. While still holding the mouse button down, press ALT, release the mouse button,
                                                                                                                                                                          35
      and then release the ALT key. The icon should appear to “snap into” the button.




88. Click one of the corners of the blue border around the icon and drag inward to
    resize the icon so that it fits properly inside the button.
89. Repeat these steps to use all of the remaining icons, resulting in something like this:




90.   Press F5 to preview the buttons.                                                        You can again preview the buttons and see that they all share the same templated look
91.   Hover your mouse over each button to see the rollover effect.                           and behavior.
92.   Close the Window application.
93.   Close Expression Design and Expression Blend. If prompted to save changes click No.     This completes the lab!


                                                                                                                                                                                  36
Expression Blend: Color Swatch
 Have fun customizing a ListBox control to look like a color pantone!

 In this sample you will experience the end-to-end customization and design of a color pantone. You will start using the default ListBox control
 available in WPF and will go through the process of creating a custom template to make that control come to life in color, linking it dynamically
 to external XML data.




                                                                                                                                                 37
Expression Blend exposes most of the user interface controls available in WPF. In this HOL you will experience the ListBox, a control that now thanks to WPF can get
to be as exciting as never before. With Expression Blend you can fully customize your ListBox to look and act the way you want to. It’s a pretty powerful
environment as you will see when you draw a standard looking ListBox and end up with a gorgeous Color Pantone set of cards.



This HOL only covers a few of the many scenarios that are possible with these tools. If you wish to experiment more with Expression Blend we invite you to visit
www.microsoft.com/expression to download a Trial version of any of the Expression products.



The concepts you will go through in this Expression Blend HOL are:



Expression Blend
    1.   Get your Project started
    2.   Create a Custom User Control
    3.   Drawing vector shapes with Expression Blend
    4.   Adding a Data bound ListBox
    5.   Customizing your ListBox
    6.   Animate your color swatches
    7.   Adding a highlight to your swatches




                                                                                                                                                                   38
TO DO
TASK 1: Create the Project
Launch Blend from the Start menu or use the shortcut on the Desktop called WPF Expression Blend

    1)   Launch Help | Welcome Screen




    2)   Open the Color Swatch sample
    3)   Press F5 to test the project
             a. Look at the ColorSwatch in this sample. This is the control we’ll replicate in this tutorial
    4)   Close the sample application




                                                                                                               39
5)   In Blend Launch File | New Project and create and Standard Application project and call it ColorSwatchControl
6)   In the Object and Timeline panel select the Window element




7)   Add a radial background to the main Window
         a. In the Properties panel look under the Brushes properties and select Background
         b. Select the Gradient tab and click on the Radial gradient button




         c.   Select each gradient stop and set a nice color for the background
         d.   From the toolbar in the left select the Brush transform tool and use it to create a faux light effect




                                                                                                                      40
TASK 2: Create a User Control
   1)   Launch File | New | User Control and name it ColorSwatchControl.xaml




   2)   Resize the User Control element to the size of the color swatch
            a. In Properties panel under Layout properties set Width to 100 and Height to 350
   3)   Add a rectangle using the rectangle tool




   4)   Right click on the rectangle and select Autosize | Fill
   5)   Using the Brushes properties in the Properties panel add a Radial gradient to the rectangle’s fill
   6)   Set the rectangle’s stroke to ‘No Brush’ by clicking on the first tab of the Brushes properties

                                                                                                             41
7)   Apply rounded corners to the rectangle by using the Corner Radius adorners
         a. In Properties panel under Appearance properties the values for RadiusX and RadiusY should be around 22




8)   Add an ellipse using the ellipse tool to the bottom right of the User Control
         a. Tip: press the CTRL key while creating the Ellipse to get a proportional sized object




9) In the Objects and Timelines panel select the Ellipse and then select the Rectangle
10) Launch the Object | Combine | Subtract command to combine the paths
11) Using Properties panel name the path PaletteChrome




                                                                                                                     42
Add a databound ListBox to the User Control
   1)   Using the Data panel in the Project panel click on the +XML button to add a new Xml data source




   2)   Select Colors.xml from C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR06 - ColorSwatch\
   3)   In the Data Panel expand the Data source tree hierarchy to select the color (Array) element
   4)   Drag the color (Array) to the scene and select the option to create a new ListBox




   5)   Choose the default binding to ItemsSource




                                                                                                          43
6)   In the Databinding dialog:
          a. Change the container for children to be a Grid
          b. Uncheck the value: (String) item




7)  Right click on the ListBox and select Autosize | Fill
8)  In the Properties panel Add Top and Bottom margins to the ListBox
         a. In the Layout properties click and drag the margin value (example use Top=30 and Bottom=50).
9) Clear the brush values for Background and BorderBrush
         a. In the Brushes properties click on the desired property (either Background or BorderBrush)
         b. Click on the first tab to set the property to have No Brush.
10) Right click on the ListBox in the timeline and select Edit other templates | Edit generated Items (ItemTemplate) | Edit Template
11) Using the Objects and Timeline panel select the Grid object




12) Resize the grid on the main canvas (by drag and drop of the resize handles)
        a. Resize horizontally until the grid is as wide as the User Control
        b. Resize vertically until you get around 40 pixel of height




                                                                                                                                       44
13) Using the Objects and Timeline Panel select the TextBlock element
14) Make the TextBlock Horizontal alignment centered.
        a. In the Layout properties of the Properties panel Identify the HorizontalAlignment property
        b. Click on the button to center align




15) Double click on the Grid in the Objects and Timeline panel to make it the active insertion point.
16) Using the Rectangle tool draw a rectangle inside the grid under the TextBlock
17) Using the rectangle adorners. Make the rectangle have rounded edges.




18) In the Properties Panel select click on the Fill property’s marker and select Data binding…




                                                                                                        45
19) Click on the Explicit Data Context tab
20) In the Fields list expand the swatches data source and select value : (String)
21) Click Finish




                                                                                     46
22)   Launch File | Save under the Main menu
23)   Launch Project | Build Project under the Main menu
24)   Go back To Window1.xaml by clicking on the document tab
25)   Click on the Selection tool in the main toolbar
26)   Create an instance of your User Control in the scene
           a. Click on the Asset Library button in the toolbar
           b. Click on the Custom Controls tab
           c. Select the ColorSwatchControl control
           d. Draw it on the scene




                                                                 47
TASK 3: Animate the Color Swatches
    27) Click on the Selection tool from the main toolbar
    28) Change the pivot point of the control
             a. Click on the center adorner of the User Control
             b. Drag it so that it aligns with Ellipse in the User Control




    29) Copy and Paste three more copies of the User Control
           a. With the control selected hit CTRL+C once and CTRL+V three times

                                                                                 48
30) Click on the new timeline button in the Objects and Timeline panel




31) Click OK to the Create Storyboard Resource dialog




32) Select three of the controls and create a keyframe at time zero
        a. Multi-select the elements by holding the SHIFT key
        b. You can create a keyframe by clicking on the new keyframe button net to the timeline drop down




33) Type 0:00.2 in the time box next to the new keyframe button
34) Create another keyframe
35) From the Transform properties in the Properties panel set a rotation angle of 30 degrees




36)   Select just two of the animated controls.
37)   Type 0:00.4 in the time box next to the new keyframe button
38)   Create another keyframe
39)   From the Transform properties in the Properties panel set a rotation angle of 65 degrees




                                                                                                            49
40)   Select just one of the animated controls.
41)   Type 0:00.6 in the time box next to the new keyframe button
42)   Create another keyframe
43)   From the Transform properties in the Properties panel set a rotation angle of 90 degrees




44) In the Objects and Timelines panel select the User Control that was not animated
45) Right click and launch Order | Bring To Front




                                                                                                 50
46) Click the play button the timeline to test your animation within Blend
47) Test your application by pressing F5




TASK 4: Add a highlight path to the User Control
1)   In Objects and Timeline panel select Default from the timeline drop down to exit animation mode




2)   Select the [ColorSwatch] in the Objects and Timeline panel
3)   Right click and launch Edit Control
                                                                                                       51
4)    Click on the Scope up button the Object and Timeline panel to exit Template editing mode




5)    Double click on the LayoutRoot element in the Objects and Timeline panel to make it the active insertion point
6)    Select the Pen tool in the main toolbar
7)    Draw a path the rectangle
          a. Click on the position indicated as the first point in the picture below
          b. For point #3 click in the position indicated in the picture below then drag to get a curve
          c. After creating point #5 click again on top of point #1 to close the path




8)    Select the path called PaletteChrome and press CTRL+C to make a copy of it. Then press CTRL+V to paste it
9)    Holding the CTRL key select the highlight path (created in step 7 of this task) and launch Object | Combine | Intersect
10)   In the Brushes properties in Properties panel select the first gradient stop and set the Alpha value to be zero
11)   Select the second gradient point and drag left about a quarter of the way
12)   Set the Alpha value of the second gradient stop to be 75%



                                                                                                                                52
13) Launch File | Save
14) Launch Project | Build Project
15) Press F5 to test the application




                                       53
Expression Blend: Branded Web Search Sample
 Discover the power that custom user controls which provide to your rich experiences.
 In this HOL you will create a pagination control as well as an animated loader using custom user controls. Custom user controls can include
 simple or sophisticated code behind created in Visual Studio and when integrated into the design environment of Expression Blend they can
 unleash infinite functional scenarios that thanks to the design features available in tool can also be styled and presented in different shapes,
 colors and visual metaphors.




                                                                                                                                                    54
WPF and Expression Blend offer a wide range of user interface controls or layout panel controls for you to use and customize. Even with this amount of controls
available to you, some scenarios will require the creation of Custom User Controls which can inherit some of the functionality of a default control and add some of
their own or that could also be built from scratch. A Developer would usually created these Custom User Controls in Visual Studio using C# or VB code and then
would hand those controls out to the Designer who thanks to the Expression Blend Asset Library or other palettes can get full control of these “controls”, customize
them, insert them into the artboard, define their layout and more. In this HOL you will experience one of those scenarios where Custom User Controls make the
difference between pretty UI and pretty + powerful UI.


This HOL only covers a few of the many scenarios that are possible with these tools. If you wish to experiment more with Expression Blend we invite you to visit
www.microsoft.com/expression to download a Trial version of any of the Expression products.



The concepts you will go through in this Expression Blend HOL are:



Expression Blend
    1.   Exploring the prototype web search application
    2.   Creating the pagination control
    3.   Creating and using an animated loader control
    4.   Integrating the pagination control into your application




                                                                                                                                                                   55
Task 1: Exploring the prototype web search application
                                                                                                       Projects: A project is a collection of files that get compiled into an
Launch Expression Blend from the Start menu or use the shortcut on the Desktop called WPF              executable (or a control library) when the project is built. In the case of
Expression Blend                                                                                       this sample, we have two projects: LiveSearch.csproj, and
                                                                                                       LiveSearchModel.csproj. We have split the application we are creating
    1.   File menu | Open Project…                                                                     into two projects to clearly separate the UI from the business logic. All of
                                                                                                       the UI resides in LiveSearch.csproj, and all of the business logic resides in
                                                                                                       LiveSearchModel.csproj. Such separation allows you to change the UI at a
                                                                                                       later point of time (for example, change to a web-interface), but reuse the
                                                                                                       business logic.

                                                                                                       Solutions: A solution is a collection of projects that can reference each
                                                                                                       other, such that necessary projects are automatically there are any
                                                                                                       changes. Any real world project will usually consist of more than one
                                                                                                       projects grouped into a solution
    2.   Navigate to C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR07 -
         LiveSearch\Task1\LiveSearch and double-click on LiveSearch.sln. This will open the solution
         inside Expression Blend.




    3.   Hit F5 (Project menu | Test Project) to run the application. This will launch the desktop
         executable for the application.




                                                                                                                                                                                   56
4.   In the search box, type Mix Microsoft and hit Enter
5.   You will be presented with two sets of search results: Web search results on the left, and Image
     search results on the right.
6.   Click on a number at the bottom of the application window to navigate to a different page of
     search results. This is the first control we will be creating inside Expression Blend.




                                                                                                        57
7.   Note that as you move from page to page, an asynchronous search happens where a request is
     sent to a web service. To give feedback to the user about the delay, we have included an
     animated loader control. This is the second control we will be creating inside Expression Blend.




8.   Close the running application.
9.   In Expression Blend, right click on (Solution “LiveSearch” (2 projects)) in the Project panel and   Expression Blend and Visual Studio share the same project and solution

                                                                                                                                                                              58
    hit Edit Externally.                                                                            formats, and hence a project created in Blend can be opened in Visual
                                                                                                    Studio and vice-versa.

                                                                                                    Expression Blend also tries to bridge the gap between designer and
                                                                                                    developer tools but adopting shortcuts that users of both sets of tools
                                                                                                    are comfortable with, thereby reducing the learning curve. For example,
                                                                                                    you can hide and show all the palettes in Blend by hitting the “Tab” key,
                                                                                                    which is a gesture that is commonly used in designer tools. You can test
                                                                                                    your application by hitting the “F5” key which is the shortcut used in
                                                                                                    Visual Studio to test applications.




10. Microsoft Visual Studio is launched. Choose the second radio button (“Load project normally”)
    and uncheck the “Always ask me for…” option at the bottom of the dialog. The solution is now
    available for browsing and editing inside Visual Studio.




11. Hit F5 (Debug menu | Start Debugging) to run the application inside Visual Studio.
12. Close the application launched from Visual Studio, and close Visual Studio.
                                                                                                                                                                            59
    13. Close Expression Blend.


Task 2: Creating the pagination control
    1.   Launch Expression Blend.
    2.   File menu | Open project…
    3.   Navigate to C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR07 -
         LiveSearch\Task2\LiveSearch and double click on LiveSearch.sln. This will open the solution
         inside Expression Blend for browsing and working with it.
    4.   Hit F5 to run the application. This will launch the desktop executable for the application.
    5.   In the search box, type Mix Microsoft and hit enter.
    6.   You will be presented with two sets of search results: Web search results on the left, and Image
         search results on the right. However, this time there is no pagination control that will let you
         browse the result sets. Let us try to create and add such a control.
    7.   Close the running application.
    8.   File menu | New Item…




    9.   Select UserControl and rename it to PagingControlTest.xaml. Hit OK
                                                                                                            UserControls: UserControls let you combine visuals with code-behind
                                                                                                            that can easily access and manipulate those visuals. You can embed a
                                                                                                            UserControl into another UserControl, or into your application Window.
                                                                                                            You can also share the same UserControl across applications by creating
                                                                                                            a library of such controls that can be then referenced.



                                                                                                            Templates v/s UserControls: A Template is used to specify or customize
                                                                                                            the look of a control. Use a Template when you quickly want to change
                                                                                                            the visual aspects of a control. Use a UserControl if you want to add new
                                                                                                            functionality of extend the functionality of a control, and at the same time
                                                                                                            define the visuals for that control.

    10. Choose the Selection tool. Click on the top of the grid panel in the blue highlighted area to       Grid: A Grid panel is the most flexible layout control available in
        add a column guide. Repeat 2 more times to create a total of 4 columns.                             Expression Blend. A Grid panel offers a table-like layout metaphor with
                                                                                                            multiple rows and columns, and allows you to specify constraints on how

                                                                                                                                                                                     60
                                                                                 available size is distributed between the columns. On a child element of
                                                                                 the Grid panel, you can specify the anchoring to a particular row or
                                                                                 column, and other constraints like margins and sizes.

                                                                                 When you create a new UserControl in Blend, we automatically add a Grid
                                                                                 panel as the child of the UserControl so you could add multiple elements
                                                                                 as the children of that Grid control and customize their layout behavior.
                                                                                 You can replace the Grid panel with another panel of your choice (Canvas,
                                                                                 Wrap, Stack, etc.) – right click on a panel and use the Change Layout
                                                                                 Type menu to change to a different panel.




11. Press the control key and select the 4 columns by clicking as shown below.




                                                                                                                                                        61
12. Switch to the Properties tab. For the Width property, select Pixel in the drop down list. For the
    Width property, enter 29. This will create 4 columns that are 29 pixels wide.




13. Select UserControl in the Object view.                                                              The Property panel in Expression Blend exposes all the properties that
                                                                                                        you can set on an element. Windows Presentation Foundation exposes a
                                                                                                        number of properties, which while a powerful feature, can be a bit
                                                                                                        cumbersome to find. Blend alleviates this problem by allowing a user to
                                                                                                        search for a property in the Property panel, and dynamically filters that
                                                                                                        list of properties that mach the search criteria.




14. In the Property panel’s Layout properties, set the Height of the UserControl to 20.




                                                                                                                                                                               62
15. In the Property panel’s Layout properties, set the Width of the UserControl to Auto by clicking
    the button shown in the figure.




16. Zoom into element we just changed the bounds on by using the Zoom tool.              . Switch
    back to Selection tool after you are done.




17. Select the Button tool. Right click on the tool (as shown below) to get the options on various
    elements you can create using this tool.



                                                                                                      63
18. Draw a Button into each of the 4 columns.




19. Multi-select all 4 buttons in the Object view of the Timeline pane using the Shift key.
20. In the Timeline Object view, Right click | Auto Size | Fill. This will result in each button taking
    up all available space in the column and row the Button is contained within.




21. Deselect all the buttons. Edit menu | Select None.                                                    Resource management in Expression Blend: Resource management
22. Let us customize the look of one of these buttons. In a paging control, the button in the first       lets you create and reuse resources across your application, and between
    column is supposed to be the “Initial Page” button.                                                   applications. Practically anything can be a resource in your application –
23. Right click on this Button | Edit Control Parts (Template) | Create Empty.                            brushes, colors, margins for layout, styles and templates, etc. The
                                                                                                          Resource pane in Expression Blend supports a variety of operations –
                                                                                                          move resources across files or change the scope of their usage, rename

                                                                                                                                                                                  64
                                                                                   and delete resource, edit them, and apply them by simply dragging them
                                                                                   onto an element.

                                                                                   Resource Dictionaries are XAML files that solely contain resources, and
                                                                                   references to other Resource Dictionaries. They allow for sharing of
                                                                                   resources across projects and applications, as well as an easy way to add
                                                                                   “theme” support to your applications.

                                                                                   Border Control: A layout control that lets you add a single child element.
                                                                                   A Border control also lets you specify a CornerRadius in such a way that
                                                                                   each corner of the control can have a different Radius.




24. Hit OK in the Create Resource dialog presented.




25. Select Grid from the Layout tool, and double click on tool to insert a Grid.




                                                                                                                                                          65
26. Double click on the Grid in the Object view to make it the insertion point (active element). You
    will see the element being highlighted by a yellow adorner on the design surface as well as in
    the Object view in the Timeline.
27. Right click on the Layout tool to get a popup. In the popup, select Border to activate the
    Border tool. Double click on the Border tool to create a Border element inside the Grid.




28. In the Property panel’s Brush properties, select the Background property, select Solid Color
    brush, and give a background color – for example, “Red”.




                                                                                                       66
29. In the Property panel, find the Appearance properties, and for the CornerRadius property,
    enter a value of 3,0,0,3. This will result in the top-left and bottom-left corners of the Border
    control being rounded.
30. Select the Grid element in the Object view.
31. Select the Pen tool and draw a path that resembles backwards navigation by clicking on the


    artboard inside bounds of the control.          Switch back to the Selection tool after being
    done with the Path editing operation.




                                                                                                       67
32. Exit the template editing mode by hitting the Scope up button in the Object view to return to
    editing the paging control. This finishes styling one of the buttons (albeit poorly, but good
    enough for the purpose of this HOL).




33. For the remaining buttons, let us apply some Styles that we have pre-created. Switch to the
    Resource pane and expand PageControlStyles.xaml. PageControlStyles.xaml is a XAML file
    that contains a number of pre-created styles.




                                                                                                    68
34. Drag and drop PagePreviousButtonStyle from the Resource pane into the button in the
    second column. For the popup that is presented, select Style.




35. Drag and drop PageNextButtonStyle from the Resource pane into the button in the third
    column. For the popup that is presented, select Style.
36. Drag and drop PageLastButtonStyle from the Resource pane into the button in the fourth
    column. For the popup that is presented, select Style.
37. Let us now attach some behaviors to bring the paging control to life. Right click on (Solution    Commands: Commanding is an input mechanism in Windows
    “LiveSearch” (2 projects)) in the Project panel and choose Edit externally. This will open the    Presentation Foundation (WPF) which provides input handling at a more
    solution in Visual Studio for editing. As before, choose the second radio button (“Load project   semantic level than device input. Examples of commands are the Copy,
    normally”) and uncheck the “Always ask me for…” option at the bottom of the dialog. The           Cut, Paste operations found on many applications.
    solution is now available for browsing and editing inside Visual Studio.
38. Switch back to Expression Blend. Double click on PagingControlTestCode.cs. This will result in
    the code file being opened inside Visual Studio for editing.




                                                                                                                                                                         69
39. The custom control we are creating exposes a number of properties that you would normally
    expect in such a control, and they are defined in the code file we are viewing:
         a. TotalResults: The total results that are to be displayed and paged.
         b. ResultsPerPage: The number of results to display in a page.
         c. CurrentPage: The index of the page currently being displayed, etc.
    The code file also exposes few commands that we will use shortly. A Command is also a
    property exposed by a control, that you can then data bind to your UI. The benefit of using
    commands is that you can clearly separate UI from logic giving maximum flexibility to a design
    tool and a designer creating the UI. In our case, we have exposed a number of commands, for
    example.
         a. FirstPageCommand: The command to move to the first page in the result set. When
             this command is fired by the UI, among other things, the CurrentPage property of this
             custom control is set to a value of 1 if the TotalResults property has a positive value.
         b. PreviousPageCommand: The command to move to the previous page in the result
             set. When this command is fired by the UI, among other things, the CurrentPage
             property is decremented by 1, or set to a minimum value of 1.
40. Switch back to Expression Blend. We will now data bind one of the buttons to its corresponding      Data binding in Expression Blend: Expression Blend has rich support for
    Command such that whenever the button is clicked, the Command is invoked.                           binding to a variety of data sources: XML files, any arbitrary data object,
                              rd
41. Select the button in the 3 column. This is the button that corresponds to the gesture of            or any element in the scene. The Data pane in Blend provides you with
    moving to the next page when browsing a result set.                                                 support to drag-n-drop data binding data sources to an element in the
42. In the Property panel, search for the property Command.                                             scene, or to create new elements that will display the data.
43. Click on the small button at the extreme right of the property, and choose Data Binding…


                                                                                                                                                                                70
                                                                                                            XML Data Source: A local or remote XML file that can supply
                                                                                                             your application with data in XML format. You can use an XML
                                                                                                             file that you have added to your project, or you can set the data
                                                                                                             source to the URL of an XML file on a Web site.
                                                                                                            Common Language Runtime (CLR) Object Data Source: An
                                                                                                             object that contains public properties and collections to which
                                                                                                             you can bind your target properties.
                                                                                                            Element binding: Binding to any arbitrary property of any
                                                                                                             element in the scene. The simplest example would be a slider
                                                                                                             bar control that is bound to the width of a rectangle. Moving the
                                                                                                             slider bar would scale the rectangle larger and smaller.




44. In the data binding dialog, choose the second tab Element Property since we are trying to
    bind to a property exposed by this control.
45. In the tree on the left, choose UserControl. In the tree on the right which lists all the matching
    properties on the custom control we are creating, choose the NextPageCommand property
    and click Finish.




                                                                                                                                                                            71
    46. We are done with attaching the “page next” behavior. We will skip attaching the remaining
        behaviors for this lab, as well as creating the list of pages, but we have created a custom control
        that can be used across applications. Close PagingControlTest.xaml by clicking on the close
        button corresponding to the document. Click Yes to save your changes.

Test the application by pressing F5 (Project | Test Project). The application works, but still does not
support the paging behavior since we have not integrated the control we just created. Close the running
application.




Task 3: Integrating the pagination control into your application
    1.   Open SearchResultsControl.xaml from the Project pane.
    2.   Open the Library tool and switch to the Custom Controls tab.

                                                                                                              72
3.   Select PagingControlTest in the list.




4.   Double click on the control (as shown in the figure below) to insert PagingControlTest.




5.   If the Property panel has the search field filled with a value, clear the value.




6.   In the Property panel under Layout, change the HorizontalAlignment and VerticalAlignment

                                                                                                73
     properties to Center. This ensures that the control remains center aligned no matter how tall
     and wide the parent control is.




7.   For the Row property in Layout, change the value to 1. This ensures that the
     PagingControlTest is located in the bottom row of a Grid with two rows.
8.   Test your application by pressing F5 (Project | Test Project). Perform a search (say Mix
     Microsoft). You will notice that the Paging control is now visible, but non-functional since we
     have not yet tied it to the data model that is driving the application. Close the running
     application.
9.   We will now edit the XAML to connect the paging control to live data. Right click on the
     PagingControlTest in Object view | View XAML.




                                                                                                       74
   10. Delete the selected line. Uncomment the line below the selected line, i.e.

<!--<LiveSearch:PagingControlTest HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Row="1" TotalResults="{Binding
Path=TotalResults}" CurrentPage="{Binding Path=CurrentPage, Mode=TwoWay}"
ResultsPerPage="{Binding Path=ResultsPerPage}" PageCount="{Binding
Path=PageCount}" />-->

Becomes

<LiveSearch:PagingControlTest HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Row="1" TotalResults="{Binding
Path=TotalResults}" CurrentPage="{Binding Path=CurrentPage, Mode=TwoWay}"
ResultsPerPage="{Binding Path=ResultsPerPage}" PageCount="{Binding
Path=PageCount}" />

   11. Switch back to the design view as shown below.




                                                                                    75
Test your application by hitting F5. Perform a search (say Mix Microsoft), and click on the “next page”
button. Voila! The control you just created is now talking to, and browsing a live data set. The other
buttons don’t work since we never connected them to their behaviors in a previous step.
Task 4: Creating and using an animated loader control
    1.   As the last part of this lab, we will create and use an animated loader control. We will then use
         this control in SearchResultsControl.xaml so that whenever an asynchronous query is issued
         to the search web service, user gets feedback for the delay.
    2.   In the Project panel, double click on Searching.xaml. This is a UserControl that has some pre-
         created graphics and text.
    3.   Select the path element in the timeline.




                                                                                                             76
4.   Click the “+” button in the Object view of the Timeline panel to create a new animation. Click
     OK on the dialog presented to you (which you can use to name your animations meaningfully).
     We will create an animation that infinitely animates the path in 360 degree rotations.




5.   Move the play-head in the timeline to 0.5 seconds.




6.   Expand the Transform category in the Property panel and switch to the Rotation tab.
7.   Enter 360 for the Angle property.




                                                                                                      77
8.   To loop the animation infinitely, expand to the Angle property in the Object view of the
     Timeline panel.
9.   Right click on the property in the timeline tree and choose Edit Repeat Count.




10. Click the Set to forever button to loop the animation infinitely and click OK.




11. Test the animation by clicking the Play button in the timeline. Note that the path rotates by 360
    degrees once and then stops.




                                                                                                        78
12. Switch out of the animation mode by selecting Default in the Timeline pane.




13. We will now use this control. Open SearchResultsControl.xaml in the Project panel by double-
    clicking.
14. Select the Grid tool in the tool box.




15. Double click on the Grid tool to insert a Grid control.
16. Right click on the Grid control that we just inserted in the timeline | Auto Size | Fill
17. Rename the Grid control we just inserted to SearchingControlHost




                                                                                                   79
   18. Switch to the listing of all events available for this control in the Property panel.               Event handling inside Blend: Windows Presentation Foundation (WPF)
   19. For the DataContextChangedEvent, double click inside the text box next to it. This will switch      controls expose a very rich set of events that users of the controls can
       your focus into Visual Studio. You will notice that an event handler is automatically created for   respond to in their applications. While WPF and Blend provides you with
       you.                                                                                                the ability of adding no-code interactivity (for example, starting an
                                                                                                           animation when a button is clicked), you can also use event handling in
                                                                                                           the traditional way of calling a method upon the occurrence of the event.

                                                                                                           In Blend, when you add an event handler, if Microsoft Visual Studio is
                                                                                                           installed on your machine, the appropriate project / solution is opened
                                                                                                           inside VS and the event handler added to the right code-behind file. This
                                                                                                           provides for a great experience leveraging the strengths of both tools –
                                                                                                           the rich design surface available inside Blend, and the powerful code and
                                                                                                           debugging features of VS. If you don’t have VS, you can use the
                                                                                                           alternative clipboard experience that will copy the event handler code
                                                                                                           onto your clipboard which can then be pasted into the right code-behind
                                                                                                           file, saving you the trouble of remembering and generating the code by
   20. Copy the code indicated in the file and paste over the event handler that Blend generated
                                                                                                           hand.
       for you, i.e.
   Replace
        private void SearchingControlHost_DataContextChanged(object sender,
DependencyPropertyChangedEventArgs e)
        {

       }
   With
        private void SearchingControlHost_DataContextChanged(object sender,
DependencyPropertyChangedEventArgs e)
        {
               if (searchResultView != null)
               {
                       searchResultView.PropertyChanged -=
searchResultView_PropertyChanged;
               }

               searchResultView = e.NewValue as SearchResultView;
               if (searchResultView != null)
               {
                       searchResultView.PropertyChanged += new
System.ComponentModel.PropertyChangedEventHandler(searchResultView_PropertyChanged);
               }
        }

       private void searchResultView_PropertyChanged(object sender,
                                                                                                                                                                                 80
System.ComponentModel.PropertyChangedEventArgs e)
        {
               if (e.PropertyName == "IsSearching")
               {
                       if (searchResultView.IsSearching)
                       {
                              SearchingControlHost.Children.Add(new Searching());
                       }
                       else
                       {
                              SearchingControlHost.Children.Clear();
                       }
               }
        }


Test your application by pressing F5 (Debug -> Start Debugging) inside Visual Studio. You will now see
the use of the control you just created as you browse from one page to the next in your search results.

Congratulations! You are now done with this Hand-On-Lab. Close the running application, Visual Studio,
and Expression Blend. We hope this session helped you understand some of the unique and powerful
features of Expression Blend, and its promise in aiding designers to work closely with developers on the
same project to help deliver tomorrow’s rich Windows client experiences.




                                                                                                           81
Expression Blend: RecipeBox
Build custom designed interactive elements for a WPF based application targeted at home users.

In this sample application you will experience the possibilities available in Expression Blend to quickly customize controls and incorporate basic C#
code to create a Windows application with a user interface that engages with home users who wish to keep their recipes in order.




                                                                                                                                                        82
With Expression Blend and WPF, designers can collaborate with developers to create compelling experiences for the Windows desktop. In this design driven
prototype, you the designer will customize the look and feel of some of the controls in this home user facing application called Recipe Box.




This HOL only covers a few of the many scenarios that are possible with these tools. If you wish to experiment more with Expression Media and Expression Web we
invite you to visit www.microsoft.com/expression to download a Trial version of any of the Expression products.



The concepts you will go through in this Expression Blend HOL are:


Expression Blend

    1.   Understanding the RecipeBox project
    2.   Creating the Recipe viewer using Layout panels, Databinding and UI controls
    3.   Creating an Animated Transition in Response to User Input using Timelines and Triggers
    4.   Customizing a ListBox control
    5.   Enabling a Search functionality using Databinding and a Value Converter (provided by a Developer)




                                                                                                                                                             83
Getting Started: Understanding the RecipeBox Project                                             Notes
                                                                                                 RecipeBox is an application written in C# which loads a set of recipes from an XML file
     Run Expression Blend from the Start menu or use the shortcut on the Desktop called          and displays them using the Windows Presentation Foundation. WPF controls can be
     WPF Expression Blend                                                                        given customized appearances using a feature known as Control Styling. Those styled
                                                                                                 controls still retain the default windows behavior, which allows you to (e.g.) select
1.   Open the RecipeBox.sln project from C:\MIX HOLs\Expression Labs\Expression Blend            items in this list by using the arrow keys.
        HOLs\LEXPR05 - RecipeBox\Getting Started\RecipeBox\RecipeBox.sln
                                                                                                 RecipeBox attaches the loaded data to the WPF controls using a technique known as
2.   Launch Project |Test Solution to run the current version of the Recipe Box                  Data Binding. In this lab we will explore both Control Styling and Data Binding which
                                                                                                 will allow you to extend this application to view recipes and search for recipes.

                                                                                                 In addition, you will create animated transitions and cause them to occur in response
                                                                                                 to user events. Finally, we’ll take a look at some of the vector drawing tools in
                                                                                                 Expression Blend.

                                                                                                 In Task 1, you will design a stylized display for each recipe, similar to the one which
                                                                                                 shows currently as you select Edit from the running application.

                                                                                                 In Task 2, you’ll cause that display UI to appear and disappear as the user interacts
                                                                                                 with the application.

                                                                                                 In Task 3, you’ll reskin the WPF ScrollBar so that it looks more like our themed app.

                                                                                                 In Task 4, you will add search functionality to the app.

                                                                                                 We’ll walk through each of these tasks in great detail to give you a sample of how you
                                                                                                 would accomplish this in your own projects. The steps shown here will give you a
3.   Try out the application in its current form. Notice that it lists a number of recipes and   complete and thorough view of how Expression Blend can help you build a stylized
     allows you to select them.                                                                  interactive application.
          a. Try selecting different recipes from the list using the mouse and/or keyboard
          b. Click Edit in the running application to see an editable list of the ingredients.   If you wish to skip ahead to a particular task, you can open the project contained
          c. In the next few tasks, you will be adding similar functionality to the View         within the folder for that task. To skip to Task 3, for example, open C:\MIX
              button, which currently does nothing.                                              HOLs\Expression Labs\Expression Blend HOLs\LEXPR05 - RecipeBox \Task
          d. Try to change a recipe using Edit, and notice that if you close and reopen the      3\RecipeBox\RecipeBox.sln.
              application, your changes are still there.



                                                                                                                                                                                           84
4.   Close the running RecipeBox application                                                   Let’s begin by trying out the application and exploring it in Expression Blend.
5.   Ensure the file MainWindow.xaml is open in Expression Blend.

6.   In the Project panel, look for the Data panel which shows you the structure of the data
     sources in this application.                                                              The Data panel in Expression Blend allows you to add, remove, and browse the
                                                                                               structure of data sources. You can also create or attach data to UI by dragging and
7.   Expand the DataModel node to see the functionality provided by the C# application         dropping data fields onto the design surface.
     model.
         a. SearchFilter (String) will be used later to add search functionality to the user   This project already contains a data source which provides the functionality of loading
             interface.                                                                        and saving recipes, and filtering based on a search string. You can explore the
         b. SelectedRecipe (Recipe) will be used in the next section to display, add or        structure of that data source, or if you are familiar with Visual Studio and C# you can
             edit a particular recipe                                                          open this project and explore the code directly if you’re curious as to how they are
                                                                                               implemented. This data source is just a C# class which exposes the set of properties
                                                                                               shown here in the Data panel.

                                                                                               In order to create UI in Expression Blend based on this data source, there’s no need to
                                                                                               do anything more than dragging and dropping on to the design surface.

                                                                                               By simplifying the process of creating UI from a data source, Expression Blend
                                                                                               facilitates a workflow involving designers and developers.




                                                                                               In Expression Blend, the Objects view provides an easy way to access the elements
                                                                                               contained in the design surface. Within the Windows Presentation Foundation (WPF),
8.   From the Objects view within the Interaction panel, expand MainUIGrid and select          some elements may not have a visual representation. An example of this is a layout
     RecipeListBox.                                                                            container whose primary purpose is to arrange other elements properly.

                                                                                               Because of this, you may find it more convenient to select certain elements using the
                                                                                               Objects view rather than the Selection tool.

                                                                                               Elements composite in the order in which they are listed in the Objects view. If you
                                                                                               want to move one element behind another, use the Send Backward or Send to Back
                                                                                               command. You will also see this element move up and down in the Objects view.

                                                                                               The Objects view also allows you to rename, hide, lock and reorder elements via drag-

                                                                                                                                                                                      85
                                                                                            drop. When you are animating elements in Expression Blend, you will use the
                                                                                            attached Timeline.




                                                                                            The Properties panel in Expression Blend provides a powerful, centralized location
                                                                                            where you can change the appearance and behavior of elements within the design
                                                                                            surface. Many aspects of element appearance and behavior are indicated by
                                                                                            attributes which are adjustable here.

                                                                                            In addition to specifying simple values, you can also assign and create resources here,
                                                                                            which are reusable values that can apply to many elements.

                                                                                            You can use system resources which allow you to pick up colors and sizes from the
                                                                                            current theme so that your application looks more like the Windows standard. Of
                                                                                            course, many controls already do this by default for you.

9.   Make the Properties panel visible.
                                                                                            You can attach property values to data by a feature known as data binding. Most
        a. Notice that the ItemsSource property value is highlighted with an orange
                                                                                            properties can be driven from your data source, so that as the value of the data source
             border. This indicates that a binding is being used to provide the value for
                                                                                            changes, your UI updates automatically. You can even bind one property to another
             this property.
                                                                                            element within the design surface.

         b.   Click on the small orange dot to the right of ItemsSource value to bring up
              the Property menu, and select Data Binding…


                                                                                            The Create Data Binding dialog allows you to specify and inspect a number of options
                                                                                            available while binding. Here, the Recipe data source implements a property called
                                                                                            Recipes which is a list of ‘Recipe’s. The custom styled ListBox in the center of the
                                                                                            design surface gets its items from this list.

                                                                                            As the list of Recipes within the data source changes (for example, as you click the
                                                                                            New button within the application) the ListBox control will update to show the new
                                                                                            item automatically due to this binding.



         c.   Notice that the Recipes (Array) value is highlighted and that
              RecipeBook.Recipes is shown in the custom path entry field.                   We’ll be exploring this in more detail over the course of this lab.



                                                                                                                                                                                   86
         d.   These indicate that the RecipeListBox is data bound to a Recipes property on
                  the data model. Click Cancel to return.




Task 1: Creating the Recipe Viewer                                                              Notes
1.   Find the MainUIGrid element in the timeline and double click to set the insertion point.   If you double-click an element within the Objects view, that element will become the
                                                                                                insertion point. Newly added elements using any of the creation tools will be placed
                                                                                                within the insertion point.

2.   Using the Layout tool, select Grid and double click to insert a new Grid into              The insertion point in Expression Blend indicates where newly created elements will go
     MainUIGrid.                                                                                by default.

                                                                                                This can cause interesting effects, for example, if you place elements within a
                                                                                                StackPanel, they will, by default, lay themselves out one after another for you.



                                                                                                                                                                                   87
                                                                                        This can also provide a way for you to organize your project. If a new Grid element is
                                                                                        placed, which takes up most of the design surface, it is very similar to the concept of a
                                                                                        Layer found in, e.g. Expression Design.

                                                                                        We’ll now create a new Grid called RecipeViewer which will hold the UI we create in
                                                                                        this task.

                                                                                        We’ll set it up to look like a sheet of paper.




                                                                                        You can also use the ‘delayed click’ gesture to rename elements in the Objects view, or
                                                                                        use the Properties panel.
         a.   Rename this grid RecipeViewer by using the element context menu brought
              up by right clicking in the Timeline panel




                                                                                        The Brushes category in the Properties panel provides you with a way to customize
3.   From the Properties panel, under Brushes select Background. Choose a resource by   the visual appearance of elements. You can specify a solid color, linear and radial
     clicking on the far right tab for Brush Resources.                                 gradients, or even an image or a tiling brush using the controls found here.

                                                                                        The Brushes category also provides quick access to those Brush resources which are
                                                                                        accessible from a given element.

                                                                                        This PaperSheetImage resource was imported from Expression Design.

                                                                                                                                                                              88
4.   Browse to the PaperSheetImage resource and select it
                                                                                              By dragging the resize handles you can resize, rotate, skew or even move the ‘relative
5.   Resize the Grid using the resize handles so that the Grid takes up most of the central   center’ of an element. With the Selection tool active, you can drag the element around
     area.                                                                                    in the design surface.

                                                                                              To help you be more precise, there are a number of grids and guides available at the
                                                                                              bottom of the design surface, just to the right of the Zoom control:




                                                                                              Whether you choose to use these guides throughout the lab is your preference, but
                                                                                              you might like to try out Snapping to snaplines as shown above.




                                                                                              We will be inserting several new elements, and would like them to all be logically
                                                                                              grouped within our RecipeViewer grid.
6.   Double click the RecipeViewer element in the Objects view to set the insertion point.




7.   From the Data panel, browse to SelectedRecipe row and expand it.
                                                                                              By dragging and dropping rows from the Data panel, we can quickly create new
8.   Drag and drop the Name entry near the top of the RecipeViewer grid.
                                                                                              elements. Notice that where these elements go is determined by the current insertion
         a. Choose Select a control to represent this data field, choose a Label and
                                                                                              point.
                 click OK to accept defaults.
                                                                                              After you drop an entry from the Data pane, a context menu will appear which gives
                                                                                              you a number of options on how to proceed. Here we will be creating new UI,
                                                                                              however if you prefer, you can create UI first using the creation tools. Then you can
                                                                                              drag-drop to bind this element to the data entry.
                                                                                                                                                                                   89
                                                                                   The default sizing for elements created from the Data panel is large to make sure they
                                                                                   are visible, even if no data is attached to them at design time. Our data source has
                                                                                   some additional logic to provide data at design time as well.

b.   Notice that the Label has taken its value from the first recipe’s name.




                                                                                   Now is your chance to be creative and use the resize handles and Properties panel to
                                                                                   customize an element.
c.   Adjust the font and size properties from the Text portion of the Properties
     panel and reposition the element                                              Using the picture as a guide, find a font you like and position the element as shown.

                                                                                                                                                                       90
                                                                                            You could also set the font to a Resource: this sample provides you two resources
                                                                                            which map to the fonts already in use elsewhere.




9.   From the Layout tool, select StackPanel and draw a StackPanel taking up all vertical   We’ll now want to display several fields, one after the other, to indicate the
     space beneath the recipe Title, using the right half of the horizontal space.          Ingredients and Steps and Notes for each recipe. By using a StackPanel layout
                                                                                            container, these elements will automatically lay themselves out like a list.




10.     Double click this StackPanel in the Objects view to set the insertion point
11. From the Text tool, select Label and double click to create a Label.
        a. Type Ingredients for the text
                                                                                            We’ll mix our hardcoded titles with fields populated from the data source. For titles, a

                                                                                                                                                                                 91
                                                                                         Label is an appropriate element to use, though you can also use a TextBlock.

                                                                                         Notice that you automatically begin editing the text when this element is created.
                                                                                         Press ‘ESC’ to indicate that you are finished, or simply select another element.




                                                                                         For the list of ingredients, we’ll use an ItemsControl. The ItemsControl is similar to a
12. From the Data panel, drag and drop the Ingredients (Array) onto the design surface   less functional ListBox. It does not allow you to select items within it, nor does it
    over the StackPanel (just below the Ingredients text).                               provide any individual styling for each item.

                                                                                         ItemsControl simply lists each item, and that’s what we want here.




        a.   Choose to Select a control to represent this data field, choose
             ItemsControl and accept the defaults here.




        b.   Reposition the list of ingredients by choosing Auto Size | Both from the

                                                                                                                                                                                    92
             element context menu.
                                                                                               Auto Size provides a convenient shortcut to cause items to take up all available space
                                                                                               or size to content. In this case, the ItemsControl will size to content vertically and take
                                                                                               all available space horizontally.




        c.   Indent this list slightly by setting the Left Margin to 20 using the Properties
             panel.




13. Double click the Text tool to create a new Label
       a. Type Steps for the text


                                                                                               Now we’ll create the heading for the second data list, Steps.




14.     From the Data pane, drag and drop the Steps (Array) onto the design surface
        over the StackPanel just below the Steps Label.
        a. Choose to Select a control to represent this data field, choose
                 ItemsControl and accept the defaults here.
                                                                                               Once again we’ll use an ItemsControl to show the list of steps.
        b. Reposition the list of steps by choosing Auto Size | Both from the element
                 context menu.
        c. Indent this list slightly by using the left resize adorner


                                                                                                                                                                                       93
15.   Bring up the element context menu on this StackPanel and choose Group Into |
      ScrollViewer.




                                                                                       Notice that we are running out of space for our viewer!

                                                                                        In the running application, this will happen as well. We will solve this problem now,
                                                                                       but at design time you can always resize the element temporarily to allow you to
                                                                                       continue to work.

                                                                                       We’ll create an element called a ScrollViewer, which displays a single piece of content,
                                                                                       but allows it to scroll. By default it is configured to help scroll vertically which is just
                                                                                       what we want.

                                                                                       By selecting Group Into | ScrollViewer, in one action you can add a ScrollViewer to
                                                                                       your project and configure it to scroll a piece of content. In this case we’ll scroll the
16.   Select StackPanel from the Objects view.
                                                                                       list on the right.
          a. Bring up the element context menu and choose Auto Size | Both




17.   Find this StackPanel in the Objects view and double click to set the insertion
      point.




                                                                                                                                                                                   94
18.   Double click the Text tool to create a new Label                                  Now that our space issues have been solved, we can continue designing the recipe
      a. Type Notes for the text                                                        viewer.

                                                                                        If you don’t have enough space at design time, you can always temporarily resize the
                                                                                        ScrollViewer to be larger. At runtime, it will be able to scroll its content so this won’t
                                                                                        be an issue.




19.   From the Data pane, drag and drop the Notes : (String) entry onto the design
      surface just below the Notes text.
      a. Choose to Select a control to represent this data field, and choose Label
                and accept the defaults here.




                                                                                        Notes is not a list like the other data we’re displaying, it’s a single string. We’ll use a
                                                                                        Label to display it as well.




      b.   Reposition the notes by choosing Auto Size | Both from the element context
               menu.
      c.   Indent this Label slightly by using the left resize adorner

20.   Double click the RecipeViewer control to set the insertion point




                                                                                                                                                                                  95
21.   Using the Control tool, select Button and create a Button by double clicking on
      the tool itself




22.   Move this Button to the bottom center of the UI area using the Selection tool     We’ll now add an ‘OK’ button so users can indicate that they are finished viewing a
                                                                                        particular recipe.

                                                                                        The Control tool provides a list of commonly used controls. If you want a more
                                                                                        extensive list, you can try the Asset library which is just below it.




23.   Rename this button ViewRecipeFinished




                                                                                                                                                                              96
24.   Using the element context menu, choose Edit Text
      a. Change the text to OK, we’ll set this button up to return us to the list from our
               temporary view.




                                                                                             By giving this Button and other elements appropriate names, we’ll be able to find
                                                                                             them later when we need to attach interactivity or animations to them.

                                                                                             You can also access named elements from the code file for MainWindow.
25.   Run Project | Test Application to see your progress so far
      a. The current list of ingredients displays on top of all other controls. In Task 2,
              we will set this up to move back and forth as the view and OK buttons are
              clicked.
      b. The ScrollViewer and other controls have the Windows default look, while
              we’d like them to match our application theme. In Task 3 we’ll customize
              the ScrollBars to match our application theme.




                                                                                             You can always save your project and test it using Project | Test Application, to see
                                                                                             how it works with your changes so far. Now’s a good time to review the progress we
                                                                                             have made.

                                                                                             In the screenshot, you’ll see we’ve also changed the fonts to match the scheme
                                                                                             elsewhere in the app. Try to accomplish this on your own, or go on to the next task.

                                                                                                                                                                                 97
                                                                                          Task 2 will show you how to animate this viewer into view whenever the user clicks the
                                                                                          view button.

                                                                                          In Task 3 you’ll customize the appearance of the ScrollBar to show you how WPF
                                                                                          controls can be styled while retaining their default behavior.

                                                                                          Finally in Task 4, you’ll add search to this project, so the user can filter the list of
                                                                                          recipes to the ones they are interested in.




Task 2: Creating an Animated Transition in Response to User Input                         Notes

1.    Select RecipeViewer from the Objects view                                           In Expression Blend, there are a number of features which allow you to create
      a. Change the Visibility of this element to Collapsed using the Properties          keyframed animations. These animations can act as transitions between states in your
               panel.                                                                     applications, or provide a richer way to respond to user input.
      b. Set the Opacity to 0%
                                                                                          Specifying an animation and specifying how it is caused are done as two separate
                                                                                          steps in Expression Blend. You can reuse animations so they happen in response to
                                                                                          multiple events, or you can combine animation with the Control Styling features of the
                                                                                          next section to create reusable, animating controls.

                                                                                          We’ll create some animations which show and hide this new recipe viewer we’ve
                                                                                          created. To begin with, let’s hide the recipe viewer in the non-animated state. That
                                                                                          way, when we start the application, it will not be visible.

                                                                                          There are two common properties which affect whether you can see the element
                                                                                          when the application is launched: Opacity and Visibility. Opacity can be adjusted
2.    Click on the + in the first row of the Objects and Timeline panel to create a new   between 0 and 100% so that the element (and all child elements) become somewhere
      Timeline                                                                            between transparent and fully opaque.


                                                                                                                                                                                     98
                                                                                      The Visibility property has three values, Visibile, Hidden, and Collapsed. When an
                                                                                      element is Collapsed, not only does it not appear, but it does not take up any space.
     a.   Name this new timeline ShowRecipeViewer in the dialog.                      Hidden elements take up space. This is useful if you have a layout container which
                                                                                      holds many elements and would like to hide some of them.

                                                                                      Let’s create a new Timeline which will animate this viewer to be visible again.




                                                                                      Notice that the Objects and Timeline panel has expanded. You can also switch
3.   By default you are now setting keyframes for time 0.                             workspaces using F6/F7 or the Window menu.
     a. Using the Properties panel, set the Visibility to Visible
                                                                                      You can see the keyframe schedule area adjacent to the Objects view. Any new
                                                                                      keyframes we create will be shown here.

                                                                                      The model for editing animations in Expression Blend is that you first adjust the
                                                                                      current time value to a particular time, and then adjust properties in record mode until
                                                                                      your design surface looks how you want it to at that time. Those properties will leave
                                                                                      keyframes which allow this appearance to be duplicated in the running application.
                                                                                      If you are happy with the appearance of your object, but did not need to adjust
     b.   Click the Record Keyframe Button which will allow us to change Opacity as   properties to get there, you can click the ‘Record Keyframe’ button. Whenever you
               well.                                                                  change properties, keyframes will be automatically recorded for you so you won’t
                                                                                      need to do this.

                                                                                      We want to animate the opacity, but it should be 0% at this point and it already is. By
                                                                                      clicking Record Keyframe, we lock this value in even though we don’t need to change
                                                                                      it.



                                                                                      You can click and drag the orange time indicator to different times to adjust the
4.   Change the time to 1s by dragging the time indicator to the 1, or typing in      current time.
     0:01.000 in the playhead area.
                                                                                      We’ll set it to 1 second and set the object up to reappear at that time.




     a.   Set Opacity to 100%

                                                                                                                                                                           99
5.    Press Play to preview this animation. You should see the viewer fade in.             The WPF animation system has smoothly interpolated between the two keyframe
                                                                                           values for us. You should feel free to play around with this animation, and go on
                                                                                           when you have a fade in animation you are happy with.

                                                                                           You can always click the x in the first row of Objects and Timeline to delete this
                                                                                           Timeline and start over. You can also undo any animation changes you make.



                                                                                           Now, we’ll create an animation which hides the Recipe Viewer.

6.    Select None using Edit | Select None or clicking on the edge of the design surface
      using the Selection tool.

7.    Click on the + in the first row of the Objects and Timeline panel to create a new
      Timeline



      a.   Name this new timeline HideRecipeViewer

8.    Select RecipeViewer using the Objects view




                                                                                           At the start of the animation, we’ll force RecipeViewer to be visible.
9.    By default you are now setting keyframes for time 0.
      a. Set the Visibility to Visible
      b. Set the Opacity to 100%




10.   Change the time to 1s by dragging the time indicator to the 1, or typing in          At the end of the animation, we’ll hide it again.
      0:01.000 in the playhead area.
      a. Set Opacity to 0%

11.   Press Play to preview the animation. You should see the viewer fade out.



                                                                                                                                                                                100
12.   Using the Timeline Selector drop down, change back to Default which disables
      creating animations.                                                           To stop animating and editing timelines, switch back to Default.




13.   In the Triggers panel, find Window.Loaded and select it.
                                                                                     We’ll now set these timelines up to happen in response to certain events.
      a. Press - Trigger to remove this trigger.

                                                                                     You might have noticed, if you tested the application as you were going along, that
                                                                                     the animations you created happened when the application launched.

                                                                                     By default, when a timeline is created as above, Expression Blend sets this up to start
                                                                                     at launch. Since we want these to happen in response to specific events we’ll remove
                                                                                     this behavior.
14.   In the Triggers panel, click on + Event
15.   Using the Objects view select ViewRecipeButton                                 Let’s create a new Event Trigger which will cause the ‘Show’ timeline to start in
                                                                                     response to the user clicking on the View button in the menu.




      a.   In the trigger editor change Window to ViewRecipeButton
      b.   Change Loaded to Click




16.   Click on the + to the right of this trigger to add a new action
      a. Set this to ShowRecipeViewer.Begin by using the drop down editors.

                                                                                     After finishing this step, we have:

                                                                                                                                                                         101
                                                                                           When ViewRecipeButton.Click is raised, ShowRecipeViewer.Begin.

                                                                                           This shorthand describes the effect we are trying to achieve.




17.   In the Triggers panel, click on + Event
                                                                                           Let’s add one more Event Trigger so that when the user clicks the OK button at the
18.   Using Objects and Timeline select ViewRecipeFinished
                                                                                           bottom of the viewer, the viewer hides again.
      a. In the trigger editor change Window to ViewRecipeButton
      b. Change Loaded to Click




19.   Click on the + to the right of this trigger to add a new action
      a. Set this to HideRecipeViewer.Begin by using the drop down editors.

                                                                                           We now have
                                                                                           When ViewRecipeFinish.Click is raised, HideRecipeViewer.Begin

                                                                                           This shorthand describes the effect we are trying to achieve.




20.   Test your project, now the Recipe view should animate in when the ‘View’ button is
      clicked, and back out again when the ‘OK’ button is clicked.

                                                                                           You now have a working recipe viewer, which should appear in response to the View
                                                                                           button being clicked. When done viewing, you should be able to click OK and dismiss
                                                                                           the viewer. This should give you an idea of how simple interactivity can be
                                                                                           accomplished using Expression Blend.




                                                                                                                                                                            102
Task 3: Customizing a Control                                                    Notes
1.    Notice that the file Simple Styles.xaml is contained within the project.   In Windows Presentation Foundation, the behavior of a Control is specified separately
                                                                                                                                                                  103
                                                                                           from its appearance. This means that designers can change the appearance of
                                                                                           standard controls and retain the functionality that
                                                                                           Windows provides.

                                                                                           To give you an idea of the power of this system, many controls within Expression
                                                                                           Blend are the WPF standard controls with customized styles.

                                                                                           Within Expression Blend, it’s easy to lightly customize the appearance of a control as
                                                                                           we’ll see below. To do detailed work here, you will also need an understanding of
                                                                                           how each control is built and to understand the platform features they leverage.
                                                                                           Expression Blend makes this process possible as well, and to help simplify the process
                                                                                           we’ll make use of Simple Styles.

                                                                                           Simple Styles is a library of control styles which you can use in your own projects. It
                                                                                           serves as a starting point for customizing controls; think of it as a blank canvas for
2.   Select RecipeViewer using the Objects view
                                                                                           each control.
         a. Set Visibility to Visible and Opacity to 100%
                                                                                           Simple Styles is always available within Expression Blend to be added to any project
                                                                                           from the Asset library. It has already been added to this project, so let’s make use of
                                                                                           it.

                                                                                           Because of the previous task, our RecipeViewer is hidden by default. Let’s make it
3.   Select [ScrollViewer] and decrease its height until the vertical ScrollBar shows as
                                                                                           visible again.
     enabled
         a. Depending upon the size of your text, the vertical scrollbar might already
              be enabled.
                                                                                           We now want to customize this ScrollBar. We’ll use a feature of Expression Blend
                                                                                           called in place template editing which means we’ll customize this scrollbar as it
                                                                                           appears currently in the design surface.

                                                                                           In order to make sure we’re customizing the ScrollBar properly, let’s make sure it is
                                                                                           enabled and all parts are visible.




4.   Select [ScrollViewer] and from the element context menu, choose Edit Control

                                                                                                                                                                                104
     Parts (Template). Select Edit a copy… from the submenu.
     a. Choose the default settings here                                          We’ll begin by customizing the ScrollViewer to point at our simple styles for its
                                                                                  ScrollBar.

                                                                                  When you choose Edit Template, you scope yourself within the template for the
                                                                                  ScrollViewer control. Just like the Objects shown within the main design surface,
                                                                                  controls may be composed of multiple objects. Those objects are contained within
                                                                                  the Template for a control, and determine how it appears and to some degree how it
                                                                                  behaves.

                                                                                  These elements are attached to the control through a special kind of binding known
                                                                                  as Template Binding. When properties on the control change, the template bound
                                                                                  elements within the template will change as well, and vice versa.

                                                                                  In this case the ScrollViewer is composed of a Grid containing two ScrollBars and a
5.   Select PART_VerticalScrollBar from the Objects and Timeline menu             ContentPresenter. The ContentPresenter is a special element which displays the
                                                                                  Content of the ScrollViewer onscreen.

                                                                                  Template Binding is how the ScrollBars within the template affect scrolling within the
                                                                                  parent ScrollViewer.

                                                                                  You can also see that their name begins with PART_. This indicates these are Control
                                                                                  Parts, and in general should not be renamed. ScrollViewer will not function properly
                                                                                  without PART_ScrollContentPresenter, PART_VerticalScrollBar, and
6.   From the element context menu, chose Edit Control Parts (Template) | Apply
                                                                                  PART_HorizontalScrollBar. They must be the correct type of element and named
     Resource | SimpleScrollBar
                                                                                  properly.



                                                                                  Let’s first change the Vertical ScrollBar to use Simple Styles. Since they are already
                                                                                  part of the project we can apply the Simple Style for ScrollBar using the element
                                                                                  context menu.




                                                                                                                                                                           105
7.    From the element context menu, chose Edit Control Parts (Template) | Edit a
      Copy… and choose the defaults.

8.    Using the Zoom tool, zoom in on the ScrollBar
                                                                                    Now let’s customize starting from this Simple Style. Using Edit Template we’ll change
                                                                                    the Template of the ScrollBar.

                                                                                    Take a look at the Objects view for the ScrollBar template. It contains a number of
                                                                                    elements including a Track element. Some of these elements are simple Button
                                                                                    controls just as we’ve used before, and they are arranged using a Grid.

                                                                                    This complex control is built out of simpler controls we’re familiar with. We can edit it
                                                                                    just like we’re editing any other portion of our project.




9.    Select DecreaseRepeat and IncreaseRepeat using the Objects view and delete
      them using Edit | Delete

10.   Select GridRoot
                                                                                    Let’s make a customized ScrollBar with no page up/page down buttons. We’ll change
                                                                                    the appearance of the Track as well.




                                                                                                                                                                          106
11.   From the Properties panel under advanced Layout, find the RowDefinitions
      property and Reset it using the property menu by clicking on the white dot next to
      the value.



                                                                                           The Grid layout container can specify rows and columns within which to place
                                                                                           elements. Once we remove the IncreaseRepeat and DecreaseRepeat buttons, we
                                                                                           don’t need this anymore, so let’s remove the current set of rows.




12.   In the Objects view expand and find the [Thumb] element
           a. This is different than the Thumb property which is shown above it.




                                                                                           We’ll now try out of place template editing. The template for Thumb is specified within
                                                                                           another file. When we wish to scope into this template, we will lose the context of the
                                                                                           rest of our file.

                                                                                                                                                                             107
13.   Using the element context menu, Select Edit Control Parts (Template) | Edit
      Template                                                                           In place editing has the nice advantage that you can see values and colors from nearby
                                                                                         controls, so that you may align to or match the color scheme of other elements.
14.   In the Objects view, find Rectangle which gives this Track it’s appearance and
      select it                                                                          With out of place editing, you’ll get a default, but consistent appearance and set of
                                                                                         sample data for each control, which can also be useful.




                                                                                         The thumb element is also built of other elements by using the Template mechanism.
                                                                                         Certain elements, however, do not have templates and can be considered primitive
      a.   In the Properties panel under Brushes, remove the stroke by clicking Stroke   elements. The Edit Template commands will not be enabled for those elements.
                and then clicking on the No Brush icon
      b.   Set the Fill to a Dark Red by choosing Fill, then clicking the Solid Color    Let’s change the appearance of the Thumb by changing the color and shape of the
                Brush icon. Use the color picker to set the color to a dark red.         Rectangle element here.
      c.   Using the Properties panel set RadiusX and RadiusY to 0. This will remove
                the corner rounding.




15.   In the Objects and Timeline panel, click on the Scope Up button next to
      SimpleThumbStyle to return to the previous scope.




16.   Select GridRoot within the template, and notice that its background is set to a
      Template Binding.
          a. In the Properties panel, click on the marker next to Background and         Using this button, we can return to the previous scope. This will allow you to navigate
               choose Convert to Local Value                                             back all the way to, e.g., the main document.




                                                                                         The Grid background here is set up so that when you change Background on the
                                                                                         ScrollBar itself, it will show through via a Template Binding. Let’s remove this behavior
                                                                                         and set up a hardcoded color.

                                                                                                                                                                             108
      b.   Set the background to a solid color of a light brown by choosing the Solid
                Color Brush tab from the Brushes pane.
17.   In the Objects and Timeline panel, click on the Scope Up button next to             Finally, let’s change the width of the VerticalScrollBar where it’s used: within the
      ScrollBarStyle1 to return to the previous scope.                                    ScrollViewer template.



18.   Select PART_VerticalScrollBar,                                                      We’ll need to remove the MinWidth which is specified as well by default. It’s under
          a. Using the Properties panel set MinWidth to 0 and Width to 10                 advanced layout properties. You can also use the Search filter within the Properties
                                                                                          panel.
19.   In the Objects and Timeline panel, click on the Scope Up button next to
      ScrollViewerControlTemplate1 to return to the root scope.

20.   If you resized the ScrollViewer in step 46 then you can return it to its original   Let’s return the project to the state we need for it to run. Remember the recipe viewer
      height now.                                                                         should be hidden initially so we see the list of Recipes.


21.   Select [ScrollViewer] and return its Opacity to 0 and Visibility to Collapsed




22.   Use Project | Test Application to test out the new ScrollBar


                                                                                          Try out using the custom ScrollBar you created. Notice that you can drag the Thumb
                                                                                          around as with a standard ScrollBar, and you can use the keyboard to scroll if you give
                                                                                          it focus.



                                                                                                                                                                                 109
Task 4: Enabling Search Functionality                                                  Notes
1.     Using the Objects view double click LayoutRoot to set the insertion point.      In Expression Blend you can the drawing tools to create complex vector shapes. You
2.     Using the Layout tool, choose Grid and double click to insert a Grid.           can also use image assets and assets imported from Expression Design within your
                                                                                       projects.

                                                                                       In this task, we’ll use the drawing tools in Expression Blend to draw out a vector
                                                                                       background for a search text box. Then it’s a small matter to bind the value of this
                                                                                       text box to our data model, using the data panel which will cause it to filter the list of
                                                                                       results at runtime.

                                                                                       We’ll also make use of resources imported from Expression Design’s Xaml Export.



       a.   Rename it SearchContainer                                                  Let’s begin by creating a Grid which will hold our elements. Think of this as a ‘layer’ if
       b.   Position the Grid at the top right of the application as shown using the   that concept is more familiar to you.
                 Selection tool




                                                                                                                                                                              110
                                                                              By setting the insertion point, our newly created elements will go into this grid.

                                                                              Let’s create a shape which has two rounded bottom corners for the background of
                                                                              this search area.
3.   Double click the new SearchContainer to set the insertion point.
4.   Using the Rectangle tool, draw a Rectangle over the top ¾ of the Grid.




     a. Ensure RadiusX and RadiusY are 0
     b. Set it’s Fill to a bright orange, and Stroke to No Brush
5.   Draw a second Rectangle over the entire Grid
     a. Set its RadiusX and RadiusY to 20
     b. Ensure its Fill is a bright orange, and Stroke is No Brush




                                                                                                                                                                   111
6.   Multiselect the two Rectangles using the Shift key in the Objects view.



                                                                                 Expression Blend supports a number of Boolean operations which combine multiple
                                                                                 vector shapes. We’ll use Unite to create a shape which is rounded on the bottom
                                                                                 only.
7.   In the Object menu choose Object | Combine | Unite




                                                                                 Windows Presentation Foundation also supports Bitmap based effects such as blur,
8.   In the Properties panel, under advanced Appearance, add a new Drop Shadow
                                                                                 bevel and emboss. Because these effect occur per-pixel, they should be used carefully
     BitmapEffect by bringing up the popup next to the New button.
                                                                                 as they consume processing power.




                                                                                                                                                                 112
9.    Draw a Rectangle taking up a section to the right of the Grid as shown below.
      a. Set it’s Fill to the Brush Resource MagnifyingGlassIcon                      Now let’s use a magnifying glass brush drawn in Expression Design. If you are feeling
      b. Set RadiusX/RadiusY = 0 and Stroke to No Brush                               ambitious you can try redrawing this within Expression Blend as well.

                                                                                      We can use a Rectangle as a placeholder to pick up this resource.




10.   Using the Text tool, choose TextBox and draw a TextBox




                                                                                      Let’s add the TextBox which will be used to perform the search.




      a.   Delete all text within this text box.
      b.   Rename this textbox to SearchTextBox

11.   Draw a Label on top of the TextBox, taking nearly the same dimensions
      a. Change the text to SEARCH BY NAME OR INGREDIENT
      b. Set the Font Size on the Label so that this text fits completely
      c. Adjust the sizes of the Grid, TextBox, Label, and Rectangle using the
              Selection tool until you are happy with the overall appearance          We’ll use a separate Label on top of the text box to show a search hint. To do this
                                                                                      we’ll need to set up a set of data bindings which will cause it to disappear when
                                                                                      necessary.

                                                                                      Labels and other UI elements can be placed within a TextBox as well. Since we want
                                                                                      the Label to appear on top, you may decide to temporarily lock the TextBox using the
                                                                                      lock icon in the Objects view next to SearchTextBox. To select it later, remember to
                                                                                      unlock it again.




                                                                                                                                                                        113
                                                                                      With the Label in place, we’ll make it so that it’s hidden whenever the user has typed a
                                                                                      search string.
12.   Select the Label and change the Foreground to light gray using the Properties
      panel.                                                                          The data source has provided a property for that already, we need to bind to this
                                                                                      IsSearchFilterEmpty property using data binding.
13.   From the Properties panel under Appearance, bring up the Property menu for
      Visibility and chose Data Binding…
      a. In the left list, select RecipeDataModel
      b. Change Show Matching Types Only to Show All Properties




      c.   In the right list, browse to IsSearchFilterEmpty and select it




                                                                                                                                                                          114
                                                                                       Because the types don’t match up (bool can be True or False, while Visibility can be
                                                                                       Visible, Hidden, or Collapsed) we’ll use a Value Converter to adapt them.

                                                                                       This BooleanToVisibilityConverter will make it so that the label is Visible whenever
                                                                                       IsSearchFilterEmpty is True.
      d.   At the bottom of this dialog, expand the advanced options, and change the
                Value Converter to BooleanToVisiblityConverter




                                                                                       Let’s also make it so that it’s not visible whenever the user is about to type text in to
                                                                                       the SearchTextBox. We can check for IsFocused on this text box to handle that.

      e.   Click Finish

14.   From the Properties panel under Appearance, bring up the Property menu for
      Opacity and chose Data Binding…


                                                                                                                                                                              115
a.   Switch to Element Property. In Scene elements, select SearchTextBox




b.   Change Show Matching Types Only to Show All Properties




                                                                           Because the types don’t match up (bool can be True or False, while Opacity can be any
                                                                           numeric value) we’ll use a Value Converter to adapt them.

c.   Under Properties browse to IsFocused and select it                    This BoolToOpacityConverter is written to make it so that the label has 0% Opacity
                                                                           whenever IsFocused is True. If you are curious as to how ValueConverters are written,
                                                                           you can open Controls\BoolToOpacityConverter.cs from this project.




                                                                                                                                                            116
      d.   Expand advanced options and change the Value Converter to
               BooleanToOpacityConverter




      e. Click Finish                                                                  Finally, when the user clicks on this Label, we’d rather give focus to the TextBox. We
15.   With the Label selected, uncheck IsHitTestVisible. It’s in the advanced Common   can do this by causing the Label to ignore mouse event with the IsHitTestVisible flag.
      Properties, or use the search functionality to find it.




                                                                                                                                                                          117
16.   Select SearchTextBox from the Objects view                                     Let’s set up the SearchTextBox to link to the search string in the data source.

17.   From the Properties panel under Content, bring up the Property menu for Text
      and chose Data Binding…
      a. Under Data sources select RecipeDataModel                                   In this case, we’d also like to update the data source itself whenever someone types
      b. Under Properties, browse to SearchFilter and select it                      text into the TextBox. This is done using Two Way data binding.
      c. Expand the advanced options at the bottom of the dialog, and change
              Binding direction to Two Way
      d. Ensure Update source when is set to PropertyChanged




      e.   Click Finish




                                                                                                                                                                       118
18.   Choose Project | Test Project and run the application. Try searching by using the
      text and see how the list of recipes shown is filtered.
           a. Notice that the text label disappears as text is being entered, and         Now you should have a fully functional RecipeBox. Typing text into the search field
               reappears once it is cleared and focus is lost.                            should cause the view to filter down to those recipes containing that text. It also
                                                                                          searches the ingredients list, and other fields.



                                                                                          Thanks for trying out this Hands on Lab and using Expression Blend.




                                                                                                                                                                           119

								
To top