Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Expression Blend 3 Survey- Win a free zune HD!!!

    • 9 Comments

    Hello!

    The Expression Blend team is currently planning features for future versions of Expression Blend. We encourage everyone to take our Blend 3 Survey and send us your feedback. All eligible participants will be able to enter a drawing to win a FREE Zune HD!

    image As the winner you will be able to customize your own 32GB Zune HD (color and pattern).

    The deadline for submitting a survey response is October 5th, 2009 @ 11:59pm. The winner will be announced on October 9th, 2009.

    The survey contains various areas, feel free to respond to the areas you feel most relevant to your experience with Blend. We look forward to receiving your feedback and suggestions.

    Cheers!
    Expression Blend Team

  • Expression Blend and Design

    Silverlight Control Styling Tips Articles

    • 7 Comments

    We’ve published eleven new articles on the blog and they all contain information and tips that you’ll find useful when styling common Silverlight 3 controls. First there’s an article with some general tips: it discusses template binding, different ways of binding Content in your template, some of the smarts in the Make Into Control command, and some tips on visual states. Then there are ten articles focusing on specific commonly-used controls. For each of these specific articles the article format includes a list of the control’s visual states and parts, an explanation of the function and importance of each part, a graphical comp of a control and its states, a XAML representation of the control in artwork form, and then in-depth steps for turning that artwork into a template for the control. Here are links to the articles. Enjoy!

    - Steve

  • Expression Blend and Design

    Keyframe Marquee Selection, and other Timeline Tips

    • 4 Comments

    With Blend 3 it’s now possible to draw a marquee (or lasso) around keyframes to select all the keyframes that fall within it. Hold down the CTRL key then drag out a marquee with the mouse pointer as shown below. You can even begin your drag operation when the mouse pointer is over a keyframe or an animation bar; so long as CTRL is pressed, this will not result in selecting and/or moving any keyframe or animation.

    marqueeSelect

    If you ever used the time ruler area above the Timeline to move the yellow playhead (current time marker) you’ll be pleased to know that you can now click, or click-and-scrub, in any empty area of the Timeline to set the current time. And if the mouse pointer is over a keyframe or an animation bar then hold down the ALT key and click, or click-and-scrub, and you’ll be able to move the current time without either selecting or moving any keyframe or animation.

    You’ll also notice the new blue drag-handles on the animation bars in the illustration above. You can use these to move the start and end times of the animation, and the times of the keyframes within it will be scaled up or down accordingly. This makes it very easy to change the time taken by an entire keyframe animation without having to move all the keyframes around. You can also click and drag on the gray background of the animation bar to shift the whole animation in time.

    -Steve

  • Expression Blend and Design

    Using Custom Value Editors for Behaviors

    • 2 Comments

    Ok, Jeff Kelly is back with Part IV of his coverage on behaviors-related topics. This one talks about some of the built-in value editors we provide to make it easier for your users to use behaviors that you create - Kirupa

    In Expression Blend 3, we’ve provided a number of custom ValueEditors in the property inspector to enhance the usability of our standard Behavior set. As an added bonus, we’ve introduced some limited extensibility to allow third-party controls and behaviors to reuse a few of these.

    Specifically, the ElementPicker, the StateNamePicker and the StoryboardPicker can all be reused by placing the CustomPropertyValueEditorAttribute on the property you wish to use the editor. The CustomPropertyValueEditor enum provides the available options:

    image

    Note that both the ElementPicker and StateName picker expect to be used on properties of type String, whereas the StoryboardPicker expects to be used on a property of type Storyboard. It’s up to your control or behavior to figure out what to do with the value you get back.

    image

    A Note on Design-Time Metadata
    I’ve covered a number of attributes that are meant to help improve the tooling of your behaviors and controls in Blend 3. It is perfectly valid to place these attributes directly on your class and property definitions; they will work fine. However, doing this raises a general architectural concern: design-time metadata should not be encoded in a run-time DLL. This is a valid concern both from a simple conceptual standpoint, as well as a more practical standpoint, as each attribute adds some overhead in terms of size to your run-time assembly.

    While an in-depth discussion is outside the scope of this post, there is a way to segregate your design-time metadata from your run-time classes in the form of a .Design DLL. You can find some introductory information about creating and using design assemblies in Blend 3 on UnniR’s blog here and here.

    Conclusion
    I hope that this blog series has provided a solid overview of the API and mechanics behind the new Behaviors feature in Blend 3. While you hopefully have a good understanding of the fundamentals now, we’ve barely scratched the surface of what can be done with this exciting pattern. I encourage you to check out the Expression Gallery to see what amazing things our community can come up with using Behaviors, as well as to watch this blog and others for more tips and tricks in the weeks and months to come!

    Jeff

  • Expression Blend and Design

    Blend 3 Samples Deconstructed

    • 1 Comments

    In my previous post, I mentioned that most of the samples from previous versions of Expression Blend have been uploaded to our gallery. One thing that is common with all of the samples is that Celso Gomes had a hand in making them.

    Recently, Celso started deconstructing how many of the samples work at his site: http://www.nibblestutorials.net:

    nibblesTutorial_v2

    Go check out Celso’s site if you are interested in learning more about how these samples work.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    All Expression Blend Samples Posted to the Expression Gallery!

    • 2 Comments

    Hi everyone,
    As many of you probably already know, the Expression Community site is where you go to learn more about how to use Expression Blend. One of the big components of the Community site is the Expression Gallery where you can download and share all kinds of content with the rest of the world.

    I had some time recently, so I’ve uploaded many of the samples that have shipped with Expression Blend to our gallery:

    blendGallery 

    Just head over here and download them all.

    I’m not fully done uploading all of them, and I’m tracking down some of the samples we shipped as part of Expression Interactive Designer many moons ago as well, so do periodically keep checking to see if any additions have been made.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer Updated to Fix an Export Related Bug

    • 7 Comments

    Hi everyone,
    We have released an update to last week’s Deep Zoom Composer release to address a fairly serious bug related to the image paths we generate during export. You can download the latest version from the following location:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    The export related bug we fixed has to do with image tiles not loading when you export using our custom templates. If you exported using the Default template, everything worked great. To summarize the problem and the solution, if you looked at dzc_output.xml, in our earlier release, we produced URLs to images that looked as follows:

    <Items>
      <I Id="0" N="0" Source="/dzc_output_images/chrysanthemum.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-0" Y="-0" />
      </I>
      <I Id="1" N="1" Source="/dzc_output_images/desert.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-1" Y="-0.75" />
      </I>
      <I Id="2" N="2" Source="/dzc_output_images/tulips.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="5.1975051975051949" X="-1.5987525987525975" Y="-1.9490644490644482" />
      </I>
    </Items>

    The change we made is to remove the leading slash that appears in front of the XML file. The output now looks as follows:

    <Items>
      <I Id="0" N="0" Source="dzc_output_images/chrysanthemum.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-0" Y="-0" />
      </I>
      <I Id="1" N="1" Source="dzc_output_images/desert.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-1" Y="-0.75" />
      </I>
      <I Id="2" N="2" Source="dzc_output_images/tulips.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="5.1975051975051949" X="-1.5987525987525975" Y="-1.9490644490644482" />
      </I>
    </Items>

    If you already have existing projects that you don’t feel like re-exporting using our new version of Deep Zoom Composer, then feel free to manually remove the leading slash from the image Source value in dzc_output.xml.

    Cheers!
    Kirupa & Janete

  • Expression Blend and Design

    The States Pane and WPF Controls

    • 1 Comments

    Last October I described how to use the States pane in a WPF project with Blend 2 Service Pack 1. Things are even simpler with Expression Blend 3 so in this post I’ll remind you how to use the States pane with WPF controls.

    As you may know, when you create a template for a Silverlight control, the States pane populates with States ready for you to select-and-design. This is because Silverlight controls are designed to work with States, and each Silverlight control advertises the States it works with. But WPF shipped before States did and consequently WPF controls know nothing about States. It’s actually the magic in the WPF Toolkit that makes WPF controls work with States. Blend 3 installs the WPF Toolkit for you automatically, so there is nothing extra you will need to do.

    This means that when you create a new template for a WPF control, the States pane is empty initially. But it only takes a few moments to add the correctly-named States and from there you’re on par with the Silverlight experience and you’re ready to select-and-design as usual.

    So, here’s a list of the WPF controls that work with States along with the state groups and states you’ll need to add.

    Button, GridViewColumnHeader, RepeatButton

    CommonStates:

            Normal, MouseOver, Pressed, Disabled

    FocusStates:

            Unfocused, Focused

    CheckBox, RadioButton

    CommonStates:

            Normal, MouseOver, Pressed, Disabled

    CheckStates:

            Unchecked, Checked, Indeterminate

    FocusStates:

            Unfocused, Focused

    ListBoxItem

    CommonStates:

            Normal, MouseOver

    SelectionStates:

            Unselected, Selected

    FocusStates:

           Unfocused, Focused

    ProgressBar

    CommonStates:

            Determinate, Indeterminate

    FocusStates:

            Unfocused, Focused

    TextBox, RichTextBox

    CommonStates:

           Normal, MouseOver, Disabled, ReadOnly

    FocusStates:

            Unfocused, Focused

    Hopefully this helps you to be more productive in WPF when working with states!

    -Steve

  • Expression Blend and Design

    Expression Blend 3 – Secrets of Working With Data

    • 0 Comments

    Evgeny is back with a great blog post describing some cool features related to the new Sample Data feature we introduced in Expression Blend 3.

    Visit his blog post to go read it: http://etvorun.spaces.live.com/blog/cns!6054141F335D00D3!130.entry

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Caching and Deep Zoom Composer Downloads

    • 4 Comments

    Hi everyone,
    Some of you have let us know that the version of Deep Zoom Composer you downloaded yesterday is actually the version from a few weeks ago. The reason for this has to do with the delays in propagating the downloads across the various servers, and sometimes it does take a bit longer than expected to keep everything in sync. Complicating this problem is our decision to not create a new page for our Deep Zoom Composer download pages. This means that some of you may see a cached version of the page as well.

    Please make sure that your download page mentions the version as 1.0.000.0 with a publish date of 7/22/2009:

    dl_qd

    Your about dialog inside Deep Zoom Composer should look as follows as well:

    aboutDialog

    Sorry for the confusion, and hopefully by now, all of the download servers are serving the most recent, up-to-date version of Deep Zoom Composer.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Deep Zoom Composer Released!

    • 26 Comments

    Hi everyone,
    To coincide with the official launch of Expression Studio 3, we have released the first final version of Deep Zoom Composer as well. You can download it from the below location:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    What’s New
    This release pulls together a lot of the ideas that we had been previewing to you in bits and pieces for the past releases – some for over a year! The following sections describe a few of them in some detail.

    Easily Create Interactive Deep Zoom Experiences
    The Deep Zoom technology in Silverlight can be used to do a lot more than just allowing you to zoom in on high resolution images. Deep Zoom Composer makes it possible for you to create, without writing a single line of code, interactive content involving slideshows, inline navigation, web links, tooltips, and more.

    slideshows

    In our latest release, we really tied a lot of the loose ends together to create something that makes it really easy for you import your images and quickly add some of the functionality described earlier. You can learn more about some of these features by reading Janete’s blog posts on these features: Slideshow Support, Creating Menus, and Adding Links.

    Analytics Tracking
    This release of Deep Zoom Composer enhances the support for analytics tracking we exposed in our earlier release. Specify tracking URLs that will silently get called when you zoom in on an image or region. Don’t worry, we made all of this fairly customizable:

    impressionProfie

    Expect to see us blog more about this feature really soon.

    Improved DeepZoomPix Player
    The enhanced player Deep Zoom Composer uses has been ported over to the online DeepZoomPix service. You can now upload your Deep Zoom creations and view/share them with others while maintaining any interactivity you may have added to your images.

    Below is a simple example of a Windows 7 wallpaper slideshow uploaded to DeepZoomPix directly from Deep Zoom Composer. Click on the image to see the example live on the DeepZoomPix site:

    dzc_images 

    Go Further (Easily) with your Exported Content
    With this release, we made it extremely easy for you to go from having a Deep Zoom composition to something you can edit in Expression Blend or Visual Studio. Based on a lot of your feedback, we expanded our default list of templates to include more templates that contain source files:

    export_templates

    The templates with source files range from ones that do everything for you such as our Behaviors and Classic templates, but one of our templates is nothing more than an empty project containing just a simple Silverlight Application + WebSite containing just your exported images.

    To learn a bit more about our new exporting features, check out Kirupa’s two blog posts on this topic: Extensible Templates in Deep Zoom Composer and Improved Collection Support in Deep Zoom Composer

    Revamped UI
    One of the first things you may notice by looking at Deep Zoom Composer is the more refined look:

    newUI

    We took quite a number of design cues from the work our excellent designer on Expression Blend, Billy Chow did. We hope these subtle UI changes make it easier (and possibly more fun!) for you to work with your content.

    Online Documentation
    To make it easier for us to provide you with direct access to more frequently updated content, we have decided to point users to our online documentation which can be found here. The documentation on our new features has not been published yet, but it will soon. In the interim, you have the links to blog posts we have written posted above.

    Support for Smooth Streaming
    Smooth Streaming is an extension available to IIS web servers where you can easily stream content using adaptive streaming. Deep Zoom Composer now allows you to export your images into a form that is optimized for use on servers enabled with the smooth streaming technology:

    smoothStreamingSupport 


    We will continue to blog more about some of these new features, so keep watching this blog for original content or links to content on either of our blogs.

    A Big Thanks to You All
    It wouldn’t be fair to conclude this post without saying how grateful we are to all of you who have provided us with feedback and requests on things you would like to see. You all rock.

    Of course, Deep Zoom Composer also wouldn’t be possible without the talented work of some brilliant colleagues spread out across Microsoft’s Israel Innovation Labs, Seadragon, and DeepZoomPix teams:

    aboutDialog

    See you all in our blog comments or on our forums.

    Cheers!
    Kirupa & Janete

  • Expression Blend and Design

    Expression Studio 3 LAUNCHED TODAY!

    • 5 Comments
    US_Prd_Bx_Tilt_L_Expression_Studio_3 Today we announced the official launch of Expression® Studio 3, a suite of professional design tools for creating Rich Internet Applications. This announcement comes shortly after the July 10th Silverlight 3 launch and the availability of the release candidate for Expression Blend 3 + SketchFlow. It is super exciting for us on the Expression Web, Expression Design, Expression Blend + SketchFlow, and Expression Encoder teams to showcase the final versions for the 3rd release of the Studio. Below are various links to the trials, blog posts and other info from the Expression Studio 3 site, community site,  team blogs, and forums. Stay tuned for upcoming related blog posts! 

     
        Expression Studio 3 Overview Video 
        The Visual Kitchen Video 
        Soma’s blog about Silverlight 3
        Download the Expression Studio 3 60 day trial!

     

    Expression Web 3 Expression Web 3
    Microsoft Expression Web 3 gives you the tools you need – PHP, HTML/XHTML, CSS, JavaScript, ASP.NET, ASP.NET AJAX, visual diagnostics and sophisticated CSS design capability – to produce high-quality, standards-based Web sites. Includes SuperPreview.

    Useful Links:
    Expression Web 3 Overview + Video + 60 day trial
    Expression Web Community Site
    Expression Web Forums

    Blog Posts:
    Expression Web Blog
    Soma’s Expression Web 3 blog post
    Blog posts on the xWeb blog related to SuperPreview


    Expression Blend 3

    Expression Blend 3 + SketchFlow

    Microsoft Expression Blend 3 revolutionizes the speed and efficiency with which you can take your ideas from initial concept to completed project on the Silverlight and .NET platforms. Includes SketchFlow.


    Expression Design 3

    Expression Design 3

    Microsoft Expression Design 3 is the perfect companion to Expression Blend or Expression Web. Create sophisticated assets with their fidelity maintained throughout the entire designer-developer workflow.


    Expression Encoder 3  

    Expression Encoder 3
    With Microsoft Expression Encoder, you can import and encode video files, produce live webcasts, enhance media with watermarks and advertising, and publish with Microsoft Silverlight.

    Useful Links:
    Expression Encoder Overview + Video + 60 day trial
    Expression Encoder Community Site
    Expression Encoder Forums

    Blog Posts:
    Expression Encoder Blog
    What’s new in Expression Encoder 3 blog post by the Encoder Team

    Cheers!
    The Expression Blend Team

  • Expression Blend and Design

    A Look at Some Advanced Behaviors Features

    • 5 Comments

    Jeff Kelly is back with Part III of his behaviors coverage. This time, he focuses on the more advanced uses of Behaviors  - Kirupa

    In previous posts, I’ve touched on the basic pieces of the Behaviors API and some basic usages of them. In this post, I want to wrap up the discussion of the basic Behaviors API with some discussion of some of the more advanced features exposed by the Behaviors API.

    Advanced Behaviors
    A large amount of interactive scenarios can be described in the language of triggers and actions; that is, when X happens, do Y. However, say I have two actions, A and B, both of which want to read and store information in a hidden (i.e. not exposed to the designer) but shared Foo object. If I implement A and B as actions, each action needs to know how to access the Foo object. There are a number of different ways to approach this, each with various merits and drawbacks. Rather than explore these in depth here, I want to point out a way to approach this problem using Behaviors.

    The complexity in this scenario comes from multiple independent actions sharing a dependency on the Foo object. Consider that rather than having multiple Actions that share and operate on the same data objects, you can instead encapsulate the shared data objects into a Behavior and expose the functionality that would have been provided via Actions as commands on the Behavior. The benefits are two-fold: cohesion is greatly improved, as the data and the commands that act upon that data are now encapsulated in a single class, and second, the interface exposed to the designer in Blend 3 is much more explicit (no more wondering which Actions in a large class library are meant to be used together). Rather than relying on class-naming conventions or first-hand implementation knowledge to convey the relationships between several Actions that all act upon the same data object, the user is presented a single Behavior with each possible operation enumerated and customizable by the designer.

    image

    This is all tied into the Behavior system with the appropriately named InvokeCommandAction. By placing these actions directly on the behavior that exposes the ICommands, we get a really nice benefit: we can use any Trigger built against the Behavior Trigger API to invoke both Actions AND ICommands exposed on Behaviors! In addition to the assorted tooling work in Blend 3 to make invoking these ICommands from XAML easy for a designer, we’ve also added the ActionCommand support class for developers to make creating Behaviors exposing ICommands a breeze. A bare-bones implementation of ICommand that takes a function with either zero or one parameter, ActionCommand saves you the trouble of writing your own ICommand implementation each time you want to write a Command-able Behavior:

    public class MyCommandBehavior : Behavior<DependencyObject>
    {
    	public MyCommandBehavior()
    	{
    		this.MyCommand = new ActionCommand(this.MyFunction);
    	}
    
    	public ICommand MyCommand
    	{
    		get;
    		private set;
    	}
    	 
    	private void MyFunction()
    	{
    		// do work...
    	}
    }

     Figure 2: Example Behavior exposing an ICommand

    <Button x:Name="BehaviorHostButton" Content="Behavior Host>
       <i:Interaction.Behaviors>
          <local:MyCommandBehavior>
             <i:Interaction.Triggers>
                <i:EventTrigger SourceName=" BehaviorHostButton" EventName="Click">
                   <i:InvokeCommandAction CommandName="MyCommand"/>
                </i:EventTrigger>
             </i:Interaction.Triggers>
          </local:MyCommandBehavior>
       </i:Interaction.Behaviors>
    </Button>

    Figure 3: Example invocation of an ICommand on a Behavior using InvokeCommandAction

    There is one major caveat to consider with this approach. Because InvokeCommandAction is not a TargetedTriggerAction, you cannot set TargetName to target an arbitrary Behavior; the InvokeCommandAction must be hosted on the Behavior it is invoking commands on. This means that the Trigger that fires the InvokeCommandAction must either be retargeted (by setting SourceName), or must be source agnostic. Also note that like any string-based reference system, the CommandName parameter of InvokeActionCommand is susceptible to falling victim to changing property names or refactorings down the road. Special care must be taken to avoid breaking these implicit links if these names are still in flux.

    DefaultTriggerAttribute
    You may find yourself writing Actions and Behaviors that have a fairly common use case, and you may want to improve the default design-time experience around that use case. By default when you create an Action, Blend 3 will trigger it with an MouseLeftButtonDown  EventTrigger where we can, or a Loaded EventTrigger if MouseLeftButtonDown isn’t available. However, you may want a custom Trigger instead of an EventTrigger, or maybe just a different default event in an EventTrigger. In order to facilitate this, we’ve added the DefaultTriggerAttribute in the System.Windows.Interactivity namespace:

    public DefaultTriggerAttribute(Type targetType, Type triggerType, 
                                                    params object[] parameters)

    By setting this attribute on an Action class definition or an ICommand property definition exposed on a Behavior, you can specify one or more Triggers to instantiate automatically when that Action or Behavior is created by a user in Blend 3. The first parameter is the type for which to create this Trigger, the second is the type of Trigger to create, and the final is a list of constructor arguments to pass to the Trigger when it is created. If more than one attribute is defined, the most derived targetType that is applicable when the user created the Action/Behavior will be used.

    For example, in the following definition:

    [DefaultTrigger(typeof(UIElement), typeof(EventTrigger), "MouseLeftButtonDown")] 
    [DefaultTrigger(typeof(ButtonBase), typeof(EventTrigger), "Click")] 
    public class MyAction : TriggerAction<UIElement> 
    { 
        … 
    } 

    If MyAction is dragged onto a Button (or another ButtonBase derived class), the Action will be created under a Click EventTrigger. However, if MyAction is dragged onto any other UIElement, a MouseLeftButtonDown trigger will be created for it instead.

    TypeConstraintAttribute
    If you’ve read my previous point, you know that each of the core Behaviors classes constrain their AssociatedObject type via a generic argument in the class inheritance definition. However, there is a somewhat subtle complication here in the case of TargetedTriggerAction<T> and EventTriggerBase<T>. In both cases, these classes extend the more basic TriggerAction<T> and TriggerBase<T> and provide a “retargeting” mechanism, allowing Behavior authors to easily target and act upon elements other than the AssociatedObject.

    For TargetedTriggerAction<T> and EventTriggerBase<T>, the generic parameter T does not constraint the type of their AssociatedObject as it does for TriggerAction<T>and TriggerBase<T>. Instead, it constrains the type of the retargeted element (Target/Source properties, respectively).  Because retargeted Behavior classes are usually acting solely on their target, rather than their AssociatedObject, this is usually sufficient. But what if it isn’t?

    Cue the TypeConstraintAttribute. You can apply this attribute to any TargetedTriggerAction<T> or EventTriggerBase<T> in order to constrain its AssociatedObject to the specified type. Blend 3 will enforce it when you are creating an instance of the Behavior type, and the run-time will throw if you manage to violate it anyway (via by-hand XAML manipulation or code behind).

    Conclusion
    This post covered quite a bit of ground, but there are a few more topics that we need to go over before calling it a day. Stay tuned for a future post on some of our behaviors-related extensibility features.

    Thanks,
    Jeff

  • Expression Blend and Design

    Deep Zoom Composer Updated – July 2009 / Release Candidate

    • 5 Comments

    Last week, to coincide with the release of Expression Blend + SketchFlow RC and Silverlight 3, we updated Deep Zoom Composer as well. You can download it from the link below:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    This release contains improvements to a handful of the existing features based on feedback many of you have provided us.

    Bringing back the Blend / Visual Studio projects for certain templates was one of the changes we made (see earlier post). We also made interacting with the Deep Zoom player smoother by removing the constraints that often led to some odd/jagged zooming and panning. The final change of note has to do with our Exporting where we made it extensible as well as possible for you to create composition-less collection exporting.

    The last sentence was quite the mouthful, but instead of elaborating here, we will be elaborating in a series of blog posts what the new Exporting changes are and how to use them.

    Cheers!
    Kirupa & Janete

  • Expression Blend and Design

    Overview of New Features in Expression Blend 3 + SketchFlow: Part III

    • 5 Comments

    Hi everyone,
    Continuing the overview of all the new features we introduced in Expression Blend 3, this post wraps up our trilogy by looking at more features that fall under Workflow, Code Editing, and Extensibility. Of course, if you missed the earlier posts, be sure to catch up on Part I and Part II as well.

    Workflow Improvements
    There is a large collection of improvements we made in Expression Blend 3 that can loosely be bucketed under a category called Workflow. Most of the items here are not new features necessarily. They are improvements we made to help make creating applications in Blend more efficient, and dare I say it, fun!

    Revised, Customizable UI
    One of the immediate changes you will see when launching Blend is our more polished, fully customizable user interface where you can rearrange, hide, save/restore workspaces, and move various panels to your heart’s content! Christian Schormann puts this feature to good use when describing how to create a minimal user interface for working with SketchFlow projects: Creating a Minimal Workspace for SketchFlow

    Updated Gradient Tool
    The classic gradient tool that many have used has gotten quite a revamp in Blend 3. You can read more about the changes in Joanna Mason’s blog post on this topic: Creating and Editing Gradients in Expression Blend 3

    Layout Improvements
    Expression Blend 3 introduces several improvements to layout operations. Moving objects with direct manipulation on the artboard is now more consistent and predictable, alignment adorners are shown for more containers, layout properties and bindings are preserved when reparenting or grouping objects, and layout properties are no longer written to the XAML code-behind file unnecessarily.

    Additionally, you can now use the property inspector to change the width and height of an object even when these properties are set to Auto:

    image

    Expression Blend 3 will automatically compute the appropriate margins needed to make sure that the object is the size that you specify.

    Selection Improvements
    In Blend 3, we made some significant changes to the selection model. These changes make it easier to change your selection and draw new objects on the artboard. One such improvement is marquee selection of individual points on a path:

    image

    When you use the Direct Selection tool, you can now select individual points on a path by using marquee selection. Just drag to define the area that contains the points that you want to select.

    Copy and paste images from the Clipboard
    Image data put on the Clipboard by other applications such as Windows Internet Explorer, Adobe Photoshop, and Microsoft Paint can now be pasted directly into Expression Blend 3.

    Easier Access to Template Internals
    If a control includes templates that are applied in specific scenarios, such as when a control has to display a collection of data, those templates now appear in the Edit Other Templates category of the Edit Template item on the Object menu;

    image

    This allows you to access the internals of your controls from a single location more easily than you were able to before.

    Improved UserControl Editing Experience
    When you modify the XAML that defines a UserControl control, you no longer have to rebuild the project to update all the UserControl objects on the artboard. Additionally, you can enter editing mode for a UserControl control by double-clicking one of the UserControl objects on the artboard.

    Searching for files in the Projects Panel
    With Expression Blend 3, you can now search for items in the Projects panel:

    image

    This makes it very easy for you to find items in larger projects without having to manually browse through complicated folders!

    Code Editing Improvements
    One area we received a lot of feedback from many of you was to make our support for editing XAML files better and to add support for editing C# and VB code behind files. In Blend 3 we acted on your feedback and added both a very (in my not so modest opinion) a slick XAML editor as well a C# and VB code-editor with intellisense and other good stuff.

    Here is what our XAML editor looks like:

    image

    We also added very basic support for being able to open and edit text, html, and xml files as well using our new code editor.

    More Extensibility Points
    If you are writing custom controls or providing additional functionality for creating assets for your project, you will find our addition of more extensibility features useful. You can read more about them at Unni’s blog: Blend 3 Extensibility, Writing a Design Time Experience for a Silverlight Control,  A Sample that Shows the New Blend Design Surface ExtensibilityAlternateContentProperty Attribute


    Hopefully the last three posts give you an overview of the new features we have added in Blend. What I’ve written is by no means comprehensive. There are countless under-the-hood changes that you may not directly experience when using Blend, but if there is something that you feel I should call out in a future post, do let me know by commenting below.

    Cheers,
    Kirupa =)

  • Expression Blend and Design

    Overview of New Features in Expression Blend 3 + SketchFlow: Part II

    • 2 Comments

    In the previous post, we starting glancing at the new features in Expression Blend 3 + SketchFlow. In this post, let’s continue our overview of new features by looking at our Data, Silverlight, TFS Support, Animation, and Text improvements.

    General Data-Related Improvements
    Expression Blend 3 introduces a number of improvements to make it easier for you to create applications that rely heavily on data. You have the ability to create data bindings by simply dragging and dropping data from your Data panel and onto your Timeline, and the Data panel can also be used to create master/detail scenarios.

    This is what our Data panel looks like:

    image

    Some other improvements along the lines are better support for working with the DataGrid control, support for binding to a data context, and you now have the ability to define hierarchical collections of sample data that enable you to prototype data-connected applications.

    Silverlight Related Improvements
    All of the features I’ve described in this and the earlier post worked fairly consistently in both WPF and Silverlight. There are a handful of features that are designed to make working with Silverlight 3 better, so let’s look at those features now.

    First on this list is our actual support for opening and creating Silverlight 3-based projects. If you attempt to open a project created for Silverlight 2, Blend 3 will automatically prompt you to upgrade. When you want to create Silverlight 3 applications, we now provide support for associating them with a Web Site:

    image[6]

    You can learn a bit more about our support for Web Sites in the following blog post: Thinking Outside the XAP – Blend 3 and Support for Web Sites.

    One of the most-talked about features of Silverlight 3 is the ability for you to take your applications out-of- browser and have them work like a traditional client app. Blend makes it easy for you to specify a standard Silverlight 3 application as one that can be installed locally on a user’s machine.

    Blend 3 also allows you to take advantage of another new Silverlight 3 feature where your projects have the ability to cache commonly loaded DLLs on a server so that users only download what they need initially and use the browser’s cache to not re-download components that may already have been downloaded.

    TFS Support
    A common request we have heard from many of you is to have Expression Blend work better with projects integrated with source control. Expression Blend 3 provides support for TFS where we support, within the Blend UI, common TFS operations such as checking-in, checking-out, and more.

    Animation
    In previous versions of Expression Blend, you were not always able to animate all properties a particular object exposed. In Blend 3, we support far more properties than before, and we also support creating animations between resources.

    A really cool feature we added is the ability for you to make your animations more life-like with just one click of the mouse:

    image

    You can easily apply predefined easing functions such as Cubic, Bounce, Circle, and more to individual keyframes in an animation.

    Improved Text Features
    Expression Blend 3 extends upon the font embedding and subsetting we started in Blend 2 SP1, and we have introduced a newly designed Font Manager that makes embedding and subsetting fonts much easier:

    image

    Ok, this seems like a good place to stop right now. There are actually more features that we haven’t discussed yet, so let’s save the remaining features for yet another post.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Overview of New Features in Expression Blend 3 + SketchFlow: Part 1

    • 1 Comments

    As you all have probably seen by now, we released the release candidate of Expression Blend 3 + SketchFlow to coincide with the release of Silverlight 3 today. The previous post was just a short one letting you know about the release and where to download everything from. In this post, let’s actually go over in a bit more detail on some of the new features.

    There are a lot of new features in Expression Blend 3, so this post will be split into two parts. If you want a more comprehensive overview of all new features now, please read our What’s New document.

    SketchFlow
    With SketchFlow, Expression Blend 3 introduces a new set of features designed to make it easier for you to experiment with dynamic user experiences and to create compelling prototypes. Christian Schormann has blogged extensively about this, so please read the following posts for more information: SketchFlow Concepts: An Overview, Sketching and Prototyping in Expression Blend. More…

    Design: Adobe PhotoShop and Adobe Illustrator Support
    You can use Expression Blend 3 to import both Adobe Photoshop (.psd) files and Adobe Illustrator (.ai) files directly into your projects, while retaining layers, shapes, text elements, and more for easy editing inside Expression Blend 3 itself. Janete Perez has more to share on her blog, sunnypixels: Introduction to Importing Photoshop Files, Photoshop Import- Supported Features, Photoshop Import – Merging Layers.

    Design: Revamped Assets panel
    The Asset Library has been redesigned and made into a dockable panel that can remain open while you work on the artboard:

    image

    Assets are categorized for easier searching and organization. Beyond just the UI there have been some really nice under-the-hood changes, and Unni Ravindranathan summaries them in his post: The Blend 3 Asset Library.

    Styling Controls: Creating templates from artwork
    You can use the modified Make Into Control command to select artwork on the artboard and to convert it into a skin (control template) for a control.

    Styling Controls: Creating TextBox Templates from Artwork
    If you use the Make Into Control command and choose either a TextBox control or anything derived from a ContentControl control, Expression Blend 3 will copy typographic properties from any TextBlock object that it finds (in the objects that you are converting) into the appropriate part in the resulting control template.

    States: Improved Support for VSM
    Support for the Silverlight Visual State Manager (VSM) in Expression Blend 3 has been improved with a revised user interface for the States panel:

    image

    The new design and general improvements made allow you to pin various states, draw into state, preview transitions, and more. The full What’s New document contains more details.

    Interactivity: Behaviors
    You can add interactivity to your application, without having to write code, by using behaviors. Behaviors are reusable components that can be directly applied to any object on the artboard, and they are composed of extensible triggers, extensible actions, and behaviors. There have been a lot of blogging on this from all of us, so you can read them all here: Blend 3 Behaviors: Interactivity Without Code, Behaviors : Making Interactivity Easy (and Fun!), Using Behaviors - A Quick Walkthrough, Blend 3: Triggers, Actions, and Behaviors, An Introduction to Behaviors, Triggers, and Actions, Blend 3 Behaviors: A Sample Action, Looking at Behaviors, the Class, Behaviors and Commands, Looking at Triggers and Actions, Behaviors: Writing your own Triggers, Behaviors Under the Hood – API Details and Constraining the Type, Pete’s Collection of Behaviors

    Working with and Generating Data
    Expression Blend 3 makes it easy to prototype, build, and test data-connected applications without having access to live data. Unni is back with an overview of this feature along with a link to other blog posts he liked: Introducing sample data support in Blend 3, Blend 3 Databinding.


    Phew. We are about half-way there with our overview of new features, so stay tuned for Part 2 shortly.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Expression Blend 3 + SketchFlow RC Released

    • 2 Comments

    Many of you have been waiting, but wait no more! The RC (Release Candidate) version of Expression Blend 3 + SketchFlow is now available for you to download. Click on the below link to download it:


    blendicon_3 Download Expression Blend 3 Preview

    This release builds upon the early preview we showcased at MIX a few months ago, and you can get an overview of the new features by clicking here. In the upcoming weeks, we will be showcasing some of the new features since our MIX preview in greater detail, but a few of us have already mentioned a few of them such as the Improved Asset Library, Artboard Element Picker, the Expression Blend SDK, and more. This blog will highlight more of them as they get posted, but if you have something you have written, comment below and we’ll see what we can do to make sure it gets highlighted in a future post.

    Thanks again to all of you who use our product and provide us with valuable feedback. If you run into any issues or concerns, please feel free to use our support and discussion forum.

    - The Expression Blend Team

  • Expression Blend and Design

    Resurrecting a Beloved Deep Zoom Composer Feature

    • 2 Comments

    In our latest release of Deep Zoom Composer, we removed a feature that all of you liked a lot. While I will detail this in the near future, I figure the following screenshots from a version of Deep Zoom Composer on my machine should give you an idea of what it is we brought back:

    export 

    classicAndSource 

    project 

    sourceFiles

    And of course, the grand finale:

    image

    If you notice carefully, you’ll spot some cool Deep Zoom enhancements we have added in Expression Blend 3 since our release at MIX as well.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer – Adding Links, Creating Menus, and Creating Slideshows

    • 0 Comments

    Hi everyone,
    As many of you may have noticed, our new release of Deep Zoom Composer contains a lot of new features. Unfortunately, due to time constraints, we did not have time to adequately update our documentation to explain how all of these new features work.

    To help with this, fellow Blender and officemate, Janete Perez has written a few blog posts with some really nice Deep Zoom examples (static screenshots only posted below) highlighting some of our new features:

    Adding Links

    texas

    Creating Menus

    architecture_example

    Slideshow Support

    flowers_slideshow

    So be sure to click on the above links to see them. We hope to have a version of Deep Zoom Composer with the updated documentation available soon, though it will not be in our next release.

    Cheers!
    Kirupa =)

  • Expression Blend and Design

    Hatching Effect Shader for both Siverlight and WPF

    • 1 Comments

    Hi everyone,
    As you all may know, both Silverlight 3 and WPF 3.5 SP1 introduced support for effects and shaders. One of the features that I work on in Expression Blend is to make sure that you can use these custom effects easily.

    Beyond just writing the functionality for making the effects work inside Blend, I enjoy writing custom effects as well, so in this post let me show you an example of a hatching shader effect I created.

    Here is a small example containing some shapes and an image:

    image

    The same example, with my hatching shader effect applied, looks as follows:

    image

    This effect is quite versatile in when and where you can apply it. For example, let’s say I have SketchFlow application that looks like the following screenshot:

    image

    By just applying this shader effect, you can go from what you see above to something that looks even more prototype-ish:

    image

    You can read more about this shader effect on my blog post that goes into greater detail on this here: http://digitalepiphania.com/blog/2009/07/01/hatching-effect-for-silverlight-3-and-wpf-35-sp1/

    For playing with this on your own, you can get the installer for this from the following location: http://digitalepiphania.com/Downloads/HatchingEffectSetup.msi

    - Charles

  • Expression Blend and Design

    Deep Zoom Composer - June 2009 Preview!

    • 28 Comments

    We know you’ve been waiting, and we know you just can’t wait any longer, so here it is:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    A few months ago, we asked you what you all wanted to see in Deep Zoom Composer, and a lot of you gave some really great ideas. The following sections highlight just a small list of the new features we’ve added and improved based on your ideas, and our subsequent blog posts will delve into these features in greater detail.

    Navigation Support
    A common request has been around doing more with your Deep Zoom images than just being able to zoom in and out on them. In this release, we have introduced some cool navigation features which allow you to navigate between images or areas of images in a web/hyperlink-like fashion. You can also link images to external URLs as well.

    Better Memory Usage
    Deep Zoom Composer now uses significantly less memory than it did before, so you should now be able to work with more images in your composition.

    First Draft of Updated Collection Exporting
    We have now added the ability for you to import images, tag them directly from your image list in the Compose view, pick from a set of pre-defined templates, and export. All of this was done without you having to first place your image on the design surface.

    This is an area we are going to significantly improve in our upcoming releases, so stay tuned for some further updates on what we have planned.

    Reporting
    If you are an advertiser, knowing which images get the most attention is pretty valuable. We have put in place some early functionality that allows you to do this.

    ...and More!
    There are numerous little improvements we have made, and we’ll try to mention them as we go along in future Deep Zoom Composer related posting.

    Where Next?
    A lot of the features we have introduced are a bit rough on the edges, and we are going to be investing heavily the UI/styling/usability of them for our upcoming releases. Please feel free to comment below on things you like or don’t like, and that will help us prioritize things for future releases.

    Deep Zoom Composer is a collaborative effort of various groups at Microsoft, and for this release, we would like to give a HUGE thanks to the team at Microsoft Innovation Labs in Israel who contributed to making all of the above features possible for this release.

    Enjoy!
    Janete & Kirupa

  • Expression Blend and Design

    Instead of Telling What We are Working On…Here is a Screenshot Instead!

    • 11 Comments

    It’s been a while since we released a preview of Expression Blend 3 at MIX. We’ve been working pretty hard on continuing our work on Blend 3, but we haven’t really shared what exactly we are working on.

    Instead of detailing what we are doing, I figure I will just post a screenshot of what my daily build of Expression Blend looks like. Click on the following image to view a larger version:

    screenshot_sm ( click above image to see a larger version )

    Can you spot all of the major or minor changes between the version of Blend you are currently running and the version of Blend I currently have displayed?

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Three Posts on Blend 3’s Photoshop Import Functionality

    • 14 Comments

    Hi everyone,
    There are three really good posts on Janete Perez’s blog that covers the PhotoShop Import functionality found in the Blend 3 preview. Go check them out: Introduction to Importing Photoshop Files, Photoshop Import- Supported Features, and Photoshop Import - Merging Layers.

    Cheers!
    Kirupa =)

  • Expression Blend and Design

    Check out Rooler – A free Screen Measurement Utility!

    • 8 Comments

    Fellow Blender, Pete Blois, has written a small application called Rooler that allows you to make measurements of everything visible on your screen. You can download it by clicking here.

    Rooler helps solve a common problem you have when designing UIs. That common problem is figuring out how large something is or how much space exists between elements. To help with this, you have this nifty tool called Rooler which, to think about it differently, is like having a virtual ruler that you can use to measure things on your screen.

    Rooler is a small application that soars above all of your windows and provides you with some common screen measurement tools:

    dragToolbar

    For example, let’s say that I need to create a graphic whose width is the exact size as some text I have:

    BlueText

    The above text is actually an image. Right clicking on the image and seeing its properties will give me the width of the image, but it may not translate to the actual width of the content stored inside it. Finding the size of the actual content is where a tool like Rooler comes in handy.

    You can click on the Bounds icon to draw an overlay rectangle over the area you want to measure:

    blueText_2

    Once you have drawn the boundary, release the mouse cursor and Rooler will automatically create the smallest box that bounds all of your data:

    finalSize

    Best of all, you all get the width and height of this bounding box as well, and you were able to do this without using another image editing tool and performing various (albeit simple) steps needed to get a similar value as what you see above.

    I just showed you one example of what can be done, but you can do a bit more as well. Go check out Pete’s Rooler page for more examples and information on other things this tool does.

    Cheers!
    Kirupa :)

Page 2 of 9 (217 items) 12345»