Ejemplo Con Expression Blend Manual 2

Designing Windows Applications with Expression Blend – Manual
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
2
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
3
4
TO DO TO KNOW
A. Getting Started
1. Start Microsoft Expression Design from the Start menu or use the shortcut In the first part of this lab you will focus on two things: the drawing and
on the Desktop editing features of Expression Design that pertain to vector-based graphics;
and how to export these graphics to other formats such as bitmap-based
2. Maximize the application if needed. 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 collaborate together on rich user interface experiences based on the
DesignToBlend\
Windows Presentation Foundation (WPF).
5. Select Icons.design, and then click Open.
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 images and they do not lose their quality.
7. Go to View | Zoom on Selection.
5
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.
6
9. Go to View | Actual Size. Feel free to select and zoom in closely on the other icons. When you are
finished, the lab will proceed with the mouse icon.
10. Click the mouse icon.
11. Go to View | Zoom on Selection.

You will now see how to create one of these icons.
12. Click on the white surface outside of the box that borders the image.
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.
7
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 Let’s take a look at the photo that inspired this icon. First turn off the current
be highlighted with a yellow bounding box. layer and 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.
8
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 To create a vector-based image from a photo, begin by tracing the object’s
bounding box appear around to this layer. shape. Before 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).
9
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
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 vector paths. The top four are the traditional Bezier curve
8. Click B-Spline. 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.
10
9. In a white portion of the layer click around to practice with the B-Spline Notice that if you press the ALT key the curve is not interpolated but instead
tool. follows the segments exactly. This allows you to make sharp corners.
10. Press ALT to see how the B-Spline cursor and behavior changes. Notice in
this 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.
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: Before tracing let’s make sure the fill color is set to “none”. If set, fill colors
None). get applied to areas bounded by a path even when the path is not closed.
11
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 Be careful only to single click the mouse. If you double-click the path will end
from the curvy areas (the distance allows the B-Spline curves to work (complete itself).
their magic).
17. When you have completely encompassed the mouse, close off the path
by clicking as close as possible to the first point you laid.
12
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.
13
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 When you again deselect the path you can probably now see it more easily.
deselect the path.
14
24. Time permitting you may trace the other main lines of the mouse. Again, The next steps, however, unveils a completed layer of paths that comprise
press ALT for sharp corners like you see here. the mouse icon. So there is no need to continue tracing if time and interest do
not permit.
15
25. Click the eye icons for both the Mouse_TracePhoto and Mouse_TracePaths This layer shows all the paths that comprise the mouse icon. Currently it looks
layers to turn them off. like a wire-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.
28. Click anywhere outside of the mouse and then click the outer border near To apply a gradient fill to the main shape, click on the outer border and then
the tail. choose a gradient fill color, adjusting the first color stop to a medium dark
gray instead of black.
29. In the upper right, click the larger left-most rectangle (tooltip: Fill), and
then click the gradient square to its right.
16
30. In the gradient control, click the left color stop and then click on the left of
the custom palette, about midway vertically.
17
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.
18
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 inner regions to apply a fill color that has some translucence
34. Click anywhere outside of the mouse. (opacity of only 60% instead of 100%).
35. Click the lower right portion of the larger region’s path.
Feel free to continue to select other regions and fill with colors and opacities
of your choice.
19
36. Press and hold SHIFT, then click the smaller, gray path in the upper left.
37. In the upper right click the white square to apply a white fill color.
20
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 working in. You should now have only six layers visible: one for
40. Click the eye icon for the Icon_Mouse layer to turn it on. 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.

