Quick Blend Tutorial for Developers

Introduction

XAML is an major invention of WPF, and XMAL "programming" is an important part of WPF/Silverlight development. Even though XAML is XML and can be authored manually, it is mostly designed for tools, so good authoring tools are more important to XAML than to other languages like C# or HTML. Blend to XAML is what Visual Studio is to C#. There are many good tutorials and documents for Blend, like Jesse Liberty's Expression Blend for Developers. This post is more like "Learn Blend in 15 Minutes", aiming to give an quick overview and tutorial of Blend to developers who are authoring XAML mostly in Visual Studio or notepad, and so they will be interested and know how to get started in using Blend.

Project Management

Blend duplicates a lot of Visual Studio functionality and has great integration with it. It is very common (or even recommended, should I say) to have a WPF/Silverlight project open in both Blend and Visual Studio, using Blend for XAML authoring and Visual Studio for C# coding (or whatever language you prefer), and using either or both for project management.

Project manage in Blend is very similar to that in Visual Studio, via menu, Project Panel and Results Panel:

• Menu: the File, Edit, Project and Help menus are very similar to those in Visual Studio. Through those menus, you can create/open WPF/Silverlight projects, add items/references etc, and even build and run the solution, just like in Visual Studio.
  
• Project Panel: it is very similar to Visual Studio's Solution Explorer. You can right click on any .xaml/.cs file in the project panel and select "Edit in Visual Studio", and the project and the selected file will be open in Visual Studio for editing.
  
• Result Panel: the Output tab and Error tab are similar to Output window and Error List window in Visual Studio.

UI Authoring

UI authoring is done mostly via three panels: 

• Objects and Timeline Panel: the objects panel makes the logical tree structure very clear. It is easy to navigate the logical tree by expanding/collapsing/selecting an element in the tree, or restructure the tree by dragging and dropping elements along the tree. The selected element is highlighted in the objects panel, and in both the design view and xaml view of the documents panel; the properties panel displays the properties and events of the selected element. The internal node with yellow border (LayoutRoot in above screenshot) is the current default container.
• Documents Panel: the documents panel is a tabbed window, with one tab for each open xaml file. It has a design view and a xaml view for each file.
  • You can use the tabs at the top of the documents window to switch among open documents or close documents(only one tab in above screenshot, since only one file page.xaml is open.).
  • You can switch among Design view, XAML view, or Split view of the selected document. You can also set the default document view in Tools -> Options -> Documents:
    
  • There is a breadcrumb control at the top of the design view (also called artboard) to show the logic tree path of the selected element. This is another way to navigate the logical tree besides the objects panel, and to switch among authoring modes as we will see shortly.
  • You can zoom the design view by
  • select the zoom icon from the toolbox, then click or alt click on the artboard;
  • use the zoom combobox right below the artboard:
  • use the View menu items or their shortcut keys:
  • The design view is a WYSIWYG designer, where you can drag and drop an element from the toolbox or Asset Library along the left border of Blend window:
     
    
  • The XAML view allows direct XAML authoring. It doesn't have IntelliSense yet, but you can use the design view and the error tab in the Results panel below to correct errors while you type.
• Properties Panel: properties panel has two views: properties and events, indicated by two buttons at the top right corner of the panel.
  • In properties view: 
    
    • properties of the selected element is grouped into categories, like Layout, Common Properties;
    • properties usually have helpful tooltip, like Content property tooltip in above screenshot;
    • properties usually have inline/extended/dialog editor(s) to help user pick a value, like the value of HorizontalAlignment property in above screenshot can be set by clicking one of the four buttons, instead of typing in values like "Center" in XAML view directly;
    • if you give a property a value (so it no longer takes the default value), the little square to its right will become white, like the Alignment properties in above screenshot;
    • you can click the down arrow (which has "Show advanced properties" tooltip) in most categories to see more properties of that category;
    • you can find a property quickly by typing part of its name in the Search box at the top of the properties panel:
      
  • In events view:
    
    • you can type the name of the event handler for an event, and Blend will open the project in Visual Studio, with a prototype implementation of the event handler in the code behind file:
       

Animation Authoring

To create an animation, click the plus sign in Objects and Timeline panel, the "Create Storyboard Resource" dialog will pop up, asking for the name of the new storyboard:

Blend then enters timeline recording mode. Let's create an animation that will double the size of the button. The key steps in creating an animation:

1. create a keyframe, by first dragging the yellow timeline to a keytime, and then clicking the "Record Keyframe" green plus button;
2. edit properties of UI elements at keytime, as described in the above UI Authoring section;
3. repeat steps 1 and 2 for each keyframe;

As we can see in below screenshot:

• in Objects and Timeline Panel:
• the name of the timeline being edited: Storyboard1;
• the keyframe being edited: keytime is 1 second, indicated by the yellow timeline;
• the double arrow icons to the left of the nodes in the objects panel (button, RenderTransform, Scale, ScaleX, ScaleY in below screenshot) and the white dots along the timeline in the timeline panel show property changes for objects at the keytime ;
• we can use the play controls at the top of the timeline panel, or drag the yellow timeline, to run the animation;
• in Artboard of Documents Panel:
• the red border, red recording button, and the red label "Timeline recording is on" all indicate Blend is in timeline recording mode;
• you can click the red recording button to stop the recording mode and switch back to UI authoring mode;
• In Properties Panel:
  • value of target properties: like ScaleTransform.ScaleX is set to 2;

Blend uses XXXAnimationUsingKeyFrames and generates one keyframe for each object/property/keyframe trio. We can fine tune the properties of a keyframe itself by first selecting it in the Objects Panel, and then setting its properties in the properties panel, like in below screenshot:

