Ricardo Castelhano<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />WUX213<br />ITech4All<br />ricardo...
>10 Years Working for a Web with Plugins<br />Adobe Flash Beta-Tester since CS3<br />“Silverlight’ing” since the Beginning...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
UX Tool (Silverlight & WPF)<br />XAML, VB & C# Editor<br />Integration with Traditional Design Workflow<br />Design-Driven...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
Import Your Own Artwork<br />Bitmap Artwork<br />Photoshop<br />Vectorial Artwork<br />Illustrator<br />Expression Design<...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
Layout Controls<br />Grid<br />Canvas<br />Viewbox<br />PathListBox<br />...<br />Data Controls<br />DataGrid<br />ListBox...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
Storyboards<br />VisualStateManager<br />FluidLayout<br />Transitions<br />It Don’t Have To Be Static<br />
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
VisualStateManager<br />CommonStates<br />FocusStates<br />LayoutStates<br />SelectionStates<br />...<br />What About My C...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
Behaviors<br />Conditional Behaviors<br />Bindable Properties<br />New Behaviors<br />CallMethodAction<br />FluidMoveBehav...
Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About M...
Sample Data<br />Blend-based XML<br />Custom XML<br />CLR DataObjects<br />Master-Detail Mode<br />Data Store<br />All My ...
Silverlight Website<br />
Conclusion<br />Integration with Design Tools<br />Controls and Controls and Controls and ...<br />Show Storyboards some L...
Conclusion<br />Integration with Design Tools<br />Controls and Controls and Controls and ...<br />Show Storyboards some L...
Other “Blend” Sessions<br />Introdução ao Silverlight 4<br />Dia 20 – Sala3.2 – 12:45<br />SketchFlow: Do protótipo à Prod...
Ricardo Castelhano<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />WUX213<br />ITech4All<br />ricardo...
Upcoming SlideShare
Loading in...5
×

Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)

2,168

Published on

