Welcome to MSDN Blogs Sign in | Join | Help

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

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 :)

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 =)

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 :)

Since we released our preview at MIX, there have been a fair number of questions revolving around how a WPF or Silverlight project that uses Blend-specific features will work when opened on a machine that does not have Blend installed. For example, one Blend-specific feature that we have talked about extensively is Behaviors. The Behaviors runtime components are provided to you by Blend, and today, there is no way of being able to author or build a project that uses them without having Blend installed.

To help address this concern, we have been working on creating the Expression Blend 3 SDK. The Blend 3 SDK is a free (and lightweight) installer that places common components such as Behaviors into a general location that other applications like Visual Studio can access. This gives you the ability to open and edit projects created or modified by Blend without having to have Blend installed on your computer.

Before wrapping up this post, I should emphasize that you will only need the Blend 3 SDK to open projects that contain some runtime component that is Blend specific and you do not have Blend 3 installed. That means you can open a cool Behaviors project or even write your own behaviors using just Visual Studio and not having Blend installed on your machine.

Cheers!
Kirupa

In the past couple of weeks, there have been a great number of great blog posts on Behaviors, and since Behaviors are one of those things where writing them is not as straightforward as using them, I figure I will take this opportunity to point you all to blog posts I’ve found.

If you’ve written about Behaviors and would like to be listed here, please comment below and I will look into adding you up as well.

Cheers!
Kirupa :)

One of the features that we added in Expression Blend 3 is the ability for you to create Silverlight projects that come associated with a Web site. In this brief post I will jump between describing why this is useful and how Blend provides access to it.

Let’s start with the easy part. You can access it directly via the New Project dialog where we created a Silverlight 3 Application + Website project template:

 image

Once you create your new project using this template, you have successfully used this new feature! For the most part, nothing really should seem or feel different for you, for this feature is more about what we do behind the scenes. There are a few exceptions. One immediate difference that you may notice is that your solution now contains a node for your Web site along with your Silverlight application:

image

There are several reasons why we decided to create this Web site project by default. The main reason is that you get all of the benefits of building a traditional Silverlight application where all of the content you incorporate gets embedded into your XAP and downloaded by default when your page loads. What is new, though, is that you also get the added benefit of being able to load content on demand using your own loading and preloading mechanism. That functionality is provided for you via Blend’s support for Web sites.

If I had to visualize this, it would look as follows:

xapDataMapping

You build your XAPs like always (Silverlight Project), but you have the added bonus of being able to think outside the XAP (Web Site Project). When you hit F5 to build and preview your application, the XAP gets built, copied into the right location on your website, and the HTML page that already exists loads and gives you a preview. We do not re-generate the HTML file each time you build, so this means you can customize your HTML page without worrying about your changes getting overwritten the next time you build.

Beyond just changes to how your projects behave and build, we added some extra functionality to make it possible for you to easily reference and visualize on the artboard the content from either your Silverlight Application or your Web Site without having to write XAML manually.

If you have images that live in both your Silverlight application and Web Site, our path picker for an Image control’s Source property displays the images from both locations:

sitedifferentiator

This is significantly different from what we’ve had in Expression Blend 2 SP1. While you could always open a solution authored in Visual Studio that contained both a Silverlight Application and a Web Site (my article describes that to a certain detail), hitting F5 in Blend would be unpredictable. You also didn’t have the extra support for treating all assets as being equal despite where they are being loaded from.

Let us know what you think of this feature. This features was designed to seamlessly blend into your workflow and “just work”, but if you had any ideas or suggestions on what more can be done or things you think we should change, feel free to comment below to let us know.

Cheers!
Kirupa :)

Hi everyone,
We have just released another preview of Deep Zoom Composer, and you can download it 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.

Quick Intro to DeepZoomPix
This release coincides with the recent launch of the DeepZoomPix technology preview: http://deepzoompix.com/default.aspx If you haven’t seen DeepZoomPix, it is a technology demo where you can upload and view your images using the Deep Zoom technology found in Silverlight:

dzp_ss2

A key part of DeepZoomPix is the viewer through which you can browse and interact with your images. Within the viewer, you have the ability to dynamically change how your images are arranged, play a slideshow, view a thumbnail of all images, as well as tag/filter:

filtering_ability

There are a lot of cool things you can do in DeepZoomPix, and you can learn more about DeepZoomPix by reading their FAQ as well watching a video interview with Rado and Matt on how the site was actually created. Janete will have a blog post with more information on DeepZoomPix in the near future.

Deep Zoom Composer and DeepZoomPix
As many of you know, not too long ago, we added the ability for you to be able to publish your photos online to PhotoZoom. Based on a lot of requests and feedback many of you have provided about PhotoZoom and the integration with Deep Zoom Composer, we closely followed the evolution of PhotoZoom into DeepZoomPix and were excited to help make Deep Zoom Composer work better with the new service.

