• Save
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,963 views

My session at Microsoft TechDays10 Portugal.

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

Statistics

Views

Total Views
2,963
Slideshare-icon Views on SlideShare
2,939
Embed Views
24

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 24

http://www.ricardocastelhano.com 13
http://www.slideshare.net 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • - UX for Silverlight & 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&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) Developing silverlight 4 applications with expression blend 4 (30 Abr 2010) Presentation Transcript

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