But first, organize the icons that appear to be randomly placed on the layer.
3. At the bottom click the arrow in the Align button, and then select
BottomEdges.
4. Click the arrow in the Distribute button, and then select To Horizontal Notice that the white space between the icons is not evenly distributed. You
Center. They should now look like this: can correct that with the Distribute option.
5. Go to File | Export | During the export process the Xaml Export tool appears. This allows you to
preview the images and XAML source code before the new export file,
21
6. Select the XAML file type 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 move them around, and zoom in or out with the mouse
9. Move the mouse wheel forward and backward to zoom in and out. wheel, or by right-clicking and selecting the menu option.
10. In the upper right click the XAML Code tab.
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 tool now displays each icon is a set of scrolling thumbnails, much
22
15. Scroll through the thumbnails across the bottom, clicking them to view like Windows Explorer when in Filmstrip mode.
the full image.
This is a great export method because it allows you to share the library with
other 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 You will now import the XAML file you just generated, and then create some
Desktop called WPF Expression Blend custom, fully functional, .NET 3.0-based buttons from scratch. In this way you
will see how Expression Design and Expression Blend collaborate together to
2. Go to File | New Project. create great-looking user interfaces.
3. In the Create New Project dialog, for Name type “MyCustomButton”.

Creating a project gives you an empty workspace on which you can start
4. For Location browse to the Desktop, then click OK.
laying out different elements.
5. In the upper right, right-click the root project element The first task is to import the XAML-based icons you just created.
(“MyCustomButton”) and select Add Existing Item.
23
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.
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. Selecting an icon you can see that it is an independent object within
9. Feel free to click and drag the icons, zoom in or zoom out, etc. the single XAML file.
Closing the Results palette gives you more workspace. The TAB key controls
the visibility of all palettes.
24
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 numerous .NET 3.0 user interface controls.
13. In the Toolbox, click and hold the Button icon to expose the other UI
elements, then click Button.
NOTE: There are other even easier and faster methods to create a Button in
Expression 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.
25
14. Press and hold the SHIFT key, then on the white design surface click and Pressing and holding the SHIFT key keeps the length and width proportional
drag to create a square button that is 125 units long (as determined by as you size it. Without the SHIFT key you would likely end up with a rectangle.
the dynamic 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 now see how WPF and Expression Blend enable you to create
16. On the design palette click the button three times to zoom in. a really cool looking button.
17. Notice the Window palette on the left.
26
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.
18. Right-click the button and go to Edit Control Parts (Template) | Edit a Editing the template means that any button instances created from this
Copy. 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 This dialog allows you to set a resource name for one the button and define
“GelButton01”, and then click OK. where you 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
27
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 The Chrome control is actually not required; and because it is a bit ugly,
memory. delete it after first cutting its child ContentPresenter control.
21. Click Chrome and press DELETE.

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:
28
24. In the Template palette double-click Grid to open it inside the Template The Ellipse tool is what enables you to create a button in the shape of a circle.
control in the main design palette.
25. In the Toolbox, click and hold the Rectangle icon to expose the other
When done, you can paste the ContentPresenter that was cut from the
shapes, then select Ellipse.
Chrome control into the Grid control.
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.
29
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 Grid layout mode provides extra visual cues to help you in your design work.
“Button” text, 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 ContentPresenter control from the Grid control. You may be able to see
30. Below, in the Layout palette, click into each Margin field and change the that currently the ContentPresenter control is not big enough to contain the
value to “0”. graphics you created.
Setting the margins to zero makes the ContentPresenter control the same size
as its parent Grid control.
30
31. In the Layout palette, for HorizontalAlignment click the Center (second) However, the “Button” text now appears in the upper left. You can correct this
icon to its right. changing 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.
31
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.
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
Click and drag the arrow’s head and tail to below and center of the frame. different—just try and make the button’s appearance similar).
32
39. In the Brushes palette, click Stroke and then select a bright yellow from Stroke is the ellipse’s border. The button will look better if you change this,
the color palette. too.
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 opacity.
42. In the upper right click and drag to draw an elongated oval.
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.
33
48. Go to Object | Path | Convert to Path. This looks pretty good, but you can improve the highlight by converting the
shape to a vector-based path and then tweaking the vertices to get the shape
49. In the Toolbox click the Direct Selection icon (or press the A key). 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:
34
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.
35
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 and paste action.
55. Press the V key to ensure you in Selection mode.
56. Click one of the icons and press CTRL+C.

