Post on 06-Apr-2018
transcript
8/3/2019 Expression Blend Manual 2
1/120
Designing Windows Applications with Expression Blend
Manual 2
A Buttons Life: Page 1
Color Swatch: Page 37
Branded Web Search Sample: Page 54
RecipeBox: Page 82
8/3/2019 Expression Blend Manual 2
2/120
1
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.
8/3/2019 Expression Blend Manual 2
3/120
2
In this HOL you will experience a Buttons 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 actu al fully working .NET button. Windows
desktop applications dont 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 visitwww.microsoft.com/expressionto 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 Designa. Exploring Expression Designb. Drawing vector shapes using B-Splinesc. Adding color to shapesd. XAML Export
2. Expression Blenda. Importing your graphic assets into Expression Blendb. Creating a standard looking Buttonc. Editing the Button templated. Customizing the appearance of your Buttone. Defining a rollover state using Property Triggersf. Inserting you Expression Design icons into your brand new button
http://www.microsoft.com/expressionhttp://www.microsoft.com/expressionhttp://www.microsoft.com/expressionhttp://www.microsoft.com/expression8/3/2019 Expression Blend Manual 2
4/120
3
TO DO TO KNOW
A. Getting Started1. Start Microsoft Expression Design from the Start menu or use the shortcut on the
Desktop
2. Maximize the application if needed.3. Go to File | Open.4. Go to C:\MIX HOLs\Expression Labs\Expression Blend HOLs\LEXPR01
DesignToBlend\5. Select Icons.design, and then click Open.
In the first part of this lab you will focus on two things: the drawing and editing features
of Expression Design that pertain to vector-based graphics; and how to export these
graphics to other formats such as bitmap-based formats (JPG, GIF, etc.) and XAML.
XAML is a new language that was created to allow designers and developers to
collaborate together on rich user interface experiences based on the WindowsPresentation Foundation (WPF).
Expression Blend is a perfect tool for designing interfaces that leverage XAML and WPF.
Expression Design fully integrates with Expression Blend, making it the perfect tool to
create all of the graphics needed for a stunning and functional user interface.
Lets 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.7. Go to View | Zoom on Selection. Notice that, unlike bitmap-based images, you can zoom in closely on vector-basedimages and they do not lose their quality.
8/3/2019 Expression Blend Manual 2
5/120
4
8. Press CTRL+ several times to zoom in on the icon. You can also see (and individually select) all of the paths that form the graphic.
9. Go to View | Actual Size.10. Click the mouse icon.11. Go to View | Zoom on Selection.12. Click on the white surface outside of the box that borders the image.
Feel free to select and zoom in closely on the other icons. When you are finished, the labwill proceed with the mouse icon.
You will now see how to create one of these icons.
The nice-looking mouse you see here was created by tracing a digitized photograph.
When you select the icon all of the paths that comprise it are made visible.
8/3/2019 Expression Blend Manual 2
6/120
5
13. Click the icon.B. Tracing a Photograph to Create a Vector-Based Graphic1. In the Layers pane, scroll down and find the Icon_Mouse layer, which will be
highlighted with a yellow bounding box.
2. On the left click the small eye icon to turn off the layer.Lets take a look at the photo that inspired this icon. First turn off the current layer and
then turn on the layer containing the photo.
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/2019 Expression Blend Manual 2
7/120
6
3. Click the small eye icon on the Mouse_TracePhoto layer.
4. Click the Mouse_TracePhoto layer to select it. You will see the yellow bounding boxappear around to this layer.
To create a vector-based image from a photo, begin by tracing the objects shape. Before
doing so, make sure that the layer on which the photo resides is locked so that you
dont inadvertently move it while tracing.
5. In the lower right corner, click the New Layer button.
6. Double-click Layer 9 and then type a more meaningful name such asMouse_TracePaths. (Make sure this layer is on above Mouse_TracePaths
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).
8/3/2019 Expression Blend Manual 2
8/120
7
7. In the upper left, click the pen icon.8. Click B-Spline. In the Toolbox you can see a collection of different tools that allow you to create and editvector paths. The top four are the traditional Bezier curve tools with which every designer
is familiar. The Pen tool lets you build Bezier paths by placing a series of nodes. Each
node or point has a control handle (or "tangent handle"), and by varying the length anddirection 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. Its a time
consumingthough fun!job to trace everything that comprises the final mouse icon
you have seen. You will at least see how to start the process.
9. In a white portion of the layer click around to practice with the B-Spline tool.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.
Notice that if you press the ALT key the curve is not interpolated but instead follows the
segments exactly. This allows you to make sharp corners.
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 firstpoint. When you get near the first point the cursor will change and the path will snap to a
closed shape.
8/3/2019 Expression Blend Manual 2
9/120
8
11. Press the A key to switch to Direct Selection mode, which allows you to change anyof 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 seehow this mode operates.
13. When done, double-click and then press DELETE one or more times to remove thepath.
14. In the upper right, click the box with the red slash through it (tooltip: None). Before tracing lets make sure the fill color is set to none. If set, fill colors get applied toareas bounded by a path even when the path is not closed.
15. In the Toolbox click the B-Spline icon.16. Starting in the lower right corner of the mouse photo, click to place points close to
the straighter areas of the mouses border, and slightly further from the curvy areas
(the distance allows the B-Spline curves to work their magic).
17. When you have completely encompassed the mouse, close off the path by clicking
With a little practice you can quickly create object traces.
Be careful only to single click the mouse. If you double-click the path will end (complete
itself).
8/3/2019 Expression Blend Manual 2
10/120
9
as close as possible to the first point you laid.
18. In the Toolbox click the top arrow icon (Selection tool).
19. Click on the white space outside of the bordered mouse area in order to deselect thepath 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.
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.
8/3/2019 Expression Blend Manual 2
11/120
10
21. If the path does not appear thick enough, in the upper right, double-click the Widthvalue and change it to a higher number, such as .5 (px), then press ENTER.
22. Ensure that the Stroke icon is selected, and then click on the red square to its right.
23. Click on the white space outside of the bordered mouse area in order to deselect thepath.
When you again deselect the path you can probably now see it more easily.
8/3/2019 Expression Blend Manual 2
12/120
11
24. Time permitting you may trace the other main lines of the mouse. Again, press ALTfor sharp corners like you see here.
The next steps, however, unveils a completed layer of paths that comprise the mouse
icon. So there is no need to continue tracing if time and interest do not permit.
25. Click the eye icons for both the Mouse_TracePhoto and Mouse_TracePaths layers toturn them off.
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.
This layer shows all the paths that comprise the mouse icon. Currently it looks like a wire-
frame graphic because no fill colors have yet been applied to the shapes.
8/3/2019 Expression Blend Manual 2
13/120
12
28. Click anywhere outside of the mouse and then click the outer border near the tail.29. In the upper right, click the larger left-most rectangle (tooltip: Fill), and then click the
gradient square to its right.
30. In the gradient control, click the left color stop and then click on the left of thecustom palette, about midway vertically.
To apply a gradient fill to the main shape, click on the outer border and then choose a
gradient fill color, adjusting the first color stop to a medium dark gray instead of black.
8/3/2019 Expression Blend Manual 2
14/120
13
31. In the Toolbox click the shaded arrow and then select Gradient Transform.
32. Click on the middle of the left side and drag across to the right side.
Lets 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.
8/3/2019 Expression Blend Manual 2
15/120
14
33. In the Toolbox click the top arrow icon (Selection tool).34. Click anywhere outside of the mouse.35. Click the lower right portion of the larger regions path.
36. Press and hold SHIFT, then click the smaller, gray path in the upper left.
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 (opacity of only 60% instead
of 100%).
Feel free to continue to select other regions and fill with colors and opacities of your
choice.
8/3/2019 Expression Blend Manual 2
16/120
15
37. In the upper right click the white square to apply a white fill color.38. Double-click the Opacity value, type 60, and then press ENTER.
39. Click the eye icon for the Mouse_Paths layer to turn it off.40. Click the eye icon for the Icon_Mouse layer to turn it on.
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 each of the pre-madeicons.
C. Exporting Vector-Based Images into XAML Format1. Go to View | Fit to Screen.2. Click and drag your mouse to select all the icons.3. At the bottom click the arrow in the Align button, and then select BottomEdges.
You will now learn how to export vector-based images as other image formats.
But first, organize the icons that appear to be randomly placed on the layer.
4. Click the arrow in the Distribute button, and then select To Horizontal Center. Theyshould now look like this:
Notice that the white space between the icons is not evenly distributed. You can correct
that with the Distribute option.
8/3/2019 Expression Blend Manual 2
17/120
16
5. Go to File | Export |6. Select the XAML file type7. Click Desktop, and then click Save.8. In the Xaml Export dialog, click and drag the icons to re-center them.9. Move the mouse wheel forward and backward to zoom in and out.10. In the upper right click the XAML Code tab.
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, Icons.xaml, is actually created.
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 wheel, or by right-clicking andselecting the menu option.
The XAML code is visible by clicking the XAML Code tab. This is the XML-based
representation of the icons.
11. Click the Graphics tab.12. Click the circle next to each of the two main menu items on the right, exposing their
sub-menus.
13. Under Document Format click Canvas.
These controls allow you manipulate the export process.
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.
14. Click Resource Dictionary.15. Scroll through the thumbnails across the bottom, clicking them to view the full
image.
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 like Windows Explorer
when in Filmstrip mode.
This is a great export method because it allows you to share the library with other
8/3/2019 Expression Blend Manual 2
18/120
17
designers or developers, who can then easily reuse these assets in a WPF project.
16. Click Canvas.17. In the lower right click Export. For this lab youll use the Canvas method.
Clicking Export creates the Icons.xaml file on the Desktop. Its now time to use Expression
Blend.
D. Creating a Custom .NET 3.0 Button Using Expression Blend1. Start Expression Blend from the Start menu or use the shortcut on the Desktop
called WPF Expression Blend
2. Go to File | New Project.3. In the Create New Project dialog, for Name type MyCustomButton.4. For Location browse to the Desktop, then click OK.
You will now import the XAML file you just generated, and then create some 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 create great-looking
user interfaces.
Creating a project gives you an empty workspace on which you can start laying out
different elements.
5. In the upper right, right-click the root project element (MyCustomButton) andselect Add Existing Item.
The first task is to import the XAML-based icons you just created.
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.
8/3/2019 Expression Blend Manual 2
19/120
18
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.9. Feel free to click and drag the icons, zoom in or zoom out, etc.
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.
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 the single XAML file.
Closing the Results palette gives you more workspace. The TAB key controls the visibility
of all palettes.
12. Above the main palette click the Window1.xaml tab.13. In the Toolbox, click and hold the Button icon to expose the other UI elements, then
click Button.
Switch to the other XAML file in the project to create a new button. The Toolbox contains
numerous .NET 3.0 user interface controls.
NOTE: There are other even easier and faster methods to create a Button in Expression
8/3/2019 Expression Blend Manual 2
20/120
19
Blend but for the purpose of this HOL we will take you through one of the methods
which will allow you to interact with a wider range of concepts within the tool.
14. Press and hold the SHIFT key, then on the white design surface click and drag tocreate a square button that is 125 units long (as determined by the dynamic
numbers along each side).
Pressing and holding the SHIFT key keeps the length and width proportional as you size
it. Without the SHIFT key you would likely end up with a rectangle.
15. In the Toolbox click the Zoom icon.16. On the design palette click the button three times to zoom in.17. Notice the Window palette on the left.
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 a really cool looking
button.
The XAML document hierarchy is visible in the Window palette. This shows that the
button resides on a LayoutRoot control, which in turn is contained in a Window.
8/3/2019 Expression Blend Manual 2
21/120
20
18. Right-click the button and go to Edit Control Parts (Template) | Edit a Copy. Editing the template means that any button instances created from this template willshare the same characteristics. This is very useful for creating multiple buttons that look
alike except for perhaps the image and/or text on them. You edit a copy of the template
because the original template is part of the WPF.
19. In the Create Style Resource dialog, for Resource name type GelButton01, and thenclick OK.
This dialog allows you to set a resource name for one the button and define 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 palette). Each
of these hierarchical itemsTemplate, Chrome and [ContentPresenter]comprise the
button. No longer are buttons isolated entities, as they were in the past. Its now a
collection of WPF controls. This means that you now have much more control over the
buttons behavior and appearance.
The Template control comes directly from the WPF. Its your buttons base class, as it
were, providing the buttons core functionality. (This is why you only edited a copy of thetemplate.) Think of the template as the bodiless soul or essence of the button.
The Chrome control is the buttons body. It is what provides the buttons 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,
graphicseven other buttons! This allows you to create complex nested controls for rich
user interface experiences.
20. Click [ContentPresenter] and press CTRL+X to cut and save the control to memory. The Chrome control is actually not required; and because it is a bit ugly, delete it after
8/3/2019 Expression Blend Manual 2
22/120
21
21. Click Chrome and press DELETE. first cutting its child ContentPresenter control.All that is left is the Template control, visible by the yellow border.
22. In the Toolbox double-click the Grid icon.
23. The main palette should now appear as a green box inside the yellow box:
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.
24. In the Template palette double-click Grid to open it inside the Template control inthe main design palette.
25. In the Toolbox, click and hold the Rectangle icon to expose the other shapes, thenselect Ellipse.
The Ellipse tool is what enables you to create a button in the shape of a circle.
When done, you can paste the ContentPresenter that was cut from the Chrome control
into the Grid control.
8/3/2019 Expression Blend Manual 2
23/120
22
26. Press and hold SHIFT, then, on the main design palette, click and drag on the Grid tocreate a circle that fills the Grid.
27. In the Template palette click Grid and press CTRL+V to paste the ContentPresentercontrol into the Grid control.
28. If at this time you do not see positioning guides emanating from the Button text,go to Tools | Options, Artboard, check Use grid layout mode, and then click OK.
Grid layout mode provides extra visual cues to help you in your design work.
29. In the upper right click the Properties tab.30. Below, in the Layout palette, click into each Margin field and change the value to 0. The numbers in the positioning guides indicate the distance of each side of theContentPresenter control from the Grid control. You may be able to see that currently the
ContentPresenter control is not big enough to contain the graphics you created.
Setting the margins to zero makes the ContentPresenter control the same size as its
parent Grid control.
8/3/2019 Expression Blend Manual 2
24/120
23
31. In the Layout palette, for HorizontalAlignment click the Center (second) icon to itsright.
32. For VerticalAlignment click the Center (second) icon to its right.However, the Button text now appears in the upper left. You can correct this changing
the horizontal and vertical alignment properties.
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.34. In the Brushes palette click the Gradient Brush icon.
35. Click the right color stop and then above it select a dark blue color from the palette.36. Select the left color stop and then select a lighter blue color from the palette.37. Slide the right color stop to the left about one-third to increase the dark fill.
Its now time to give the ellipse a nice gradient color.
8/3/2019 Expression Blend Manual 2
25/120
24
38. In the Toolbox click the Brush Transform icon.
Click and drag the arrows head and tail to below and center of the frame.
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 arrows head or tail.
You can even make the arrow larger or smaller.
Try this and see how it affects your gradients look, then try to end up with somethinglike you see in this screenshot (the arrow position might be quite differentjust try and
make the buttons appearance similar).
8/3/2019 Expression Blend Manual 2
26/120
25
39. In the Brushes palette, click Stroke and then select a bright yellow from the colorpalette.40. In the Appearance palette set StrokeThickness to 5.
Stroke is the ellipses border. The button will look better if you change th is, too.
41. In the Toolbox click the Ellipse icon.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 ovals edge until the move cursor appears, then drag it up and tothe right to move it next close to the yellow border.
Another cool thing you can add is a highlight effect in the form of a white oval with a low
opacity.
8/3/2019 Expression Blend Manual 2
27/120
26
48. Go to Object | Path | Convert to Path.49. In the Toolbox click the Direct Selection icon (or press the A key).
50. Click and drag the vertices to make the highlight look more like this:
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 to look more realistic.
This will give a better gel appearance.
8/3/2019 Expression Blend Manual 2
28/120
27
51. In the Objects and Timeline palette click the Scope Up icon. You are done with modifying the buttons template (copy), so you scope up to theWindow 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 andbehave.
The button does not yet have any behaviors associated with it, so previewing at this
point does not show you much.
8/3/2019 Expression Blend Manual 2
29/120
28
53. Close the Window application.54. Click the Icons.xaml tab.55. Press the V key to ensure you in Selection mode.56. Click one of the icons and press CTRL+C.57. Click the Window1.xaml tab.58. Press CTRL+V. Dont 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.
You can easily copy one of the icons in the projects other XAML file with a simple copy
and paste action.
With the icon in the button document you can place it onto the button and then resize it
to fit properly.
8/3/2019 Expression Blend Manual 2
30/120
29
60. 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.
When the icon snaps into place, it may appear to clip part of the graphic. But when you
resize it the entire icon will be there.
8/3/2019 Expression Blend Manual 2
31/120
30
61. Click one of the corners of the blue border around the icon and drag inward toresize the icon so that it fits properly inside the button.
8/3/2019 Expression Blend Manual 2
32/120
31
62. Press F5.63. Hover your mouse over the button.64. Close the Window application.65. Right-click the button and go to Edit Control Parts (Template) | Edit Template.
You can see that the custom button is looking much better. It does not, however, act like
a button yet. So its time to add some nice behavioral effects.
In this case you dont edit a copy of the template because the template in the project
now is already a copy.
66. In the upper left, in the Triggers palette, click + Property Trigger.
67. Click and drag the bottom palette border to expose all of its menu options.
To add a behavior you combine a Property Trigger with a logic statement.
8/3/2019 Expression Blend Manual 2
33/120
32
68. In the Activated when group, in the right dropdown menu, select IsMouseOver.
69. Click into the menu just below and to the left, type True, and then press ENTER.
This statement could be expressed in English as something like Whenever the property
of this button called MouseOver is True, make the main ellipse glow a little, and the
button border to thicken.
70. In the Template palette click Ellipse.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.
To create the highlight effect simply lighten the left-most gradient color.
8/3/2019 Expression Blend Manual 2
34/120
33
73. In the Appearance palette change the StrokeThickness value to 8. The button shouldnow look something like this:
74. Press F5 to preview the button.75. Hover your mouse over it to test the rollover effect. It should look something like
this screenshot, which shows both button states:
This is just a very simple example of rollover behavior. Expression Blend has many other
effects from which to choose.
8/3/2019 Expression Blend Manual 2
35/120
34
76. Close the Window application.77. Click the Scope Up icon.
78. If needed press CTRL and the (minus) key to zoom out from the workspace so thatsix 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:
The last task is to create a button for each of the icons you exported.
8/3/2019 Expression Blend Manual 2
36/120
35
81. Click the Icons.xaml tab.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 boxappears and the boxs message reads ALT-drag to place into [Button].
87. While still holding the mouse button down, press ALT, release the mouse button,
Make sure before releasing the mouse button and ALT key that the text above the
segmented box contains the word [Button], not [Canvas].
8/3/2019 Expression Blend Manual 2
37/120
36
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 toresize the icon so that it fits properly inside the button.
89. Repeat these steps to use all of the remaining icons, resulting in something like this:
90. Press F5 to preview the buttons.91. Hover your mouse over each button to see the rollover effect.92. Close the Window application.93. Close Expression Design and Expression Blend. If prompted to save changes click No.
You can again preview the buttons and see that they all share the same templated look
and behavior.
This completes the lab!
8/3/2019 Expression Blend Manual 2
38/120
37
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.
8/3/2019 Expression Blend Manual 2
39/120
38
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. Its 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/expressionto 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 started2. Create a Custom User Control3. Drawing vector shapes with Expression Blend4.
Adding a Data bound ListBox5. Customizing your ListBox
6. Animate your color swatches7. Adding a highlight to your swatches
http://www.microsoft.com/expressionhttp://www.microsoft.com/expressionhttp://www.microsoft.com/expression8/3/2019 Expression Blend Manual 2
40/120
39
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 sample3) Press F5 to test the project
a. Look at the ColorSwatch in this sample. This is the control well replicate in this tutorial4) Close the sample application
8/3/2019 Expression Blend Manual 2
41/120
40
5) In Blend Launch File | New Project and create and Standard Application project and call it ColorSwatchControl6) In the Object and Timeline panel select the Window element
7) Add a radial background to the main Windowa. In the Properties panel look under the Brushes properties and select Backgroundb. Select the Gradient tab and click on the Radial gradient button
c. Select each gradient stop and set a nice color for the backgroundd. From the toolbar in the left select the Brush transform tool and use it to create a faux light effect
8/3/2019 Expression Blend Manual 2
42/120
41
TASK 2: Create a User Control
1) Launch File | New | User Control and name it ColorSwatchControl.xaml
2) Resize the User Control element to the size of the color swatcha. 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 | Fill5) Using the Brushes properties in the Properties panel add a Radial gradientto the rectangles fill6) Set the rectangles stroke to No Brush by clicking on the first tab of the Brushes properties
8/3/2019 Expression Blend Manual 2
43/120
42
7) Apply rounded corners to the rectangle by using the Corner Radius adornersa. In Properties panel under Appearance properties the values for RadiusX and RadiusY should be around22
8) Add an ellipse using the ellipse tool to the bottom right of the User Controla. 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 Rectangle10) Launch the Object | Combine | Subtract command to combine the paths11) Using Properties panel name the path PaletteChrome
8/3/2019 Expression Blend Manual 2
44/120
43
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) element4) Drag the color (Array) to the scene and select the option to create a new ListBox
5) Choose the default binding to ItemsSource
8/3/2019 Expression Blend Manual 2
45/120
44
6) In the Databinding dialog:a. Change the container for children to be a Gridb. Uncheck the value: (String) item
7) Right click on the ListBox and select Autosize | Fill8) In the Properties panel Add Top and Bottom margins to the ListBox
a. In the Layout properties click and drag the margin value (example use Top=30 and Bottom=50).9) Clear the brush values for Background and BorderBrush
a. In the Brushes properties click on the desired property (either Background or BorderBrush)b. Click on the first tab to set the property to have No Brush.
10) Right click on the ListBox in the timeline and select Edit other templates | Edit generated Items (ItemTemplate) | Edit Template11) 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 Controlb. Resize vertically until you get around40 pixel ofheight
8/3/2019 Expression Blend Manual 2
46/120
45
13) Using the Objects and Timeline Panel select the TextBlockelement14) Make the TextBlockHorizontal alignment centered.
a. In the Layout properties of the Properties panel Identify the HorizontalAlignmentpropertyb. Click on the button to center align
15) Double click on the Grid in the Objects and Timeline panel to make it the active insertion point.16) Using the Rectangle tool draw a rectangle inside the grid under the TextBlock17) Using the rectangle adorners. Make the rectangle have rounded edges.
18) In the Properties Panel select click on the Fillpropertys marker and select Data binding
8/3/2019 Expression Blend Manual 2
47/120
46
19) Click on the Explicit Data Context tab20) In the Fields list expand the swatches data source and select value : (String)21) Click Finish
8/3/2019 Expression Blend Manual 2
48/120
47
22) Launch File | Save under the Main menu23) Launch Project | Build Project under the Main menu24) Go back To Window1.xaml by clicking on the document tab25) Click on the Selection tool in the main toolbar26) Create an instance of your User Control in the scene
a. Click on the Asset Library button in the toolbarb. Click on the Custom Controls tabc. Select the ColorSwatchControl controld. Draw it on the scene
8/3/2019 Expression Blend Manual 2
49/120
48
TASK 3: Animate the Color Swatches
27) Click on the Selection tool from the main toolbar28) Change the pivot point of the control
a. Click on the center adorner of the User Controlb. Drag it so that it aligns with Ellipse in the User Control
29) Copy and Paste three more copies of the User Controla. With the control selected hit CTRL+C once and CTRL+V three times
8/3/2019 Expression Blend Manual 2
50/120
49
30) Click on the new timeline button in the Objects and Timeline panel
31) Click OKto the Create Storyboard Resource dialog
32) Select three of the controls and create a keyframe at time zeroa. Multi-select the elements by holding the SHIFT keyb. You can create a keyframe by clicking on the new keyframe button net to the timeline drop down
33) Type 0:00.2 in the time box next to the new keyframe button34) Create another keyframe35) From the Transform properties in the Properties panel set a rotation angle of 30 degrees
36) Select just two of the animated controls.37) Type 0:00.4 in the time box next to the new keyframe button38) Create another keyframe39) From the Transform properties in the Properties panel set a rotation angle of 65 degrees
8/3/2019 Expression Blend Manual 2
51/120
50
40) Select just one of the animated controls.41) Type 0:00.6 in the time box next to the new keyframe button42) Create another keyframe43) From the Transform properties in the Properties panel set a rotation angle of 90 degrees
44) In the Objects and Timelines panel select the User Control that was not animated45) Right click and launch Order | Bring To Front
8/3/2019 Expression Blend Manual 2
52/120
51
46) Click the play button the timeline to test your animation within Blend47) Test your application by pressing F5
TASK 4: Add a highlight path to the User Control
1) In Objects and Timeline panel select Default from the timeline drop down to exit animation mode
2) Select the [ColorSwatch] in the Objects and Timeline panel3) Right click and launch Edit Control
8/3/2019 Expression Blend Manual 2
53/120
52
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 point6) Select the Pen tool in the main toolbar7) Draw a path the rectangle
a. Click on the position indicated as the first point in the picture belowb. For point #3 click in the position indicated in the picture below then drag to get a curvec. After creating point #5 click again on top ofpoint #1 to close the path
8) Select the path called PaletteChrome and press CTRL+C to make a copy of it. Then press CTRL+V to paste it9) Holding the CTRL key select the highlight path (created in step 7 of this task) and launch Object | Combine | Intersect10) In the Brushes properties in Properties panel select the first gradient stop and set the Alpha value to bezero11) 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%
8/3/2019 Expression Blend Manual 2
54/120
53
13) Launch File | Save14)
Launch Project | Build Project
15) Press F5 to test the application
8/3/2019 Expression Blend Manual 2
55/120
54
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 canunleash 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.
WPF d E i Bl d ff id f i t f t l l t l t l f t d t i E ith thi t f t l
8/3/2019 Expression Blend Manual 2
56/120
55
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/expressionto download a Trial version of any of the Expression products.
The concepts you will go through in this Expression Blend HOL are:
Expression Blend
1. Exploring the prototype web search application2. Creating the pagination control3. Creating and using an animated loader control4. Integrating the pagination control into your application
T k 1 E l i th t t b h li ti
http://www.microsoft.com/expressionhttp://www.microsoft.com/expressionhttp://www.microsoft.com/expression8/3/2019 Expression Blend Manual 2
57/120
56
Task 1: Exploring the prototype web search application
Launch Expression Blend from the Start menu or use the shortcut on the Desktop called WPF
Expression Blend
1. File menu | Open Project
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.
Projects: A project is a collection of files that get compiled into an
executable (or a control library) when the project is built. In the case of
this sample, we have two projects: 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 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 thebusiness 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
3. Hit F5 (Project menu | Test Project) to run the application. This will launch the desktopexecutable for the application.
8/3/2019 Expression Blend Manual 2
58/120
57
4. In the search box, type Mix Microsoftand hit Enter5. 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 ofsearch results. This is the first control we will be creating inside Expression Blend.
8/3/2019 Expression Blend Manual 2
59/120
58
7. Note that as you move from page to page, an asynchronous search happens where a request issent to a web service. To give feedback to the user about the delay, we have included an
animated loader control. This is the second control we will be creating inside Expression Blend.
8. Close the running application.9. In Expression Blend, right click on (Solution LiveSearch (2 projects)) in the Project panel and Expression Blend and Visual Studio share the same project and solution
hit Edit Externally formats and hence a project created in Blend can be opened in Visual
8/3/2019 Expression Blend Manual 2
60/120
59
hit Edit Externally.
10. Microsoft Visual Studio is launched. Choose the second radio button (Load projectnormally)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.
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 inVisual Studio to test applications.
13 Close Expression Blend
8/3/2019 Expression Blend Manual 2
61/120
60
13. Close Expression Blend.Task 2: Creating the pagination control
1. Launch Expression Blend.2. File menu | Open project3. 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 Microsoftand 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 OKUserControls: 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 customizethe look of a control. Use a Template when you quickly want to change
the visual aspects of a control. Use a UserControl if you want to add new
functionality of extend the functionality of a control, and at the same time
define the visuals for that control.
10. Choose the Selection tool. Click on the top of the grid panel in the blue highlighted area toadd a column guide. Repeat 2 more times to create a total of4 columns.
Grid: A Grid panel is the most flexible layout control available in
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
8/3/2019 Expression Blend Manual 2
62/120
61
11. Press the control key and select the 4 columns by clicking as shown below.
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 LayoutType menu to change to a different panel.
8/3/2019 Expression Blend Manual 2
63/120
62
12. Switch to the Properties tab. For the Width property, select Pixel in the drop down list. For theWidth property, enter29. This will create 4 columns that are 29 pixels wide.
13. Select UserControl in the Object view.
14. In the Property panels Layout properties, set the Height of the UserControl to 20.
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.
8/3/2019 Expression Blend Manual 2
64/120
63
15. In the Property panels Layout properties, set the Width of the UserControl to Auto by clickingthe button shown in the figure.
16. Zoom into element we just changed the bounds on by using the Zoom tool. . Switchback to Selection tool after you are done.
17. Select the Button tool. Right click on the tool (as shown below) to get the options on variouselements you can create using this tool.
8/3/2019 Expression Blend Manual 2
65/120
64
18. Draw a Button into each of the 4 columns.
19.
Multi-select all 4 buttons in the Object view of the Timeline pane using the Shift key.20. In the Timeline Object view, Right click | Auto Size | Fill. This will result in each button taking
up all available space in the column and row the Button is contained within.
21. Deselect all the buttons. Edit menu | Select None.22. Let us customize the look of one of these buttons. In a paging control, the button in the first
column is supposed to be the Initial Page button.
23. Right click on this Button | Edit Control Parts (Template) | Create Empty.
Resource management in Expression Blend: Resource management
lets you create and reuse resources across your application, and between
applications. Practically anything can be a resource in your application
brushes, colors, margins for layout, styles and templates, etc. The
Resource pane in Expression Blend supports a variety of operations
move resources across files or change the scope of their usage, rename
and delete resource, edit them, and apply them by simply dragging them
8/3/2019 Expression Blend Manual 2
66/120
65
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.
onto an element.
Resource Dictionaries are XAML files that solely contain resources, and
references to other Resource Dictionaries. They allow for sharing of
resources across projects and applications, as well as an easy way to add
theme support to your applications.
Border Control: A layout control that lets you add a single child element.A Border control also lets you specify a CornerRadius in such a way that
each corner of the control can have a different Radius.
8/3/2019 Expression Blend Manual 2
67/120
66
26. Double click on the Grid in the Object view to make it the insertion point (active element). Youwill 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 theBorder tool. Double click on the Border tool to create a Border element inside the Grid.
28. In the Property panels Brush properties, select the Background property, select Solid Colorbrush, and give a background color for example, Red.
8/3/2019 Expression Blend Manual 2
68/120
67
29. In the Property panel, find the Appearance properties, and for the CornerRadius property,enter a value of3,0,0,3. This will result in the top-left and bottom-left corners of the Bordercontrol 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.
32. Exit the template editing mode by hitting the Scope up button in the Object view to return to
8/3/2019 Expression Blend Manual 2
69/120
68
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 theResource pane and expand PageControlStyles.xaml.PageControlStyles.xaml is a XAML file
that contains a number of pre-created styles.
8/3/2019 Expression Blend Manual 2
70/120
69
34. Drag and drop PagePreviousButtonStyle from the Resource pane into the button in thesecond column. For the popup that is presented, select Style.
35. Drag and drop PageNextButtonStyle from the Resource pane into the button in the thirdcolumn. For the popup that is presented, select Style.
36.
Drag and drop PageLastButtonStyle from the Resource pane into the button in the fourthcolumn. 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 (SolutionLiveSearch (2 projects)) in the Project panel and choose Edit externally. This will open the
solution in Visual Studio for editing. As before, 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.
38. Switch back to Expression Blend. Double click on PagingControlTestCode.cs. This will result inthe code file being opened inside Visual Studio for editing.
Commands: Commanding is an input mechanism in Windows
Presentation Foundation (WPF) which provides input handling at a more
semantic level than device input. Examples of commands are the Copy,
Cut, Paste operations found on many applications.
8/3/2019 Expression Blend Manual 2
71/120
70
39. The custom control we are creating exposes a number of properties that you would normallyexpect 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. Whenthis command is fired by the UI, among other things, the CurrentPage property of this
custom control is set to a value of 1 if the TotalResults property has a positive value.
b. PreviousPageCommand: The command to move to the previous page in the resultset. 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 correspondingCommand such that whenever the button is clicked, the Command is invoked.
41. Select the button in the 3rd column. This is the button that corresponds to the gesture ofmoving to the next page when browsing a result set.
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 Binding
Data binding in Expression Blend: Expression Blend has rich support for
binding to a variety of data sources: XML files, any arbitrary data object,
or any element in the scene. The Data pane in Blend provides you with
support to drag-n-drop data binding data sources to an element in the
scene, or to create new elements that will display the data.
XML Data Source: A local or remote XML file that can supplyli i i h d i XML f Y XML
8/3/2019 Expression Blend Manual 2
72/120
71
44.
In the data binding dialog, choose the second tab Element Property since we are trying tobind to a property exposed by this control.
45. In the tree on the left, choose UserControl. In the tree on the right which lists all the matchingproperties on the custom control we are creating, choose the NextPageCommandproperty
and click Finish.
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: Anobject that contains public properties and collections to which
you can bind your target properties.
Element binding: Binding to any arbitrary property of anyelement in the scene. The simplest example would be a sliderbar control that is bound to the width of a rectangle. Moving the
slider bar would scale the rectangle larger and smaller.
8/3/2019 Expression Blend Manual 2
73/120
72
46. We are done with attaching the page next behavior. We will skip attaching the remainingbehaviors 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.xamlby clicking on the close
button corresponding to the document. Click Yes to save your changes.
Test the application by pressing F5 (Project | Test Project). The application works, but still does not
support the paging behavior since we have not integrated the control we just created. Close the running
application.
Task 3: Integrating the pagination control into your application
1. Open SearchResultsControl.xaml from the Project pane.2. Open the Library tool and switch to the Custom Controls tab.
3. Select PagingControlTest in the list.
8/3/2019 Expression Blend Manual 2
74/120
73
4. Double click on the control (as shown in the figure below) to insert PagingControlTest.
5. If the Property panel has the search field filled with a value, clear the value.
6. In the Property panel under Layout, change the HorizontalAlignmentand VerticalAlignment
properties to Center. This ensures that the control remains center aligned no matter how tall
and wide the parent control is
8/3/2019 Expression Blend Manual 2
75/120
74
and wide the parent control is.
7. For the Row property in Layout, change the value to 1. This ensures that thePagingControlTest 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 MixMicrosoft). 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.
8/3/2019 Expression Blend Manual 2
76/120
75
10. Delete the selected line. Uncomment the line below the selected line, i.e.
Becomes
11. Switch back to the design view as shown below.
8/3/2019 Expression Blend Manual 2
77/120
76
Test your application by hitting F5. Perform a search (say Mix Microsoft), and click on the next page
button. Voila! The control you just created is now talking to, and browsing a live data set. The other
buttons dont 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 usethis control in SearchResultsControl.xamlso 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 thepath element in the timeline.
8/3/2019 Expression Blend Manual 2
78/120
77
4. Click the + button in the Object view of the Timeline panel to create a new animation. ClickOK on the dialog presented to you (which you can use to name your animations meaningfully).
We will create an animation that infinitely animates the path in 360 degree rotations.
5. Move the play-head in the timeline to 0.5 seconds.
6. Expand the Transform category in the Property panel and switch to the Rotation tab.7. Enter 360 for the Angle property.
8/3/2019 Expression Blend Manual 2
79/120
78
8. To loop the animation infinitely, expand to the Angle property in the Object view of theTimeline panel.
9. Right click on the property in the timeline tree and choose Edit Repeat Count.
10. Click the Set to forever button to loop the animation infinitely and click OK.
11. Test the animation by clicking the Play button in the timeline. Note that the path rotates by 360degrees once and then stops.
12. Switch out of the animation mode by selecting Defaultin the Timeline pane.
8/3/2019 Expression Blend Manual 2
80/120
79
13. We will now use this control. Open SearchResultsControl.xaml in the Project panel by double-clicking.
14. Select the Gridtool 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 | Fill17. Rename the Grid control we just inserted to SearchingControlHost
8/3/2019 Expression Blend Manual 2
81/120
80
18. Switch to the listing of all events available for this control in the Property panel.19. For the DataContextChangedEvent, double click inside the text box next to it. This will switch
your focus into Visual Studio. You will notice that an event handler is automatically created for
you.
20. Copy the code indicated in the file and paste over the event handler that Blend generatedfor you, i.e.
Replaceprivatevoid SearchingControlHost_DataContextChanged( object sender,
DependencyPropertyChangedEventArgs e)
{
}
Withprivatevoid SearchingControlHost_DataContextChanged( object sender,
DependencyPropertyChangedEventArgs e)
{
if (searchResultView != null)
{
searchResultView.PropertyChanged -=
searchResultView_PropertyChanged;}
searchResultView = e.NewValue asSearchResultView;
if (searchResultView != null)
{
searchResultView.PropertyChanged += new
System.ComponentModel.PropertyChangedEventHandler(searchResultView_PropertyChanged);
}
}
privatevoid searchResultView_PropertyChanged( object sender,
Event handling inside Blend: Windows Presentation Foundation (WPF)
controls expose a very rich set of events that users of the controls can
respond to in their applications. While WPF and Blend provides you with
the ability of adding no-code interactivity (for example, starting an
animation when a button is clicked), you can also use event handling in
the traditional way of calling a method upon the occurrence of the event.
In Blend, when you add an event handler, if Microsoft Visual Studio is
installed on your machine, the appropriate project / solution is opened
inside VS and the event handler added to the right code-behind file. This
provides for a great experience leveraging the strengths of both tools
the rich design surface available inside Blend, and the powerful code and
debugging features of VS. If you dont 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.
System.ComponentModel.PropertyChangedEventArgs e)
{
if (e PropertyName == "IsSearching")
8/3/2019 Expression Blend Manual 2
82/120
81
if (e.PropertyName == IsSearching )
{
if (searchResultView.IsSearching)
{
SearchingControlHost.Children.Add( newSearching());
}
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 tomorrows rich Windows client experiences.
8/3/2019 Expression Blend Manual 2
83/120
82
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.
8/3/2019 Expression Blend Manual 2
84/120
83
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 visitwww.microsoft.com/expressionto download a Trial version of any of the Expression products.
The concepts you will go through in this Expression Blend HOL are:
Expression Blend
1. Understanding the RecipeBox project2. Creating the Recipe viewer using Layout panels, Databinding and UI controls3. Creating an Animated Transition in Response to User Input using Timelines and Triggers4. Customizing a ListBox control5. Enabling a Search functionality using Databinding and a Value Converter (provided by a Developer)
http://www.microsoft.com/expressionhttp://www.microsoft.com/expressionhttp://www.microsoft.com/expressionhttp://www.microsoft.com/expression8/3/2019 Expression Blend Manual 2
85/120
84
Getting Started: Understanding the RecipeBox Project Notes
Run Expression Blend from the Start menu or use the shortcut on the Desktop called
WPF Expression Blend
1. Open the RecipeBox.sln project from C:\MIX HOLs\Expression Labs\Expression BlendHOLs\LEXPR05 - RecipeBox\Getting Started\RecipeBox\RecipeBox.sln
2. Launch Project |Test Solution to run the current version of the Recipe Box
3.
Try out the application in its current form. Notice that it lists a number of recipes andallows you to select them.
a. Try selecting different recipes from the list using the mouse and/or keyboardb. Click Edit in the running application to see an editable list of the ingredients.c. In the next few tasks, you will be adding similar functionality to the View
button, which currently does nothing.
d. Try to change a recipe using Edit, and notice that if you close and reopen theapplication, your changes are still there.
RecipeBox is an application written in C# which loads a set of recipes from an XML file
and displays them using the Windows Presentation Foundation. WPF controls can be
given customized appearances using a feature known as Control Styling. Those styled
controls still retain the default windows behavior, which allows you to (e.g.) select
items in this list by using the arrow keys.
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 Binding which
will allow you to extend this application to view recipes and search for recipes.
In addition, you will create animated transitions and cause them to occur in response
to user events. Finally, well 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 Editfrom the running application.
In Task 2, youll cause that display UI to appear and disappear as the user interacts
with the application.
In Task 3, youll reskin the WPF ScrollBar so that it looks more like our themed app.
In Task 4, you will add search functionality to the app.
Well walk through each of these tasks in great detail to give you a sample of how you
would accomplish this in your own projects. The steps shown here will give you a
complete and thorough view of how Expression Blend can help you build a stylizedinteractive application.
If you wish to skip ahead to a particular task, you can open the project contained
within the folder for that task. To skip to Task 3, for example, open C:\MIX
HOLs\Expression Labs\Expression Blend HOLs\LEXPR05 - RecipeBox \Task
3\RecipeBox\RecipeBox.sln.
4. Close the running RecipeBox application5. Ensure the file MainWindow.xaml is open in Expression Blend.
Lets begin by trying out the application and exploring it in Expression Blend.
8/3/2019 Expression Blend Manual 2
86/120
85
6. In the Project panel, look for the Data panel which shows you the structure of the datasources in this application.
7. Expand the DataModel node to see the functionality provided by the C# applicationmodel.
a. SearchFilter (String) will be used later to add search functionality to the userinterface.
b. SelectedRecipe (Recipe) will be used in the next section to display, add oredit a particular recipe
8. From the Objects view within the Interaction panel, expand MainUIGrid and selectRecipeListBox.
The Data panel in Expression Blend allows you to add, remove, and browse the
structure ofdata sources. You can also create or attach data to UI by dragging and
dropping data fields onto the design surface.
This project already contains a data source which provides the functionality 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 Visual Studio and C# you can
open this project and explore the code directly if youre 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, theres no need to
do anything more than dragging and dropping on to the design surface.
By simplifying the process of creating UI from a data source, Expression Blend
facilitates a workflow involving designers and developers.
In Expression Blend, the Objects viewprovides 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 purpose is to arrange other elements properly.
Because of this, you may find it more convenient to select certain elements using the
Objects viewrather 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 Backwardor Send to Back
command. You will also see this element move up and down in the Objects view.
The Objects viewalso 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.
8/3/2019 Expression Blend Manual 2
87/120
86
9. Make the Properties panel visible.a. Notice that the ItemsSource property value is highlighted with an orange
border. This indicates that a binding is being used to provide the value for
this property.
b. Click on the small orange dot to the right ofItemsSource value to bring upthe Property menu, and select Data Binding
c. Notice that the Recipes (Array) value is highlighted and thatRecipeBook.Recipes is shown in the custom path entry field.
The Properties panel in Expression Blend provides a powerful, centralized location
where you can change the appearance and behavior of elements within the design
surface. Many aspects of element appearance and behavior are indicated by
attributes which are adjustable here.
In addition to specifying simple values, you can also assign and create resources here,
which are reusable values that can apply to many elements.
You can use system resources which allow you to pick up colors and sizes from the
current theme so that your application looks more like the Windows standard. Of
course, many controls already do this by default for you.
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 anotherelement within the design surface.
The Create Data Binding dialog allows you to specify and inspect a number of options
available while binding. Here, the Recipe data source implements a property called
Recipeswhich is a list of Recipes. 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
Newbutton within the application) the ListBox control will update to show the new
item automatically due to this binding.
Well be exploring this in more detail over the course of this lab.
8/3/2019 Expression Blend Manual 2
88/120
87
d. These indicate that the RecipeListBox is data bound to a Recipes property onthe data model. Click Cancel to return.
Task 1: Creating the Recipe Viewer Notes1. Find the MainUIGrid element in the timeline and double click to set the insertion point.
2. Using the Layout tool, select Grid and double click to insert a new Grid intoMainUIGrid.
If you double-click an element within the Objectsview, that element will become the
insertion point. Newly added elements using any of the creation tools will be placed
within the insertion point.
The insertion pointin Expression Blend indicates where newly created elements will go
by default.
This can cause interesting effects, for example, if you place elements within a
StackPanel, they will, by default, lay themselves out one after another for you.
This can also provide a way for you to organize your project. If a new Gridelement is
placed, which takes up most of the design surface, it is very similar to the concept of a
L f d i E i D i
8/3/2019 Expression Blend Manual 2
89/120
88
a. Rename this grid RecipeViewerby using the element context menu broughtup by right clicking in the Timeline panel
3. From the Properties panel, under Brushes select Background. Choose a resource byclicking on the far right tab for Brush Resources.
Layerfound in, e.g. Expression Design.
Well now create a new Grid called RecipeViewer which will hold the UI we create in
this task.
Well set it up to look like a sheet of paper.
You can also use the delayed click gesture to rename elements in the Objects view, or
use the Properties panel.
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.
4. Browse to the PaperSheetImage resource and select itB d i th i h dl i t t k th l ti
8/3/2019 Expression Blend Manual 2
90/120
89
5. Resize the Grid using the resize handles so that the Grid takes up most of the centralarea.
6. Double click the RecipeViewer element in the Objects view to set the insertion point.
7. From the Data panel, browse to SelectedRecipe row and expand it.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 andclick OKto accept defaults.
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:
Whether you choose to use these guides throughout the lab is your preference, but
you might like to try out Snapping to snaplines as shown above.
We will be inserting several new elements, and would like them to all be logically
grouped within our RecipeViewer grid.
By dragging and dropping rows from the Data panel, we can quickly create new
elements. Notice that where these elements go is determined by the current insertion
point.
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.
8/3/2019 Expression Blend Manual 2
91/120
90
b. Notice that the Labelhas taken its value from the first recipes name.
c. Adjust the font and size properties from the Text portion of the Propertiespanel 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.
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.
8/3/2019 Expression Blend Manual 2
92/120
91
9. From the Layout tool, select StackPanel and draw a StackPanel taking up all verticalspace beneath the recipe Title, using the right half of the horizontal space.
10. Double click this StackPanel in the Objects view to set the insertion point11. From the Text tool, select Label and double click to create a Label.
a. Type Ingredients for the text
Well now want to display several fields, one after the other, to indicate the
Ingredients and Steps and Notes for each recipe. By using a StackPanel layoutcontainer, these elements will automatically lay themselves out like a list.
Well 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.
Notice that you automatically begin editing the text when this element is created
8/3/2019 Expression Blend Manual 2
93/120
92
12. From the Data panel, drag and drop the Ingredients (Array) onto the design surfaceover the StackPanel (just below the Ingredients text).
a. Choose to Select a control to represent this data field, chooseItemsControl and accept the defaults here.
b. Reposition the list of ingredients by choosing Auto Size | Both from the
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, well 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.
ItemsControlsimply lists each item, and thats what we want here.
element context menu.
Auto Size provides a convenient shortcut to cause items to take up all available space
or size to content In this case the ItemsControl will size to content vertically and take
8/3/2019 Expression Blend Manual 2
94/120
93
c. Indent this list slightly by setting the Left Margin to20 using the Propertiespanel.
13. Double click the Text tool to create a new Labela. Type Steps for the text
14. From the Data pane, drag and drop the Steps (Array) onto the design surfaceover the StackPanel just below the Steps Label.
a. Choose to Select a control to represent this data field, chooseItemsControl and accept the defaults here.
b. Reposition the list of steps by choosing Auto Size | Both from the elementcontext menu.
c. Indent this list slightly by using the left resize adorner
or size to content. In this case, the ItemsControl will size to content vertically and take
all available space horizontally.
Now well create the heading for the second data list, Steps.
Once aga