Tải bản đầy đủ - 0 (trang)
A.1 Expression Blend’s tools and designers

A.1 Expression Blend’s tools and designers

Tải bản đầy đủ - 0trang




Microsoft Expression Blend for Windows Phone

Figure A.1 The Expression Blend user interface showing the Projects, Assets, Device, Properties, and

Objects and Timeline panels. The designer resides in the center of the workspace.

Some of the tools found in Expression Blend, such as the Projects tool, might be

familiar to users of Visual Studio, because the two products provide overlapping features. The following list describes the tools shown in figure A.1:

The Projects tool is similar to the Visual Studio Solution Explorer and shows all

the code and content files that are part of the application. References to external libraries and assemblies are also shown.

The Assets tool is similar to Visual Studio’s Toolbox and lists the various controls, shapes, layout containers, and behaviors that are available for use. Items

listed in the Assets Tool can be added to a page with a double-click or by dragand-drop.

The Device tool allows you to change the page orientation and the system

theme color used by the designer when displaying a page. The Device Tool also

provides the target device selector which allows you to choose whether the

application should be deployed to the emulator or a connected phone.

The Properties tool is similar to the Properties view in Visual Studio. The Properties tool allows you assign values to various control properties such as Fill,

Background, Height, or Width.

XAML and code documents are displayed by the designer or editor in the center of the workspace. The XAML editor supports three views—a visual designer,

a code editor, and a split design/code view.


Creating an application


At first glance, the Objects and Timeline view looks similar to Visual Studio’s

Document Outline view. But this useful tool provides several unique features

for managing animations, which we’ll demonstrate in a few pages.

Now that you’ve been introduced to Expression Blend’s tools, you’ll create a sample application.


Creating an application

Creating a new application in Expression Blend is nearly identical to creating an

application in Visual Studio. From either the splash screen or the file menu, selecting

the New Project option will display the New Project dialog box. The New Project dialog box, shown in figure A.2, prompts you for a project template, application name,

programming language, and Windows Phone SDK version.

Expression Blend provides five of the project templates provided by Visual Studio

for creating Silverlight applications and control libraries. You can’t use Expression

Blend to create Silverlight with XNA or background agent projects.

To start your sample application, create a new project using the Windows Phone

Application project template and name the application HelloBlend. Take a few minutes to explore Expression Blend and the tools you learned about in the previous section. Use the Objects and Timelines view to select the PageTitle TextBlock and

the Properties panel to change the text from page name to hello blend. Next, switch to the

Device panel, change the preview accent color to Green, and select the Windows

Phone Emulator as the run target. Finally, run the project by pressing the F5 key or by

selecting Run Project from the Project menu.

Figure A.2 Expression

Blend’s New Project dialog

box listing the Windows

Phone project templates





Microsoft Expression Blend for Windows Phone

Figure A.3 Changing the

ContentPanel from a Grid

to a Canvas


Adding a shape to the page

Now that you have a running application built in Expression Blend, you’ll use the

Asset tool to add an ellipse to the page. Then you’ll use the Properties view to assign a

new gradient brush to the ellipse so that it looks more like a ball.

Before you add the ellipse to the page, you

should change the ContentPanel from a Grid

container to a Canvas. The Objects and Timeline tool makes it easy to implement this change

with the Change Layout Type option on the context menu, shown in figure A.3.

Next, you’re going to add an Ellipse to the

ContentPanel using the Assets tool. Open the

Assets tool and select the Shapes category. You

can scroll through the list until you find

Ellipse, or you can type ellipse into the search

widget. The search widget quickly narrows down Figure A.4 The Assets view filtered to

the list and displays only matching items in the show only the Ellipse

Assets tool, as seen in figure A.4. With the

ContentPanel selected in the Objects and Timeline view, double-click Ellipse in the

Assets tool.

By default, the new Ellipse shape will be a circle, which is what you want. You’ll

simulate a 3D lighting effect using a GradientBrush. Select the newly added element by clicking on Ellipse in the Objects and Timeline tool. An object’s properties


Animating the ellipse


Figure A.5 Specifying the

Ellipse’s Fill using

the brush editor. The left

image shows the first

gradient stop with white

as the selected color.

The right image shows

the second gradient

stop with the


resource as the

selected color.

can be modified using the Properties tool, and in this case you want to change the

Fill property.

Changing the Fill property can be confusing the first time you use Expression

Blend’s brush property editor. First you want to click on the fill line in the editor, seen