With the icon in the button document you can place it onto the button and
57. Click the Window1.xaml tab. then resize it to fit properly.
58. Press CTRL+V. Don’t worry about the size of the icon relative to button.
You will fix this shortly.
59. Click and drag the icon over the button until the dashed box appears.
36
60. While still holding the mouse button down, press ALT, release the mouse When the icon snaps into place, it may appear to clip part of the graphic. But
button, and then release the ALT key. The icon should appear to “snap when you resize it the entire icon will be there.
into” the button.
37
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.
38
62. Press F5. You can see that the custom button is looking much better. It does not,
however, act like a button yet. So it’s time to add some nice behavioral
63. Hover your mouse over the button. effects.
65. Right-click the button and go to Edit Control Parts (Template) | Edit In this case you don’t edit a copy of the template because the template in the
Template. 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.
39
68. In the “Activated when” group, in the right dropdown menu, select This statement could be expressed in English as something like “Whenever
IsMouseOver. the property of this button called ‘MouseOver’ is True, make the main ellipse
glow a little, and the button border to thicken.”
40
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.
41
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 effects from which to choose.
75. Hover your mouse over it to test the rollover effect. It should look
something like this screenshot, which shows both button states:
42
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:
43
81. Click the Icons.xaml tab. Make sure before releasing the mouse button and ALT key that the text above
the segmented box contains the word “[Button]”, not “[Canvas]”.
82. Click a different icon and press CTRL+C.
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]”.
44
87. While still holding the mouse button down, press ALT, release the mouse
button, 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:
45
90. Press F5 to preview the buttons. You can again preview the buttons and see that they all share the same
templated look and behavior.
91. Hover your mouse over each button to see the rollover effect.
This completes the lab!
93. Close Expression Design and Expression Blend. If prompted to save
changes click No.
46
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.
47
48
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
49
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
50
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 Gradienttab and click on the Radial gradient button
51
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
TASK 2: Create a User Control
52
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
53
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
54
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
55
5) Choose the default binding to ItemsSource
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
56
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
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
57
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…
58
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
59
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
60
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
61
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
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
62
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.
63
40) Select just one of the animated controls.
44) In the Objects and Timelines panel select the User Control that was not animated
45) Right click and launch Order | Bring To Front
64
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
65
2) Select the [ColorSwatch] in the Objects and Timeline panel
3) Right click and launch Edit Control
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
66
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%
67
13) Launch File | Save
14) Launch Project | Build Project
15) Press F5 to test the application
68
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.
69
70
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.
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
71
Task 1: Exploring the prototype web search application
Projects: A project is a collection of files that get compiled into
an executable (or a control library) when the project is built. In
Launch Expression Blend from the Start menu or use the shortcut on the Desktop called the case of this sample, we have two projects:
WPF Expression Blend LiveSearch.csproj, and LiveSearchModel.csproj. We have
split the application we are creating into two projects to clearly
separate the UI from the business logic. All of the UI resides in
1. File menu | Open Project… 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.
72
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.
73
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.
74
8. Close the running application.
9. In Expression Blend, right click on (Solution “LiveSearch” (2 projects)) in the Project Expression Blend and Visual Studio share the same project and
panel and hit Edit Externally. solution 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.
75
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.
13. Close Expression Blend.
Task 2: Creating the pagination control