The biggest change is that Deep Zoom Composer will only allow you to upload to DeepZoomPix:

dzp_ss

The workflow and the UI are largely the same, so if you have used the PhotoZoom functionality before, everything should look familiar to you with the exception of a few name changes.

Our primary motivation for moving to DeepZoomPix was to address the large amount of feedback many of you provided us about PhotoZoom. We hope you all find DeepZoomPix to be more reliable and more fun to use.

Do note that DeepZoomPix is just a technology demo. It is something that we are only planning on keeping until the end of the year (Dec 31st), and after that, we are not sure what will happen to the service. Please do not use this location as a permanent storage location for your photos.

Before I wrap up this post, a huge thanks to Matt (who you can see in the video interview above) for helping unwind some gnarly technical issues associated with changing Deep Zoom Composer to use DeepZoomPix.

As always, please send us  your feedback by posting on the forums or commenting below.

Cheers!
Kirupa & Janete

One of our goals for Expression Blend 3 is to provide better tools and user experience for visual designers. At a high level, we prioritized features that allow the designer to keep their focus on the artboard more often. This translated into an improved selection model, predictable layout, familiar and efficient keyboard shortcuts and a flexible and powerful gradient editing experience. This blog post is the first in a series that will highlight features and improvements targeted to the visual designer. Let’s start with the new gradient editing tools. The UI is subject to change for the final release but this overview should give you an idea of the features available in the Preview.

GradientToolUI

For Blend 3 we have separated out the Brush Transform tool into two different tools, Gradient and Brush Transform. The Gradient tool allows you to create and edit the properties of linear (LinearGradientBrush) and radial (RadialGradientBrush) gradients on the artboard. The Brush Transform tool allows you to transform any brush type by modifying the translation, rotation, scale and skew. These values are stored as a part of the RelativeTransform property on the brush. Separating out these tools gives you greater control and predictability of which properties are edited, creates cleaner XAML, and makes it easier to animate and bind gradient properties.

All you have to do to create a gradient is select the Gradient tool in the Toolbar or press the ‘G’ keyboard shortcut and click and drag to define the start and end points.  This creates a gradient for the selected object and sets start and end point to the same positions that you clicked and released the mouse.

The Gradient tool adorner shows the start point, end point, individual stops and the selected stop. Now you can use the adorners to edit the start (StartPoint) and end (EndPoint) of the gradient by rotating and dragging the adorner. To add a new stop press Alt and click anywhere on the line (Note: In the final release you will not have to press Alt, just click and release). To change the position of a gradient stop (Offset) just click and drag it along the line. To remove a gradient stop click and drag it off the line. To edit the color just double click on the stop and a color picker is displayed where you can select a color for the stop.

ColorPopup

Another really useful feature for editing gradients is the Gradient eyedropper. This is located in the color editor in the Brushes panel when you have an object with a gradient selected.

GradientEyedropperUI

Just select the Gradient eyedropper and click and drag anywhere inside or outside of Blend to grab a gradient.  For example, if I have a picture displayed in my browser with a nice gradient I can easily apply this gradient to my shape using the Gradient eyedropper by clicking and dragging:

selecting_my_gradient

Once the gradient has been selected, you will notice that your selected element in Blend now features the range of colors you selected earlier:

selected_gradient

The range of colors I picked in the above example was pretty simple, so you are able to see the four gradient stops and the colors they represent. For more complicated source images, you may have stops that are located close to each other. To adjust these stops, just zoom in to create more visual space between the stops on the artboard so that it is easier to select and edit them.

Closing Tips
By using the Gradient eyedropper, it can be easy to get some pretty complex gradients. Have you ever wondered how to reset the gradient back to the black to white default?  Blend uses the gradient from the object that was last selected. 

  1. Set your object to No brush in the Brushes panel.
  2. Select none by clicking on an empty area of the artboard or pressing Ctrl + Shift + A.
  3. Select your object and then select the Gradient brush tab.

There are also a few additions in the Brushes panel that will help you create and edit gradients.

  • Use the Offset editor to specify a value numerically.
  • Reverse the order of your gradient stops with the Reverse gradient stops button.
  • Select the previous or next gradient stop using the gradient stop iterator. This is useful for selecting stops when you have two stops with the same or very similar values.
  • Hover over a stop to get a tooltip of its offset and color value.

Finally, there is also an Advanced properties section for the Brushes panel that includes other brush properties like MappingMode, SpreadMethod and RelativeTransform:

brushesPanel2