in figure A.5. Next you want to specify a GradientBrush using the middle button in

the toolbar. Then you’ll specify a radial gradient using the button in the lower-left corner of the brush editor. The first gradient stop color will be white, whereas the second

gradient stop color will use the PhoneAccentColor resource.

If you’ve configured the brush correctly, the ellipse should look more like a ball,

with a whitish center and a solid color perimeter. You can check that you configured

the brush to use the theme color by changing the preview accent color setting in the

Device tool. Now try launching the application in the emulator—does the ellipse pick

up the theme color specified in the settings application?


Animating the ellipse

You now have a simple application that displays what appears to be a ball on the

screen. Your goal is to move the ball across the screen, bouncing off the edges as it

moves. You’ll implement the movement using Silverlight animation and storyboards.

Expression Blend makes it easy to create storyboards and animate controls with the

Object and Timeline tool.

You’ll use the Objects and Timeline tool to create a new storyboard, and then

add the bounce animations to the storyboard. Create a new storyboard by clicking

the New Storyboard button, shown in figure A.6, and entering the name bounceStoryboard in the Create Storyboard Resource dialog box.

Once a storyboard is open, the Objects and Timeline view changes to show a timeline with playback controls. Now you’re ready to record your bounce animation.

Select the Ellipse in the Object tree, and click the Record Keyframe button, shown in

figure A.7, to give your ball a starting point. Next move the playhead to the 1-second





Microsoft Expression Blend for Windows Phone

Figure A.6 Create a new storyboard by

clicking the New Storyboard button and

entering a name in the Create Storyboard

Resource dialog.

mark and drag the Ellipse to the bottom of the ContentPanel. Repeat the operation,

setting the playhead and ellipse position for the 2-and 3-second marks. The completed storyboard is shown in figure A.7.

If you run the application now, nothing is different than before you created the

bounce storyboard. The ball sits in the corner doing nothing. Next you’ll add a trigger

to play the animation when the user taps the screen.

Figure A.7

The Objects and Timeline tool with the complete bounce storyboard





Triggering an animation

To start an animation, a developer using Visual

Studio might subscribe to the Ellipse’s Tap event

and call the storyboard Begin method from code

behind. Expression Blend allows designers to perform the same task without writing code. Expression Blend makes this possible through a feature

named behaviors. Behaviors are pre-built components that use Silverlight attached properties to

bind to user interface controls and execute a predefined action.

You want the ball to bounce every time the

user taps on it, so you’ll use a behavior named

ControlStoryboardAction to start the bounce

storyboard you created in the last section. With

the Ellipse selected in the Objects and Timeline Figure A.8 Setting the properties for

the ControlStoryboardAction

tool, open the Assets tool to the Behaviors

category and double-click ControlStoryboardAction. A new node should now exist in the Objects and Timeline tool. Go ahead

and select the new node, and then open the Properties view. Figure A.8 shows the

Properties view for the ControlStoryboardAction.

You need to make changes to two of the ControlStoryboardAction’s properties.

First, change the EventName property to Tap. Next change the Storyboard property to

bounceStoryboard. Run the application now and tap on the ball on the screen. You

should now see the ball move around on the screen while the animation plays.



Microsoft Expression Blend is a powerful application development tool and we’ve just

scratched the surface in this appendix. Expression Blend provides support for custom

controls, design time data and view model support for the Model-View-ViewModel

(MVVM) pattern, and SketchFlow for rapid application prototyping. If you’d like to

read more about Expression Blend, check out Expression Blend in Action by Joel Cochran,

available from Manning Publications.

Microsoft provides tutorials, training videos, and starter kits on the Expression