1. Launch Expression Blend.
2. File menu | Open project…
76
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
77
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 Grid: A Grid panel is the most flexible layout control available in
area to 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 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.
78
11. Press the control key and select the 4 columns by clicking as shown below.
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.
79
14. In the Property panel’s Layout properties, set the Height of the UserControl to 20.
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.
80
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.
18. Draw a Button into each of the 4 columns.
81
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 lets you create and reuse resources across your
22. Let us customize the look of one of these buttons. In a paging control, the button in application, and between applications. Practically anything can
the first column is supposed to be the “Initial Page” button. be a resource in your application – brushes, colors, margins for
layout, styles and templates, etc. The Resource pane in
23. Right click on this Button | Edit Control Parts (Template) | Create Empty. Expression Blend supports a variety of operations – move
resources across files or change the scope of their usage,
rename 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,
82
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.
83
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”.
84
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.
85
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.
86
34. Drag and drop PagePreviousButtonStyle from the Resource pane into the
button in the second column. For the popup that is presented, select Style.
87
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 Commands: Commanding is an input mechanism in Windows
(Solution “LiveSearch” (2 projects)) in the Project panel and choose Edit Presentation Foundation (WPF) which provides input handling at
externally. This will open the solution in Visual Studio for editing. As before, a more semantic level than device input. Examples of
choose the second radio button (“Load project normally”) and uncheck the “Always commands are the Copy, Cut, Paste operations found on many
ask me for…” option at the bottom of the dialog. The solution is now available for applications.
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.
88
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.
89
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 Data binding in Expression Blend: Expression Blend has rich
corresponding Command such that whenever the button is clicked, the Command is support for binding to a variety of data sources: XML files, any
invoked. arbitrary data object, or any element in the scene. The Data
pane in Blend provides you with support to drag-n-drop data
41. Select the button in the 3rd column. This is the button that corresponds to the binding data sources to an element in the scene, or to create
gesture of moving to the next page when browsing a result set. new elements that will display the data.
42. In the Property panel, search for the property Command.

43. Click on the small button at the extreme right of the property, and choose Data • XML Data Source: A local or remote XML file that can
Binding… 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.
90
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.
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
91
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.
3. Select PagingControlTest in the list.
4. Double click on the control (as shown in the figure below) to insert
PagingControlTest.
92
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 properties to Center. This ensures that the control remains
center aligned no matter how tall and wide the parent control is.
93
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.
10. Delete the selected line. Uncomment the line below the selected line, i.e.

94
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.
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
95
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.
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.
96
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.
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.
97
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.
12. Switch out of the animation mode by selecting Default in the Timeline pane.
98
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
99
18. Switch to the listing of all events available for this control in the Property panel. Event handling inside Blend: Windows Presentation
Foundation (WPF) controls expose a very rich set of events that
19. For the DataContextChangedEvent, double click inside the text box next to it. users of the controls can respond to in their applications. While
This will switch your focus into Visual Studio. You will notice that an event handler is WPF and Blend provides you with the ability of adding no-code
automatically created for you. 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 hand.
20. Copy the code indicated in the file and paste over the event handler that
Blend generated for you, i.e.
Replace
private void SearchingControlHost_DataContextChanged(object sender,

DependencyPropertyChangedEventArgs e)
100
{
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,

System.ComponentModel.PropertyChangedEventArgs e)
if (e.PropertyName == "IsSearching")
if (searchResultView.IsSearching)
{
101
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.
102
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.
103
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.
104
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)
105
Getting Started: Understanding the RecipeBox Project Notes
RecipeBoxis an application written in C# which loads a set of recipes from
an XML file and displays them using the Windows Presentation Foundation.
Run Expression Blend from the Start menu or use the shortcut on the WPF controls can be given customized appearances using a feature known
Desktop called WPF Expression Blend as Control Styling. Those styled controls still retain the default windows
behavior, which allows you to (e.g.) select items in this list by using the
arrow keys.
1. Open the RecipeBox.sln project from C:\MIX HOLs\Expression