• KeyTime is "00:00:01"
• target object is button, target path is roughly RenderTransform.ScaleTransform.ScaleX
• Value is "2"
• KeySpline is "0.5,0.1,0.5,0.9"

we can also fine tune the properties of the storyboard in the same way, like in below screenshot:

• Storyboard1 is selected
• AutoReverse and RepeatBehavior properties are changed

This is the XAML code Blend generated for above simple animation:

  1: <Storyboard AutoReverse="True" RepeatBehavior="Forever" x:Name="Storyboard1">
  2: 	<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
  3: 		<SplineDoubleKeyFrame KeySpline="0.495999991893768,0.104000002145767,0.5,0.898999989032745" KeyTime="00:00:01" Value="2"/>
  4: 	</DoubleAnimationUsingKeyFrames>
  5: 	<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
  6: 		<SplineDoubleKeyFrame KeyTime="00:00:01" Value="2"/>
  7: 	</DoubleAnimationUsingKeyFrames>
  8: </Storyboard>
  9: 

Clearly it is much easier to author animations in Blend instead of writing XAML manually.

Template Authoring

The beauty and power of WPF/Silverlight is the capability to re-template a control. It is rather easy to do that in Blend: select an menu item from the "Edit Control Parts (Template) -> Edit Template" context menu, either from Objects and Timeline Panel, or from the breadcrumb in Artboard:

"Edit a Copy..." menu item is also an easy way to get the default template of a control. In below screenshot, we can see:

• default template components in Objects and Timeline Panel
• visual state groups, visual states, and transitions in Interaction Panel
• properties of template components in Properties Panel. The orange square to the right of Background property indicates it is template bound.

Drill in further: select the Disabled visual state, and we can see that the disabled visual in artboard is generated by the visual state transition storyboard that animates the Opacity property of the DisabledVisualElement from 0% to 55% in 0 second:

Please note that near the top of the Object and Timeline panel, it shows Disabled State instead of a storyboard, indicating Blend is in state recording mode.

Now let's make some change to the default template by changing the focus visual state transition to skew the button when it is focused:

• select the Focused visual state in Interaction Panel, click the arrow plus icon on its right, select one of the three options (those options are for visual state transitions to and from this state, and between particular two states in the visual state group);
• Blend is in visual state recording mode: focused is the selected visual state;
• add a new skew transform to the top grid as discussed in Authoring Animations section. Notice that the button in artboard is now skewed. The WYSIWYG artboard makes animation authoring easy and intuitive.
• delete the FocusVisualElement template component in Objects panel since we don't need it any more. Notice the tooltip at the top indicating Blend automatically deleted the visual state transition that shows the FocusVisualElement as well.

The Blend generated XAML for above custom template is 102 lines, 6179 characters! Imagine the difficulty in authoring that by hand!

Once we have a template, we can apply it to UI elements of the style's target type (or its sub type):

Style Authoring

Using style is usually better than setting properties on objects directly, since styles can be reused, are easy to maintain, and help separate presentation from content (the UI elements). Style authoring is similar to template authoring discussed above, except it is much simpler. You have to use the Object -> Edit Style menu to enter the style authoring mode. There is no context menu for it, which makes style authoring less discoverable.

Select Create Empty... menu item, and the Create Style Resource dialog pops up, allow you to specify the name and location of the new style resource:

Then Blend enters style authoring mode:

• the Objects and Timeline panel displays highlighted Style element instead of the UI logical tree;
• the breadcrumb on top of artboard also indicates we are authoring LayoutRoot's style with a palette icon;
• let's add something to the style by setting Background via the brush editor, notice the artboard reflects the change immediate;
• the XAML view of documents panel shows the simple XAML generated for style authoring;

Once we have a style resource, applying it is easy: just select the object and the use Object -> Edit Style -> Apply Resource menu item.

Resource Management

Storyboard, styles and templates authored above are all resources. We can use the Resources Panel to manage resources:

• we can see all the resources in both app.xaml (global resources) and current xaml file page.xaml that is being edited (local resources).
• Not sure why Storyboard1 created in Animation Authoring section does not show up. Blend bug or user error?
• we can edit a resource via its context menu or edit resource button:
  
• we can also drag and drop a resource along the tree to change its location (and visibility), like moving between app.xaml and page.xaml, or [UserControl] and button.

Conclusion

To recap, Blend makes UI authoring easy and intuitive:

• toolbox (and asset library) and artboard allows WYSIWYG UI authoring;
• objects panel helps to organize all the UI elements in the logical tree;
• properties panel simplifies property setting with editors;

Building on top of the intuitive UI authoring, Blend simplifies animation authoring by introducing the timeline recording mode:

• Blend always uses XXXAnimationUsingKeyFrames, so a storyboard is always a collection of keyframes;
• Blend generates keyframes indirectly by letting user set UI element properties at keytimes via its intuitive UI authoring interface;
• Blend always generates all four transforms like below, to make its keyframe generation uniform for transforms:

<Button.RenderTransform>
    <TransformGroup>
        <ScaleTransform/>
        <SkewTransform/>
        <RotateTransform/>
        <TranslateTransform/>
    </TransformGroup>
</Button.RenderTransform>

On top of its UI and animation authoring, Blend simplifies template authoring by introducing the template authoring mode and state recording mode. A template consists of template parts and visual states. Template parts are just a logical tree of UI elements, and visual state transitions are storyboards.

Style authoring is even simpler: a style is just a collection of property setters. Blend introduces style authoring mode to distinguish between regular UI authoring and style authoring.

So Blend is a great XAML authoring tool. It is not just for designers, but can also give developers big productivity boost. Hopefully this post gives you a good overview of Blend and get you started in exploring Blend, enthusiastically :-). Thanks!

Technorati Tags: NIng Zhang,Silverlight,WPF,Blend,Tutorial