1 / 44

Expression Blend 4 – deep dive

Learn how to improve collaboration between developers and designers using XAML, Blend, and the MVVM pattern. Explore separation of logic and presentation, design-time experiences, and sample data creation.

ouida
Download Presentation

Expression Blend 4 – deep dive

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Expression Blend4 – deep dive Christian Moser User Experience Architect Zühlke Engineering AG www.wpftutorial.net

  2. Microsoft’s vision for XAML (2006) “…XAML rocks because designers can work in tandem with developers…” “…A byproduct of XAML's expressivity and comprehensiveness is true separation of user interface and business logic. “ “…using Blend, a designer can access the full expressivity of XAML – layout, graphics, controls, templating and styling, animations, data binding, and basic 3D.”  http://windowsclient.net/wpf/white-papers/thenewiteration.aspx

  3. A new way of collaboration

  4. Interactive Designer (2006)

  5. Expression Blend (2008)

  6. Expression Studio

  7. The ideal collaboration Developer Designer • Connector to backend & business logic • Provides data and commands to UI • Creates a basic user interface • Improves the interaction by arranging and replacing controls • Creates (or imports) the visual style

  8. Real world collaboration problems • The features of Blend (XAML) are too limited. Code is required to build the desired interaction. • The classical way of UI programming (using code behind) is not flexible enough. • The designer knows too less about Silverlight or WPF or software architecture. • What is a control template, dependency property or trigger? • Where to place resources?

  9. SampleProject digitalworld.

  10. The developer’s part for a working collaboration:Separation of Logic and Presentation

  11. How to separate logic and view • The model must not know about the view • Using DataBinding is the best way to synchronize data between the view and the model • Binding to the DataContext is very convenient, since it’s the default source. • The DataContext is inherited from parent to child • There is only one DataContext • To access multiple objects you need to aggregate them to one «facade».

  12. Model-View-ViewModel II DataContext

  13. Advantages of the MVVM pattern • The ViewModel defines a clear data contract for the view • Through Properties, Lists and Commands • Designers can use the contract to create sample data or binding hints • Controls can easily be replaced without touching code • Developers can test against the ViewModel without creating the view (using UnitTests).

  14. Demo

  15. Designtime vs. RuntimeExperience

  16. Typical design time issues • At runtime • At designtime •  Wrong size •  No data

  17. At design time • UserControls are not embedded in a parent view • Width and Height are not set • The root-element constructor is not called • Root Element is replaced by the designer • ViewModel is not created • Controls behave different • No mouse and keyboard events • Design time extensions loaded

  18. Design time attributes xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup- compatibility/2006" mc:Ignorable="d"

  19. Design width and height <UserControl xmlns="http://schemas.microsoft.com/..." xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml" d:DesignWidth="640" d:DesignHeight="480" > <UserControl /> Tipp: Blend and Visual Studio provide special handles to set design time size

  20. Generic Sample Data <Application.Resources> <SampleData:ProductSampleData x:Key="data" d:IsDataSource="True"/></Application.Resources> <Borderd:DataContext="{Binding Source={StaticResourcedata}}" > <ListBoxItemsSource="{Binding Products}"/> </Border>

  21. Sample Data from Type • d:DesignData creates a proxy of the specified type and sets the values • This brings the following advantages • Types without public or default constructor can be created from XAML • Readonly properties can be set • The designer knows about the interface to support data binding.

  22. Sample Data from Type ProductSampleData.xaml: <l:Product xmlns:l="clr-namespace:DigiShop" Name="HP Notebook" Description= "This powerful device provides…" Price="499.90"> <l:Product.Category> <l:Category Name="Notebooks"/> </l:Product.Category> </l:Product> <StackPanelDataContext="{BindingProducts.CurrentItem}"d:DataContext="{d:DesignDataProductSampleData.xaml}"><Image Source="{Binding Picture}"/><TextBlock Text="{Binding Name}"/></StackPanel>

  23. Demo

  24. More Interactivity with less code

  25. XAML limitations • Today designers would need to write code to do basic scenarios like: • validation • drag&drop • starting a storyboard • Expression Blend features are limited by the expressiveness of XAML • A developer needs to support the designer to build these interactions

  26. Selfmade: Attached Helpers <TextBox l:TextBoxHelper.UpdateOnEnter="True" />

  27. Disatvantages of this solution • No designer support in Expression Blend • You need to start from scratch • Register a DependencyProperty to hook up the helper • Wiring up to events • Handle conditions • Detaching and disposing

  28. Actions and Behaviors System.Windows.Interactivity.dll

  29. Hunderts of Behaviors out there InvokeCommandAction CallMethodAction GoToStateAction PlaySoundAction PlayMediaAction RevindMediaAction TogglePlayPauseMediaAction HyperlinkAction SetDataStoreValueAction ChangePropertyAction RemoveElementAction CallDataMethod InvokeDataCommand FluidBindPropertyBehavior DataStateBehavior ClippingBehavior GoToNextStateBehavior ShowMessageBoxBehavior MouseDragElementBehavior FluidMoveBehavior FluidMoveSetTagBehavior TextBoxEditMaskBehavior ListBoxAddOne ListBoxRemoveOne http://expressionblend.codeplex.com/

  30. Actions in Action • Actions can be attached to any element <Image Source="{Binding Picture}"> <i:Interaction.Triggers> <i:EventTriggerEventName="MouseLeftButtonDown"><i:InvokeCommandAction Command="{BindingAddToCartCommand}"/></i:EventTrigger> </i:Interaction.Triggers> </Image>

  31. How to use Behaviors • Behaviors can be attached to any element <Image Source="digitalworld.png"> <i:Interaction.Behaviors> <ei:MouseDragElementBehavior/> </i:Interaction.Behaviors> </Image>

  32. Create your own behavior publicclassMyBehavior : Behavior<FrameworkElement> { protectedoverridevoidOnAttached() { base.OnAttached(); AssociatedObject.MouseEnter += OnMouseEnter; } protectedoverridevoidOnDetaching() { base.OnDetaching(); AssociatedObject.MouseEnter -= OnMouseEnter; } privatestaticvoidOnMouseEnter(object sender, MouseEventArgs e) { MessageBox.Show("It works!"); } }

  33. Demo

  34. States and Transitions

  35. States of controls Button(State Machine)

  36. States using Triggers in WPF <Style x:Key="MyButtonStyle"TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="White" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="Gray" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Opacity" Value="0.5" /> </Trigger> </Style.Triggers> </Style>

  37. Visual State Manager

  38. All Silverlight and WPF4 controls support states [TemplateVisualState(Name = "ContentFocused", GroupName = "FocusStates")] [TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")] [TemplateVisualState(Name = "Focused", GroupName = "FocusStates")] [TemplateVisualState(Name = "Checked", GroupName = "CheckStates")] [TemplateVisualState(Name = "Unchecked", GroupName = "CheckStates")] [TemplateVisualState(Name = "Indeterminate", GroupName = "CheckStates")] [TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")] [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")] [TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")] [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")] publicclassCheckBox : ToggleButton { .... }

  39. Easing Functions • Make animations feel more natural <DoubleAnimationUsingKeyFrames… > <EasingDoubleKeyFrameKeyTime="0:0:3" Value="370"> <EasingDoubleKeyFrame.EasingFunction> <BounceEaseEasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames>

  40. Reasons for Visual State Manager • VSM can be attached to any control without code • All Silverlight and WPF 4.0 controls support VSM. • State transitions are createdautomatically • Supports TransitionEffects and Easing • Good support in Expression Blend • Additional States can be added • States can be switched from externally

  41. Demo

  42. Summary • The way of programming WPF and Silverlight has become more declarative • This makes design tools more powerful • Designers can do more without the need of writing code • Complexity is hidden within smart reusable extensions like VSM or Behaviors • The collaboration between designers and developers can be improved.

  43. Want more information? • Meet me at the «Ask the Expert» lounge Contact Information: Christian Moser Zühlke Engineering AG Wiesenstrasse 10a8952 Schlieren +41 79 261 68 14 Mail: moc@zuehlke.comBlog: www.wpftutorial.netTwitter: @moser_christian

  44. © 2011 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.

More Related