Labs\Expression Blend HOLs\LEXPR05 - RecipeBox\Getting
Started\RecipeBox\RecipeBox.sln RecipeBox attaches the loaded data to the WPF controls using a technique
known as Data Binding. In this lab we will explore both Control Styling and
Data Bindingwhich will allow you to extend this application to view recipes
and search for recipes.
2. Launch Project |Test Solution to run the current version of the Recipe Box
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.
106
3. Try out the application in its current form. Notice that it lists a number
of recipes and allows you to select them.
We’ll walk through each of these tasks in great detail to give you a sample
a. Try selecting different recipes from the list using the mouse of how you would accomplish this in your own projects. The steps shown
and/or keyboard here will give you a complete and thorough view of how Expression Blend
can help you build a stylized interactive application.
b. Click Editin 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
c. In the next few tasks, you will be adding similar functionality to
contained within the folder for that task. To skip to Task 3, for example,
the View button, which currently does nothing.
open C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR05 -
RecipeBox \Task 3\RecipeBox\RecipeBox.sln.
d. Try to change a recipe using Edit, and notice that if you close
and reopen the application, your changes are still there.
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 dropping data fields onto the design surface.
7. Expand the DataModel node to see the functionality provided by the
C# application model.
a. SearchFilter (String) will be used later to add search This project already contains a data sourcewhich provides the functionality
functionality to the user interface. of loading and saving recipes, and filtering based on a search string. You
can explore the structure of that data source, or if you are familiar with
b. SelectedRecipe (Recipe) will be used in the next section to Visual Studio and C# you can open this project and explore the code
display, add or edit a particular recipe 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
107
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), some elements may not have a visual
representation. An example of this is a layout container whose primary
8. From the Objects view within the Interaction panel, expand
purpose is to arrange other elements properly.
MainUIGrid and select RecipeListBox.
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 Backcommand. 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-drop. When you are animating elements in Expression
Blend, you will use the attached Timeline.
108
9. Make the Properties panel visible. The Properties panel in Expression Blend provides a powerful, centralized
location where you can change the appearance and behavior of elements
a. Notice that the ItemsSourceproperty value is highlighted with within the design surface. Many aspects of element appearance and
an orange border. This indicates that a binding is being used to behavior are indicated by attributes which are adjustable here.
provide the value for this property.
In addition to specifying simple values, you can also assign and create
resourceshere, which are reusable values that can apply to many elements.
b. Click on the small orange dot to the right of ItemsSource value
to bring up the Property menu, and select Data Binding…
You can use system resourceswhich 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.
You can attach property values to data by a feature known as data binding.
Most properties can be driven from your data source, so that as the value
of the data source changes, your UI updates automatically. You can even
bind one property to another element within the design surface.
c. Notice that the Recipes (Array) value is highlighted and that

RecipeBook.Recipes is shown in the custom path entry field.
The Create Data Binding dialogallows you to specify and inspect a number
of options available while binding. Here, the Recipe data source
implements a property called Recipeswhich 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.
109
We’ll be exploring this in more detail over the course of this lab.
d. These indicate that the RecipeListBox is data bound

to a Recipesproperty 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 If you double-click an element within the Objects view, that element will
insertion point. become the insertion point. Newly added elements using any of the
creation tools will be placed within the insertion point.
The insertion point in Expression Blend indicates where newly created

elements will go by default.
2. Using the Layout tool, select Grid and double click to insert a new Grid
into MainUIGrid.
110
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.
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.
a. Rename this grid RecipeViewer by using the element context

menu brought up by right clicking in the Timeline panel
You can also use the ‘delayed click’ gesture to rename elements in the
Objects view, or use the Properties panel.
3. From the Properties panel, under Brushes select Background.

Choose a resource by clicking on the far right tab for Brush Resources.
111
4. Browse to the PaperSheetImage resource and select it
5. Resize the Grid using the resize handles so that the Grid takes up most
of the central area. The Brushes category in the Properties panel provides you with a way to
customize the visual appearance of elements. You can specify a solid
color, linear and radial 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.
By dragging the resize handles you can resize, rotate, skew or even move
the ‘relative center’ of an element. With the Selection tool active, you can
drag the element around 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:
6. Double click the RecipeViewer element in the Objects view to set the
insertion point.
112
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.
7. From the Data panel, browse to SelectedRecipe row and expand it.
8. Drag and drop the Name entry near the top of the RecipeViewer grid.
a. Choose Select a control to represent this data field, choose a

