19

Rudi Grobler Session Code: WUX205

Embed Size (px)

Citation preview

Page 1: Rudi Grobler  Session Code: WUX205
Page 2: Rudi Grobler  Session Code: WUX205

Microsoft Expression Blend from a Developer's Point of View

Part 1Rudi Groblerhttp://dotnet.org.za/rudiSession Code: WUX205

Page 3: Rudi Grobler  Session Code: WUX205

Agenda

A lap around Expression BlendFinding features you know from Visual StudioExploring features unique to Expression BlendWorking with Visual Studio and Expression Blend in tandem

Silverlight vs. Windows Presentation FoundationLearning a few designer tricksCreating a real world user interface for an existing business application

Page 4: Rudi Grobler  Session Code: WUX205

What is Expression Blend?

User Interface design tool for WPF and SilverlightThe focus is on next-generation interactive user interfaces and user experiences

The tool covers the entire range of possible WPF/SL interfaces from desktop business applications to web experiences

The main focus of Expression Blend has traditionally been on designers

However, it turns out to be a great developer tool as well!

Page 5: Rudi Grobler  Session Code: WUX205

Expression Blend Versions and History

Expression Blend 1 – WPF design toolExpression Blend 2 – WPF and Silverlight 2.0Expression Blend 3 (preview) – WPF and Silverlight 3.0 (beta)My recommendation: Use Expression Blend 3 whenever you can!

I have been using Expression Blend 3 (beta) for all my WPF design needs and the product has already been very stable

Page 6: Rudi Grobler  Session Code: WUX205

Expression Blend and VS Similarities

Creating Projects based on templatesExpression Blend supports WPF and Silverlight templates only

Projects and SolutionsNew Source Control support in version 3.0

Design and Editor windowsBlend 3.0 supports code editing and IntelliSense

ToolboxProperties and events window

Page 7: Rudi Grobler  Session Code: WUX205

Expression Blend: The Familiardemo

Page 8: Rudi Grobler  Session Code: WUX205

Expression Blend and VS Differences

Richer visual UI editor in Expression BlendUI hierarchy windowStoryboards and TimelinesTrigger and Visual State supportResources (XAML)Design time dataSketchFlowAdobe integration

Page 9: Rudi Grobler  Session Code: WUX205

Expression Blend: New Featuresdemo

Page 10: Rudi Grobler  Session Code: WUX205

Blend and Visual Studio Together

Blend 2.0: Design in Blend, code in Visual StudioSource Control through Visual Studio

Blend 3.0:Source code editing is now supportedStill, for heavy duty coding (and debugging!) Visual Studio is the better choice

Even as a developer, I do all my visual UI editing in Expression Blend

Page 11: Rudi Grobler  Session Code: WUX205

Expression Blend & Visual Studiodemo

Page 12: Rudi Grobler  Session Code: WUX205

Some Real-World Tips

Create new projects in Visual StudioThe templates used by both tools are not identical

Test-run your applications from Visual StudioNo debugging support in BlendBetter error information in Visual Studio

Beware of having the same file open twiceSave changes before you switch to the other tool, to avoid accidental simultaneous editing

Page 13: Rudi Grobler  Session Code: WUX205

Differences Between WPF and SL

Expression Blend can be used for both WPF and Silverlight, and most things you know apply to both

The differences in the two technologies change the Blend experienceExample: Triggers vs. Visual StatesExample: Resource Dictionaries vs. Inline Resources

The two technologies move closer togetherVisual States are available in WPF (and supported by Blend) as an add-onSilverlight 3.0 supports Resource Dictionaries

Page 14: Rudi Grobler  Session Code: WUX205

Building a Real-World Application

This example uses an existing middle tier that runs as a production application

Note: The downloadable example provides a “fake” middle tier so you can easily run it on your systemNote: There are Silverlight and WPF versions

The example app shows a list of sports teams and the players rostered by each team

The goal of the example is to create a nice UI with a visual appearance that is both appealing and professional and suitable for a business application

Page 15: Rudi Grobler  Session Code: WUX205

Building an Applicationdemo

Page 16: Rudi Grobler  Session Code: WUX205

http://dotnet.org.za/rudiquestion & answer

Page 17: Rudi Grobler  Session Code: WUX205

Complete a session evaluation and enter to win!

10 pairs of MP3 sunglasses to be won

Page 18: Rudi Grobler  Session Code: WUX205

Related ContentBuilding Rich Business Clients in WPF (Brian Noyes)

What’s New in Microsoft Silverlight 3 (Eben de Wit)

Developing for Windows 7 (Lynn Langit)

Optimizing Your Application for the Windows 7 User Experience (Lynn Langit)

ViewModel and Application Patterns with Silverlight (Nikhil Kothari)Creating “real” devices (Rudi Grobler)

Windows Client Development Discussion (Rudi, Lynn & Tony)Sharing Code between your Microsoft .NET Framework Applications and Microsoft Silverlight (Stephen Forte)

Page 19: Rudi Grobler  Session Code: WUX205

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.