Well, that’s the overview of the new gradient editing features in Expression Blend 3 Preview! I hope you find it easier to work with gradients.

Joanna

Jeff Kelly is back with Part II of his behaviors triple-feature. This time, he focuses on more details and provides some examples of a simple behavior, trigger, and action  - Kirupa

Behaviors and triggers are set on objects in XAML via an attached property, Interactions.Behaviors or Interactions.Triggers respectively. When created via XAML, the IAttachedObject interface is invoked behind-the-scenes to automatically associate your triggers, actions and behaviors with the objects they are attached to in the XAML. It is also possible to call the IAttachedObject members directly from code, although the XAML syntax for these operations is typically sufficient.

image

( Example XAML snippet of a Trigger and Action )

The heart of the behaviors API is the IAttachedObject interface. This interface provides three things: the ability to attach to a specified object, the ability to detach from any object you may be attached to and a property that provides the object to which the IAttachedObject object is currently attached to.
Triggers, action and behaviors all implement IAttachedObject. Additionally, each exposes two virtual functions: OnAttached and OnDetaching, which are called in response to the object being attached or detached to another object. Derived classes typically override these functions to hook/unhook event handlers, initialize state or release resources, and so forth.

A basic behavior has nothing more than what we’ve already described: an OnAttached and OnDetaching virtual and an AssociatedObject property. Depending on the desired behavior, the author may implement their behavior as a black-box, or they may choose to expose relevant properties to configure the operation of a specific instance of a behavior. One additional bit of functionality that is exposed by behaviors and specially tooled by Blend 3 are ICommand properties of behaviors. ICommand properties exposed on behaviors allow users of the behavior a way to interact with a behavior in configurable ways that will be explored in more detail in a future post.

The base class for creating a trigger is the TriggerBase class. The main addition to the basic API that Triggers introduce is the inherited InvokeActions method. A trigger typically hooks up event handlers or initializes some internal mechanism that will be used to determine when to fire (a timer, gesture engine, etc). Once a trigger has determined it is ready to fire, the author simply calls the inherited InvokeActions method and all Actions associated with that trigger will be invoked. This method accepts a parameter as an argument that will be passed to all Actions: this mechanism can be used to pass data between your triggers and your actions, such as EventArgs, or can be set to null and ignored.

Actions have the same basic API extensions as Triggers and Actions, but also require the author to implement the abstract Invoke method. This method is called when the action is invoked, and the functionality of the action should be implemented there. The base class for creating an action is TriggerAction.

One nice component of the API is the differences between Silverlight and WPF are minimal. A behavior written for one platform will need only changes to platform-specific code used in its implementation to compile against the other platform; the behavioral APIs are the same between platforms.

Type Constraints
When creating a trigger, action or behavior, you need to specify a type constraint. This will control the types that your type may be attached to and is particularly useful if you are assuming the existence of a specific event or property on your AssociatedObject. The type constraint is specified as a generic type argument provided to the base class in your class definition. For instance, if you want to write an action that only applies on types derived from Rectangle, you would define it as:

class MyRectangleAction : TriggerAction<Rectangle>

Note:
Your constraint type must derive from DependencyObject. If you don’t have a specific constraint, you should specify DependencyObject in the generic field of your derivative class definition.

image


Some Simple Examples
To wrap up this post, let’s look at some sample behaviors, actions, and triggers. Let’s start with a simple example of a behavior:

image

A simple trigger would look as follows:

image

Finally, here is a simple action:

image

This post was a mix between concepts and details. In a future post, I will dive into even more detail on how to write some of these behaviors.

Thanks,
Jeff

It’s been a week since MIX09 started, and since then, many of us Blenders have been busy writing blog posts describing the various new features from Expression Blend 3 in greater detail. This post will point you to those posts:

Blend 3 Overview:

Blend 3 Features:

If you have written any cool blog posts relating to Blend 3, please comment below and I will have another round-up in the near future…hopefully including a link to your post as well.

Cheers!
Kirupa :)

The following post is written by Jeff Kelly, one of the developers who worked extensively on both the behaviors runtime as well as the UI inside Blend that makes behaviors easier to use! In this post, he will provide an overview of the three components that make up what we collectively call “Behaviors” in the Expression Blend 3 Preview  - Kirupa

One of the major goals of Blend 3 is to make it easier to build interactivity into your applications. In Blend 3, we’ve introduced several new concepts that make writing and reusing interactivity easier than ever before. By writing triggers, actions and behaviors, developers can provide functionality that is cleanly encapsulated and reusable by both developers and designers. Likewise, designers are empowered to add a new level of interactive functionality to their work without ever having to touch a code file.