Label and click OK to accept defaults.
We will be inserting several new elements, and would like them to all be
logically grouped within our RecipeViewer grid.
b. Notice that the Label has taken its value from the first recipe’s By dragging and dropping rows from the Data panel, we can quickly create
name. new elements. Notice that where these elements go is determined by the
current insertion point.
113
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.
c. Adjust the font and size properties from the Text portion of the
Properties panel and reposition the element
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.
114
9. From the Layout tool, select StackPanel and draw a StackPanel
taking up all vertical space beneath the recipe Title, using the right half
of the horizontal space.
Now is your chance to be creative and use the resize handles and
Properties panel to customize an element.
Using the picture as a guide, find a font you like and position the element
as shown. You could also set the font to a Resource: this sample provides
you two resources which map to the fonts already in use elsewhere.
115
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 now want to display several fields, one after the other, to indicate the
12. From the Data panel, drag and drop the Ingredients (Array) onto the Ingredients and Steps and Notes for each recipe. By using a StackPanel
design surface over the StackPanel (just below the Ingredients text). layout container, these elements will automatically lay themselves out like
a list.
a. Choose to Select a control to represent this data field,

choose ItemsControl and accept the defaults here.
116
We’ll mix our hardcoded titles with fields populated from the data source.
For titles, a Label is an appropriate element to use, though you can also
use a TextBlock.
b. Reposition the list of ingredients by choosing Auto Size | Both
from the element context menu.
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 less functional ListBox. It does not allow you to select items
within it, nor does it provide any individual styling for each item.
c. Indent this list slightly by setting the Left Margin to 20 using

the Properties panel. ItemsControl simply lists each item, and that’s what we want here.
117
13. Double click the Text tool to create a new Label
a. Type Steps for the text
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.
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
15. Bring up the element context menu on this StackPanel and choose
Group Into | ScrollViewer.
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.
118
16. Select StackPanel from the Objects view.
a. Bring up the element context menu and choose Auto Size |
Both
Now we’ll create the heading for the second data list, Steps.
17. Find this StackPanel in the Objects view and double click to set the
insertion point.
119
18. Double click the Text tool to create a new Label
a. Type Notes for the text Once again we’ll use an ItemsControl to show the list of steps.
Notice that we are running out of space for our viewer!

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 In the running application, this will happen as well. We will solve this
choose Label and accept the defaults here. 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

120
ScrollViewerto your project and configure it to scroll a piece of content. In
this case we’ll scroll the list on the right.
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
21. Using the Control tool, select Button and create a Button by double
clicking on the tool itself
Now that our space issues have been solved, we can continue designing
the recipe viewer.
121
If you don’t have enough space at design time, you can always temporarily
resize the ScrollViewerto be larger. At runtime, it will be able to scroll its
content so this won’t be an issue.
22. Move this Button to the bottom center of the UI area using the
Selection tool
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.
23. Rename this button ViewRecipeFinished
122
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.
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 ScrollViewerand 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.
We’ll now add an ‘OK’ button so users can indicate that they are finished
123
viewing a particular recipe.
The Control toolprovides a list of commonly used controls. If you want a