website (see http://mng.bz/M2Ll).


appendix B

Silverlight and the

Extensible Application

Markup Language

What’s Silverlight? Silverlight is an implementation of Microsoft’s .NET Framework

that has been scaled down and tuned to build good-looking, interactive, and

responsive client applications. Silverlight includes the .NET Framework APIs needed

for client-side application features and strips out APIs not well suited for restricted

environments like the browser and Windows Phone. Silverlight application user

interfaces are designed with the Extensible Application Markup Language (XAML) and

its related Silverlight class libraries.

XAML was first introduced as part of the Windows Presentation Foundation.

XAML excels as a user interface markup language, separating the user interface

design from the code behind implementing an application’s business logic.

XAML not only defines WPF and Silverlight UIs, but is one of the options when

building WinRT applications for the upcoming Windows 8 operating system. If

you’re coming from a web development background, you can think of XAML as

similar to HTML, which you use to create UI for your web page. XAML is an

XML document that represents the hierarchical structure of an application’s

user interface.

This appendix serves as a quick introduction to XAML. We’ll cover basic UI layout and the available UI controls. We’ll move on to an introduction to the data

binding features built into Silverlight. We wrap up using DataTemplates to create a

user interface for a domain model object. Let’s start by examining the default

XAML generated when you create a new application with the Windows Phone



Silverlight and the Extensible Application Markup Language

Application project template. Figure B.1 shows a

screenshot of the application generated by the

project template.

The default application generates a page that

contains a Grid layout control, a StackPanel layout

control, and two TextBlocks. The XAML markup

for the form is shown in the following listing. We’ll

refer back to this listing several times in the next

few pages.


Figure B.1 A screenshot of the

default application

Listing B.1 XAML generated by the Windows Phone Application project template







Root element


Orientation="Vertical" >

Style="{StaticResource PhoneTextNormalStyle}"/>

Style="{StaticResource PhoneTextTitle1Style}"/>


The root of the XAML document is an element of type PhoneApplicationPage B. Elements in a XAML document must be matched with a class name from either the Silverlight class libraries or your application’s code. The root element also contains a Class

attribute that declares the full name of the C# class containing the code behind for

the user interface. The class named in the Class attribute must be derived from the

class used as the root element. In listing B.1, the class MainPage is derived from

the class PhoneApplicationPage.

You might have noticed that the root element uses the XML namespace phone. In

XAML, namespaces can be declared with an assembly name or with a URI. An example

of the URI version can be seen in the third line of listing B.1, declaring the x namespace.

The fourth line of the listing shows the assembly name version declaring the phone

namespace. The fifth line of the listing is the declaration for the Primer namespace,

which is part of the application and doesn’t need to specify an assembly name.




B Silverlight and the Extensible Application Markup Language

Most XAML documents you create for Windows Phone will derive from either

PhoneApplicationPage or from UserControl. Both PhoneApplicationPage and UserControl expect to have a single child control. In most cases the child control will be a

layout control derived from the Panel class.


Layout controls

Layout controls are containers of other controls and are responsible for automatically

positioning their children on the screen. The Windows Phone SDK includes three different layout controls named StackPanel, Grid, and Canvas.

The StackPanel control lays out its children in a horizontal or vertical stack,

depending on the value of its Orientation property. The StackPanel in listing B.1

specifies an orientation of Horizontal, which is the default value if an Orientation

attribute isn’t declared. A horizontal StackPanel stacks controls one on top of the

other and will ensure that all child controls have exactly the same width. A vertical

StackPanel stacks controls side by side and will ensure that all controls have exactly

the same height.

The Grid control lays out its children in a series of rows and columns. By default, a

Grid has only one row and one column. Additional rows and columns are specified

with the Grid.RowDefinitions and Grid.ColumnDefinitions properties, respectively. The Grid control named LayoutRoot in listing B.1 has two rows and a single column. The first row is given a height of Auto and uses as much height as needed. The

second row is given a height of *, which tells the Grid to give the row a height that fills

all of the remaining space. Child controls specify their row and column with Grid.Row

and Grid.Column attributes. For example, the Grid named ContentPanel specifies

that it should be placed in the second row. Row and column indexes are zero-based. A

control can span multiple rows and columns using the Grid.RowSpan and Grid

.ColumnSpan attributes. If a child control doesn’t specify its row and column values,

it’ll be placed in the first row and first column.

The Canvas control lays out its children using absolute positioning. The positions

of child elements are declared using Canvas.Left and Canvas.Top properties. If a

child doesn’t declare its position, it’ll be placed at coordinate (0, 0).


Interacting with Silverlight controls

Silverlight for Windows Phone contains many of the common controls you’d expect in

a user interface library. You should be aware that some of the controls present in WPF

and Silverlight for the browser aren’t supported on the Windows Phone. Check the

MSDN documentation for a full list of controls supported by Windows Phone.

Let’s take a look at how to declare a simple form with a few controls and how to

interact with the controls from code. The form will contain a TextBlock to display a

label, a TextBox to receive input from the user, and a Button:


Styles and resources


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

A.1 Expression Blend’s tools and designers

Tải bản đầy đủ ngay(0 tr)