How To Express Your Creative Self With Windows Presentation Foundation And Silverlight
-
Upload
guest83d3e0 -
Category
Economy & Finance
-
view
112 -
download
1
description
Transcript of How To Express Your Creative Self With Windows Presentation Foundation And Silverlight
![Page 1: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/1.jpg)
Design To BlendDale G. JonesDirector of Creative DesignIdentityMine, Inc.
![Page 2: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/2.jpg)
Session Prerequisites
Microsoft Expression Design http://www.microsoft.com/expression/products/overview.aspx?key=design
Microsoft Expression Blend http://www.microsoft.com/expression/products/overview.aspx?key=blend
Adobe Fireworks http://www.adobe.com/products/fireworks/
FW to XAML Exporter http://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html
![Page 3: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/3.jpg)
Session Objectives and Agenda• Reduce fear about designing for WPF.• Show real world workflow from concept to XAML.• Provide a brief overview of the tools I use.• Get Creative Designers excited about WPF &
Silverlight.
![Page 4: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/4.jpg)
Who Am I?
• Dale JonesDirector of Creative DesignIdentityMine, Inc.
I lead a team of Creative Designers that build exciting solutions on new Microsoft UX Platforms (WPF & Silverlight).
• Designing for the web (8 years)• Designing for WPF (2.5 years)
![Page 5: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/5.jpg)
Where I Work
![Page 6: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/6.jpg)
Why Do We Need Designers?
• Users are expecting better application experiences.
• Developers are excellent at making it work, but tend to overlook the visual details of an application.
• The best applications are developed when there is collaboration between Designers & Developers.
![Page 7: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/7.jpg)
What’s In It For You?
• With WPF, it is possible to maintain design integrity throughout the application development process.
• Your applications can be taken further than in past technologies.
• Developers are now a Designer’s best friend!
![Page 8: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/8.jpg)
Lets Talk Process
![Page 9: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/9.jpg)
New Process Ideas
![Page 10: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/10.jpg)
It Starts With The Team
Designer
graphics, media,
color, UX, UI
Developerdata, logic, code
![Page 11: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/11.jpg)
But Wait A Second…
Designer
graphics, media,
color, UX, UI
Developerdata, logic, code
?layout,
animation,events, markup,
integration
![Page 12: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/12.jpg)
The Team With An Integrator
Designer
graphics, media,
color, UX, UI
Developerdata, logic, code
Integratorlayout,
animation,events,
integration
![Page 13: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/13.jpg)
The Team & Tools
![Page 14: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/14.jpg)
What Ties Us Together?
<XAML>
![Page 15: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/15.jpg)
XAM L XAM L
XAM L
![Page 16: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/16.jpg)
These Roles Are Rigid
• I am a designer and love to play with markup, where do I fit in?
• Our company is small, we can’t staff this way. What do we do?
![Page 17: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/17.jpg)
Roles Reflect Project Responsibilities• The tasks to build a successful application don’t
change based on the people performing the tasks.
• One person may have to share role responsibilities to accomplish all project tasks.
• Defining tasks and roles before project starts gives a better chance of project success.
![Page 18: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/18.jpg)
I Am A Designer
For the purpose of this presentation I am going to be the designer, and show you how Designers work with Integrators and Developers at IdentityMine.
![Page 19: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/19.jpg)
I Am Assuming…
That you have a basic understanding of:- Windows Presentation Foundation- Expression Design- Expression Blend- Adobe Fireworks CS3- Basic XAML
Understanding these tools/technologies are my keys for “Designing To Blend”.
![Page 20: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/20.jpg)
What This Session Is Not
• A complete discussion about the WPF Platform• Extensive XAML Overview
• Custom controls• Resource Dictionaries• Styles• Templates
![Page 21: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/21.jpg)
Expression Design
• Prototyping and Composition Design.• A few nice features that other design programs
don’t have.• Very nice XAML exporter.
• Lets go take a look.
![Page 22: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/22.jpg)
![Page 23: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/23.jpg)
Expression Design Examples
• Roxio Central Vista Technology Preview• Microsoft Dynamics Sure Step• LSTV
![Page 24: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/24.jpg)
![Page 25: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/25.jpg)
![Page 26: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/26.jpg)
![Page 27: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/27.jpg)
![Page 28: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/28.jpg)
Expression Design Walkthrough• Creating a new file• Finding Palettes• Setting up preferences• Working with the tools• Open file and export some XAML
![Page 29: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/29.jpg)
Adobe Design Tools
• Adobe Photoshop – Great design tool, however no way to export XAML.
• Adobe Illustrator – Has a XAML exporter, but I don’t use Illustrator for application design.
• Adobe Fireworks CS3 – We have a winner!
![Page 30: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/30.jpg)
Adobe Fireworks CS3
• Fireworks has its roots in web and RIA design.• It is an outstanding tool to develop vector based
graphics.• Fireworks integrates bitmap graphics very well
into its design surface.• Easy transition for existing Photoshop users.
![Page 31: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/31.jpg)
![Page 32: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/32.jpg)
Building Design Comps in Fireworks• Fireworks is an outstanding tool to design
application UI for client approval.• It allows for designer to separate UI design into
“Pages”.• Pages contain their own layers set.• This allows designers to design exact “states” of
the applications and export for client approval.• Once that approval has been given, Fireworks
exports XAML assets.
• This is a great time saver over other tools/platforms.
![Page 33: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/33.jpg)
Adobe Fireworks CS3 Examples• Aspiring Architects• CSS
![Page 34: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/34.jpg)
![Page 35: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/35.jpg)
![Page 36: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/36.jpg)
![Page 37: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/37.jpg)
![Page 38: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/38.jpg)
These examples are ok, but how do I get XAML out of this?
?
![Page 39: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/39.jpg)
Fireworks to XAML Panel
Extension for Fireworks built by Infragistics
Download it here:http://www.adobe.com/devnet/
fireworks/articles/fw_xaml_panel.html
Lets see it in action
![Page 40: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/40.jpg)
Export Something
![Page 41: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/41.jpg)
Export Settings – Output Tab
• Output Tab Settings• Export Images – I don’t export
images from Fireworks here. • Fill Textures (using images) – I
tend to stay away from this.• Pattern Fills (using images) – I
try to stay away from this.• Bitmap Effects – not a good idea,
hurts app performance• Text Options – Exporting Text
works pretty well. Exporting text on a path should be converted to Paths.
![Page 42: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/42.jpg)
Export Settings – XAML Options• XAML Options Tab Settings
• Grid or Canvas – depends on how you need your XAML. Silverlight XAML needs Canvas export.
• Convert Rectangles to Borders – most of the time this is checked.
• Element Names – Good idea to name layered groups.
• Export Fills As Resources – Unchecked - Usually I set up my resource dictionaries before I export from Fireworks.
![Page 43: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/43.jpg)
Expression Blend
• Draw and assemble design assets.• Build up layout structure.• Bind to data.• A whole lot more.
• Lets go take a look.
![Page 44: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/44.jpg)
![Page 45: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/45.jpg)
Expression Blend
• Creating a new project• Finding Palettes• Introduction to layout tools• Working with the built in controls• Bring in Exported XAML
![Page 46: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/46.jpg)
Getting XAML into Blend
• The purpose of compositing design elements in Fireworks/Design is the ability to export XAML pieces.
• Know what to export and what to rebuild in Blend.
![Page 47: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/47.jpg)
XAML Composition in Blend
• Layout First – look at your design comps and decide which panels to use to hold your design elements together.
• Grid, Canvas, StackPanel, etc.
• Once you understand basic layout, start inserting some exported XAML.
![Page 48: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/48.jpg)
Can I Just Use Blend?
• Blend is extremely powerful and capable of doing most design tasks.
• My creative process utilizes a Design program first, this allows me to collaborate with clients without thinking too much about the implementation of XAML
• I have found it easier to work in the design tool I am familiar with and then composite XAML in Blend.
• Work with what feels right to you, but still gets the job done.
![Page 49: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/49.jpg)
What Now?
• As a Designer, you should be pretty excited about the possibilities of WPF.
• As a Developer, you should be excited that you don’t have to mess with so many design tasks.
• The next step is to find an equally excited people and start building some beautiful applications!
![Page 50: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/50.jpg)
Looking For More Info?
• Visit the TechEd Sessions of my co-workers.• Josh Wagoner
• WPF : Beyond Styles & TemplatesNext Session in Room 112
• Lessons Learned : Designer/Developer Workflow in WPF and SilverlightThursday at 9am in this room (Tent 1)
• Robby Ingebretson
• ZAP! WHAM! KAPOW! : The Next Generation of Online Comic Book Reading in WPFThursday at 1:30pm in this room (Tent 1)
![Page 51: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/51.jpg)
Got Questions?
• Hopefully I have answers…
![Page 52: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/52.jpg)
Thanks For Coming
Email: [email protected] Site: http://gobigdale.wordpress.comWork Site: www.identitymine.com
![Page 53: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/53.jpg)
Resources
• Microsoft Expression Designhttp://www.microsoft.com/expression/products/overview.aspx?key=design
• Microsoft Expression Blendhttp://www.microsoft.com/expression/products/overview.aspx?key=blend
• Adobe Fireworks CS3http://www.adobe.com/products/fireworks/
• Fireworks to XAML Exporterhttp://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html
![Page 54: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/54.jpg)
Resources - Continued
• Technical Communities, Webcasts, Blogs, Chats & User Groupshttp://www.microsoft.com/communities/default.mspx
• Microsoft Learning and Certificationhttp://www.microsoft.com/learning/default.mspx
• Microsoft Developer Network (MSDN) & TechNet http://microsoft.com/msdn http://microsoft.com/technet
• Trial Software and Virtual Labshttp://www.microsoft.com/technet/downloads/trials/default.mspx
• New, as a pilot for 2007, the Breakout sessions will be available post event, in the TechEd Video Library, via the My Event page of the website
MSDN Library
Knowledge Base
Forums MSDN
Magazine User Groups
Newsgroups
E-learning Product
Evaluations
Videos Webcasts V-labs
Blogs MVPs Certification Chats
learn
support
connect
subscribe
Visit MSDN in the ATE Pavilion and get a FREE 180-day trial of MS Visual Studio Team System!
![Page 55: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/55.jpg)
Complete your evaluation on the My Event pages of the website at the CommNet or the Feedback Terminals to win!
![Page 56: How To Express Your Creative Self With Windows Presentation Foundation And Silverlight](https://reader033.fdocuments.net/reader033/viewer/2022051400/54c833734a7959a26d8b45d9/html5/thumbnails/56.jpg)
© 2007 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only.MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.