more extensive list, you can try the Asset library which is just below it.
124
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.
125
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.
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 Notes
User Input
1. Select RecipeViewer from the Objects view In Expression Blend, there are a number of features which allow you to
126
a. Change the Visibility of this element to Collapsed using the create keyframedanimations. These animations can act as transitions
Properties panel. between states in your 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 between 0 and 100% so that the element (and all child
elements) become somewhere between transparent and fully opaque.
2. Click on the + in the first row of the Objects and Timeline panel to
create a new Timeline
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. Hiddenelements take up space. This is useful if you
a. Name this new timeline ShowRecipeViewer in the dialog. have a layout containerwhich 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.
127
3. By default you are now setting keyframes for time 0.
Notice that the Objects and Timeline panel has expanded. You can also
a. Using the Properties panel, set the Visibility to Visible
switch workspaces using F6/F7 or the Window menu.
You can see the keyframe schedulearea 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 modeuntil 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 properties to get there, you can click the ‘Record Keyframe’ button.
Whenever you change properties, keyframes will be automatically recorded
b. Click the Record Keyframe Button which will allow us to change for you so you won’t need to do this.
Opacity as well.
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 current time.
4. Change the time to 1s by dragging the time indicator to the 1, or typing

in 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% 128

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 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 controlswith 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
2. Select RecipeViewer using the Objects view a blank canvas for 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 RecipeVieweris hidden by default. Let’s

make it visible again.
3. Select [ScrollViewer] and decrease its height until the vertical
ScrollBar shows as 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.
129
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 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 ScrollViewercontrol. 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.
5. Select PART_VerticalScrollBar from the Objects and Timeline menu
In this case the ScrollViewer is composed of a Grid containing two

ScrollBars and a ContentPresenter. The ContentPresenter is a special
element which displays the Content of the ScrollViewer onscreen.
130
Template Binding is how the ScrollBars within the template affect scrolling
Task 4: Enabling Search Functionality Notes
1. Using the Objects view double click LayoutRoot to set the insertion In Expression Blend you can the drawing tools to create complex vector
point. shapes. You can also use image assets and assets imported from
Expression Design within your projects.
2. Using the Layout tool, choose Grid and double click to insert a Grid.
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
b. Position the Grid at the top right of the application as shown using a ‘layer’ if that concept is more familiar to you.
the Selection tool
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.
131
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.
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
6. Multiselect the two Rectangles using the Shift key in the Objects view.
132
7. In the Object menu choose Object | Combine | Unite
Expression Blend supports a number of Boolean operationswhich combine

multiple vector shapes. We’ll use Unite to create a shape which is rounded
on the bottom only.
8. In the Properties panel, under advanced Appearance, add a new

Drop Shadow BitmapEffect by bringing up the popup next to the
New button.
133
Windows Presentation Foundation also supports Bitmap based effects such
as blur, bevel and emboss. Because these effect occur per-pixel, they
should be used carefully as they consume processing power.
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
b. Set RadiusX/RadiusY = 0 and Stroke to No Brush
10. Using the Text tool, choose TextBox and draw a TextBox
Now let’s use a magnifying glass brush drawn in Expression Design. If you
134
are feeling ambitious you can try redrawing this within Expression Blend as
well.
We can use a Rectangle as a placeholder to pick up this resource.
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 Let’s add the TextBox which will be used to perform the search.
12. Select the Label and change the Foreground to light gray using the
Properties panel.
135
13. From the Properties panel under Appearance, bring up the Property
menu for Visibility and chose Data Binding…
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
a. In the left list, select RecipeDataModel
disappear when necessary.
b. Change Show Matching Types Only to Show All Properties
Labels and other UI elements can be placed within a TextBoxas 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.
c. In the right list, browse to IsSearchFilterEmpty and select it
With the Label in place, we’ll make it so that it’s hidden whenever the user
has typed a search string.
The data source has provided a property for that already, we need to bind
to this IsSearchFilterEmpty property using data binding.
136
d. At the bottom of this dialog, expand the advanced options, and
change the Value Converter to
BooleanToVisiblityConverter
137
e. Click Finish
14. From the Properties panel under Appearance, bring up the Property
menu for Opacity and chose Data Binding…
a. Switch to Element Property. In Scene elements, select