My session at Microsoft TechDays10 Portugal.
PPTs are in english with comments on the slides in english as well.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,168
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • - UX for Silverlight &amp; WPF … and with some tricks even for Surface (XAML based as well)- XAML and C# Intellisense Code EditorFully integrated in the “traditional” designers workflow (Photoshop and Illustrator)- User Interactions “out of the box” and fully extensibleGreat integration with Developers Workflow. Blend and VisualStudio will share the same project files (versioning “made” easy)- Team Foundation Server integration … Blend was included in the Application Lifecycle Management - ALM
  • You may import PSD or AI files directly into BlendATTENTION: Photoshop has to be on RGB color schemeNEW in Blend4Faster PSD importsSome LiveEffects from Photoshop will be “Merged” with the selected Layer:Inner Shadow / Color Overlay / Outer Glow / Inner Glow / Gradient Overlay / Stroke / Bevel&amp;Emboss / Satin / Pattern OvelayThe rest of LiveEffects dont have support
  • Designers BEWARE with your experiments:Designers love to do visual experiments and never delete thoseBlend will generate XAML code and even if Visibility is “Collapsed” all that “trash” will be thereCanvasThe “weakest” Layout ControlIt will work similar to a Absolute Position DIV, therefore you have to sign a Canvas.LEFT and Canvas.TOP positioningGridWorks like a XHTML table, but with STEROIDS because it is much more powerfullViewboxExcellent for “out of the box” resizingsPeople coming from the “PRINT” or “FLASH” world must be carefull with the correct usage for each Layout ControlNEW in Blend4PathListBoxNow you may position your controls over a PATH or even animate those on that PATHShape Controls
  • Blend Storyboards are Time-BasedAdvantages:If your PC has a good CPU and GPU, your animation will perform smoothly ...If your PC has a poor CPU or GPU, your animation will perform sloopy ...BUT any of the situations above will perform on the right time, with the right duration...lets say 2seconds for example.Silverlight has more available types of animation, but it as to be “hardcoded” in XAML or CodeBehind (Frame-Based for example)On a “FromTo” animation you dont have to specify a starting point, just the end point is required. Therefore, you may call multiple Storyboards in sequence and your animation will have the starting point in the “actual” object positionAll Storyboards and Transitions have some EASE Functions to help perform some cool visual effects like Bounces and ElasticsNEW in Blend4“Out of the Box” Pixel Shader Effects“Out of the Box” Transitions EffectsBetter usage of the Storyboard, now its possible to select multiple keyframes with a mouse selection
  • VisualStateManager Engine (VMS) lets you edit “Visual States” of you ControlEasily create new “VisualStateGroups” and new “VisualStates”NOTE: There is no code involved !!NEW in Blend4For DataLayouts there are new VisualStates:BeforeLoadedAfterLoadedBeforeUnloaded
  • “Out of the box” pack of Interactions and BehaviorsBehaviors and Actions may be programed by Developers allowing Designers to implement those “things” where they want, whenever they needNo code involved for the Designer !!NEW in Blend4Conditional Behaviors – Behaviors that will perform a conditional test after the trigger, and if the test is true then performs the behaviorBindable Properties – Behaviors with Dependency PropertiesNew BehaviorsCallMethodActionFluidMoveBehaviorFluidMoveSetTagBehaviorInvokeCommandActionDataStateBehavior (DataStore)SetDataStoreValueAction
  • No need for “real data”, just use:Blend-based XML or your own Custom XMLOr create a Sample DataSet with you CLR DataObjectsEasyness for switching between SAMPLE and LIVE DataNEW in Blend4- Design-Time data from CLR Types- Design-Time Resources- New string formats in Sample Data- Data Store – keep track of your “client-side” variables
  • Import a PSD fileProject with W:766 H:800- Use a Viewbox to show ResizeShow the difference between Skinnable and StyleableShow how to create a Storyboard and trigger it with BehaviorsSample Data with a Collection with “Name”, “Price”, “Image” Change the Image Source folder (use your own images)Create a ListBox for this CollectionCreate a Template for the DataItemsCreate a Detail-View- Show how the PathListBox works with Sample Data - Create a Template for the “Template GeneratedItem”
  • Please provide feedback !!! That’s the only way to know what you would like to see on a future session about Blend and to improve myself as a speaker.Thank you.
  • Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)

    1. 1. Ricardo Castelhano<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />WUX213<br />ITech4All<br />ricardo.castelhano@itech4all.com<br />@RicCastelhano<br />http://www.ricardocastelhano.com<br />
    2. 2. >10 Years Working for a Web with Plugins<br />Adobe Flash Beta-Tester since CS3<br />“Silverlight’ing” since the Beginning<br />Blogger & Tweeterian <br />(XAMLPT / RIAPT / AUG / PontoNetPT)<br />Partner & Consultant @ ITech4All<br />Ricardo Castelhano<br />
    3. 3. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    4. 4. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    5. 5. UX Tool (Silverlight & WPF)<br />XAML, VB & C# Editor<br />Integration with Traditional Design Workflow<br />Design-Driven Interactivity<br />Developer Integration<br />TFS Support<br />Introduction<br />
    6. 6. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    7. 7. Import Your Own Artwork<br />Bitmap Artwork<br />Photoshop<br />Vectorial Artwork<br />Illustrator<br />Expression Design<br />Design in Blend<br />
    8. 8. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    9. 9. Layout Controls<br />Grid<br />Canvas<br />Viewbox<br />PathListBox<br />...<br />Data Controls<br />DataGrid<br />ListBox<br />...<br />How To Display My Content<br />
    10. 10. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    11. 11. Storyboards<br />VisualStateManager<br />FluidLayout<br />Transitions<br />It Don’t Have To Be Static<br />
    12. 12. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    13. 13. VisualStateManager<br />CommonStates<br />FocusStates<br />LayoutStates<br />SelectionStates<br />...<br />What About My Controls States<br />
    14. 14. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    15. 15. Behaviors<br />Conditional Behaviors<br />Bindable Properties<br />New Behaviors<br />CallMethodAction<br />FluidMoveBehavior<br />InvokeCommandAction<br />DataStateBehavior<br />...<br />Custom Behaviors<br />Interactions? YES, But With No Code Please!<br />
    16. 16. Introduction<br />Import Your Own Artwork<br />How To Display My Content<br />It Don’t Have To Be Static<br />What About My Controls States<br />Interactions? YES, But With No Code Please!<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />DEMO<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />
    17. 17. Sample Data<br />Blend-based XML<br />Custom XML<br />CLR DataObjects<br />Master-Detail Mode<br />Data Store<br />All My Data Will Be Dynamic And My Developer Is Working On That<br />
    18. 18. Silverlight Website<br />
    19. 19. Conclusion<br />Integration with Design Tools<br />Controls and Controls and Controls and ...<br />Show Storyboards some Love<br />Behaviors are Extensible<br />No Need to Wait for Your Live Data<br />
    20. 20. Conclusion<br />Integration with Design Tools<br />Controls and Controls and Controls and ...<br />Show Storyboards some Love<br />Behaviors are Extensible<br />No Need to Wait for Your Live Data<br />BE CREATIVE !!!<br />
    21. 21.
    22. 22. Other “Blend” Sessions<br />Introdução ao Silverlight 4<br />Dia 20 – Sala3.2 – 12:45<br />SketchFlow: Do protótipo à Produção<br />Dia 20 - Sala2.5 - 14:15<br />SketchFlow no Desenho de Interfaces Web<br />Dia 20 – Sala20/10 - 15:15<br />Utilizando SketchFlow na Construcção de sites em Silverlight<br />Dia 20 – Sala20/10 - 15:15<br />Dynamic Layout and Transitions for Silverlight4 with Blend4<br />Dia 20 – Sala2.5 – 17:00<br />Flash Skills Applied to Silverlight Design and Development<br />Dia 21 - Sala2.4 - 18:15 <br />Silverlight: Extensibility Framework + Behaviors<br />Dia 22 - Sala2.3 - 16:40<br />
    23. 23.
    24. 24.
    25. 25. Ricardo Castelhano<br />Developing Silverlight 4 Solutions with Expression Blend 4<br />WUX213<br />ITech4All<br />ricardo.castelhano@itech4all.com<br />@RicCastelhano<br />http://www.ricardocastelhano.com<br />

    ×