Triggers and Actions
To anyone familiar with WPF, triggers and actions should sound familiar. Blend 3 introduces a similar model, extends support to Silverlight as well as WPF, and allows you to write your own triggers and actions - opening a whole new world of possibilities for what kinds of functionality you can create and reuse in your own applications. Let’s look at what triggers and actions are at a conceptual level, and then dive a little deeper into the basics of the API.

An action is an object that can be invoked to perform an operation. If you think that sounds pretty vague, you’re right. The scope of an action is not constrained: if you can write the code to do something, you could write an action to do the same thing. That said, actions are best written to perform operations that are largely atomic in nature. That is, actions work best when they don’t rely on external state that needs to be persisted between invocations of the action, and that don’t have any dependencies on other actions existing or running in a particular order relative to their invocation.

Good actions

  • Change a property
  • Call a method
  • Open a window
  • Navigate to a page
  • Set focus

Actions aren’t particularly useful on their own: they provide functionality to do something, but no way to activate that functionality. In order to invoke an action, we need a trigger. Triggers are objects that contain one or more actions and invoke those actions in response to some stimulus. One very common trigger is one that fires in response to an event (an EventTrigger). Other examples might include a trigger that fires on a timer, or a trigger that fires when an unhandled exception is thrown.

One important thing to note is that triggers and actions are generally meant to be used together arbitrarily. In other words, you should avoid writing an action that makes assumptions about the type of trigger that invokes it, or a trigger that makes assumptions about the actions that belong to it. If you find yourself needing a tight coupling between a trigger and action, you should instead consider a behavior. Speaking of which….

Behaviors
Whereas the concepts of triggers and actions have been previously established in an earlier incarnation in WPF, the concept of a behavior is a new one. At a glance, a behavior looks similar to an action: a self-contained unit of functionality. The main difference is that actions expect to be invoked, and when invoked, they will perform some operation. A behavior does not have the concept of invocation; instead, it acts more as an add-on to an object: optional functionality that can be attached to an object if desired. It may do certain things in response to stimulus from the environment, but there is no guarantee that the user can control what this stimulus is: it is up to the behavior author to determine what can and cannot be customized.

As an example, consider a behavior that allows me to drag the object the behavior is attached to around with the mouse. I need to listen to the mouse down, mouse move, and mouse up events on the attached object. In response to the mouse down, I’ll record the mouse position, hook up the mouse move and mouse up handlers and capture the mouse input. On mouse move, I’ll update the position of the object as well as the mouse position. On mouse up, I’ll release mouse capture and unhook my mouse move and mouse down handlers.

My first inclination might be to try and use EventTriggers for each of these events, and write a StartDragAction, MoveDragAction and StopDragAction to invoke in each case. However, it soon becomes apparent that this scenario is not well-addressed by actions: I need to store state between invocations (previous mouse position and the state of the drag), and the operation isn’t atomic. Instead, I can write a behavior that wraps the exact functionality outlined above into a reusable component.

Conclusion
Hopefully this post gives you an overview of what makes up a Behavior – the catch all word we use for behaviors, actions, and triggers. In my next post, I will describe the API a bit more and provide some code snippets on how to write each of the behavior components.

Thanks,
Jeff

Christian Schormann has written a nice article on SketchFlow, so be sure to check it out at the following link: http://electricbeach.org/?p=145

Cheers!
Kirupa :)

Hi everyone,
To follow up on our announcements made today at MIX 09, we are excited to provide a preview of Expression Blend 3:


blendicon_3 Download Expression Blend 3 Preview

Expression Blend 3 Preview includes a lot of cool new features, and if you are attending MIX, the sessions we listed in our earlier post will give you a chance to see some of the new features in action. Once the sessions become available online, we will post them on this blog as well. Besides just the sessions, in the upcoming days, weeks, and months, this blog will also provide a detailed look at the various features Expression Blend 3 Preview contains from the various team members who were involved with their design and development.

Send us your Feedback
We would also love to hear from you on what you like about our preview and what you would like to see improved. Feel free to comment on the individual blog posts or post on the Expression Blend Forum!

Cheers!
Expression Blend Team

Note: The SketchFlow feature demoed at the keynote is not available in this preview, but we do hope to get that feature into your hands in an upcoming release.

Mix 09 this year is going to be pretty interesting – especially if you are an Expression Blend aficionado. You can see the full session information for all Expression Sessions here: https://content.visitmix.com/2009/sessions/?categories=Expression

The following are just the Expression Blend sessions chosen from the above list:

 blendSessionsList

Besides the speakers listed above, Lutz Roeder and I will be there as well. If you happen to stop by any of the above sessions, feel free to chat with any of us. We enjoy the company!

Cheers,
Kirupa :-)

More Posts Next page »
 
Page view tracker