SearchTextBox
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.
b. Change Show Matching Types Only to Show All Properties
138
Let’s also make it so that it’s not visible whenever the user is about to type
c. Under Properties browse to IsFocused and select it text in to the SearchTextBox. We can check for IsFocused on this text box
to handle that.
d. Expand advanced options and change the Value Converter to

BooleanToOpacityConverter
139
e. Click Finish
15. With the Label selected, uncheck IsHitTestVisible.

It’s in the
advanced Common Properties, or use the search functionality to find
it.
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.
This BoolToOpacityConverter is written to make it so that the label has 0%

Opacity whenever IsFocusedis True. If you are curious as to how
ValueConverters are written, you can open
Controls\BoolToOpacityConverter.cs from this project.
140
16. Select SearchTextBox from the Objects view
17. From the Properties panel under Content, bring up the Property
menu for Text and chose Data Binding…
a. Under Data sources select RecipeDataModel
b. Under Properties, browse to SearchFilter and select it
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
141
Finally, when the user clicks on this Label, we’d rather give focus to the
TextBox. We can do this by causing the Label to ignore mouse event with
the IsHitTestVisible flag.
e. Click Finish
Let’s set up the SearchTextBox to link to the search string in the data
source.
In this case, we’d also like to update the data source itself whenever
someone types text into the TextBox. This is done using Two Way data
142
binding.
18. Choose Project | Test Projectand 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 reappears once it is cleared and focus is lost.
143
Now you should have a fully functional RecipeBox. Typing text into the
search field 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.
144

Ejemplo Con Expression Blend Manual 2

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ejemplo Con Expression Blend Manual 2

Caricato da

Copyright:

Formati disponibili

Designing Windows Applications with Expression Blend – Manual

A Button’s Life: Page 1

Color Swatch: Page 37

Branded Web Search Sample: Page 54

a. Exploring Expression Design

b. Drawing vector shapes using B-Splines

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

Let’s begin by opening a collection of vector-based icons that have been

11. Go to View | Zoom on Selection.

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

2. Click and drag your mouse to select all the icons.

7. Click Desktop, and then click Save.

10. In the upper right click the XAML Code tab.

13. Under Document Format click Canvas.

17. In the lower right click Export.

3. In the Create New Project dialog, for Name type “MyCustomButton”.

The ContentPresenter control allows us to host content inside as a layer on

21. Click Chrome and press DELETE.

34. In the Brushes palette click the Gradient Brush icon.

You can even make the arrow larger or smaller.

40. In the Appearance palette set StrokeThickness to 5.

56. Click one of the icons and press CTRL+C.

64. Close the Window application.

71. In the Brushes palette click the left color stop.

79. Press CTRL+C and CTRL+V.

83. Click the Window1.xaml tab.

84. Press CTRL+V.

2. Create a Custom User Control

3. Drawing vector shapes with Expression Blend

4. Adding a Data bound ListBox

7. Adding a highlight to your swatches

1) Launch Help | Welcome Screen

2) Open the Color Swatch sample

3) Press F5 to test the project

4) Close the sample application

6) In the Object and Timeline panel select the Window element

7) Add a radial background to the main Window

b. Select the Gradienttab and click on the Radial gradient button

TASK 2: Create a User Control

3) Add a rectangle using the rectangle tool

4) Right click on the rectangle and select Autosize | Fill

2) Select Colors.xml from C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR06 - ColorSwatch\

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

9) Clear the brush values for Background and BorderBrush

b. Click on the first tab to set the property to have No Brush.

a. Resize horizontally until the grid is as wide as the User Control

b. Resize vertically until you get around 40 pixel of height

b. Click on the button to center align

24) Go back To Window1.xaml by clicking on the document tab

b. Click on the Custom Controls tab

c. Select the ColorSwatchControl control

d. Draw it on the scene

b. Drag it so that it aligns with Ellipse in the User Control

31) Click OK to the Create Storyboard Resource dialog

36) Select just two of the animated controls.

45) Right click and launch Order | Bring To Front