Expression Blend and Design

The team blog of the Expression Blend and Design products.

January, 2008

  • Expression Blend and Design

    Clip Path Editing and Animating in Blend 2!

    • 12 Comments

    Due to popular demand we have added the clip path editing/animating feature to Blend 2. Clip path editing works for both WPF and Silverlight 1.0 projects. You can download the December Preview to test out the new features! In this post, I will go through some of the interesting things you can do with this feature!

    What is a Clipping Path?
    A clipping path is a path or shape that is applied to another object, hiding the portions of the masked object that fall outside of the clipping path. For example, the following image shows you a separate individual image and text object on the left, but thanks to clipping paths, on the right you have just the image object with everything outside of the Seattle text hidden:

    seattle

    Using a Path Object to Apply a Clipping Path
    Let's take a quick look at how to use clipping paths in Blend:

    1. With the selection tool select the path or shape that you want to turn into a clipping path, hold CTRL, and then select the object that you want to clip. (Make sure that the clipping path object is in front of (in Z order) the object that you intend to clip.)
       
    2. On the Object menu, point to Path, and click Make Clipping Path. You can also right click on the two selected objects and select Make Clipping Path under the Path options.

    The left image below shows the path overlaid on our image, and on the right, you see the image visible through the region created by our path:

    clipPathImage 

    Editing a Clipping Path
    You just saw how to apply a clipping path, so let's next look at how you would edit a clipping path. In Blend 2 you now have all path editing capabilities used to edit regular paths applicable to editing clipping paths as well.

    1. Select the object with the clipping path applied. In this case you select the Image object.
       
    2. Select the direct selection tool. Note that the clipping path is displayed as the purple outline. The clipping path consists of points and segments just like a regular path.
       
    3. Click and drag a segment on the clipping path to edit as you would a path object. You will be able to edit the clipping path by using the same artboard gestures and keyboard shortcuts associated with path editing.

    The following image shows you how manipulating the path preserves the overall masking efffect that we expect:

    editingClippingPath

    Releasing a Clipping Path
    You saw how to create a clipping path, and you also saw how to edit a clipping path. Let's look at how to actually release a clipping path. It's pretty straightforward:

    1. Select the object that is being clipped.
       
    2. On the Object menu, point to Path, and then click Release Clipping Path.

    Note: In Blend 1 you only had the option of removing the clipping path, and that would remove the original clipping object from the artboard. This behavior has been improved in Blend 2 by allowing you to release the clipping path without removing the clipping object!

    Animating a Clipping Path
    In Blend 2, along with being able to edit clipping paths you can also use the full animation capabilities used to animate regular paths to animate clipping paths as well. You can also take advantage of the structure changes supported by vertex animation.

    Let's look at that in greater detail:

    1. Select the object with the clipping path applied. In this case you select the Image object.
       
    2. Add a storyboard in the Objects and Timeline panel.
       
    3. Select the direct selection tool. Note that you can single click any point or segment to select or you can double click the clipping path to select all of the points and segments to move them all at once.
       
    4. You can then use the vertex animation features to create interactive animations with the clipping path.

    As seen in the following image, you can apply vertex animations to clipping paths. This can be used to easily create interactivity such as the “spotlight effect”:

    animatingClippingPath

    Interop with Design
    You currently have the ability to import files into Blend created with Expression Design with clipping paths or copy/pasting objects with clipping paths applied from Design->Blend.

    In Blend 2 we also support editing/animating of these clipping paths. Below is an example of me creating a clipping path in Expression Design:

    texas

    To import an object with a clipping path from Expression Design to Blend 2 you can simply copy the element from Design and paste it into a Blend project. Below is an example of an image object from Design pasted into a Blend 2 Silverlight 1.0 project.

    blend2DecPreview_CP

    Conclusion
    As you can see you can create a variety of visual and interactive effects by creating, editing, and animating clipping paths in Blend 2. Give the features a try and let us know if you have any feedback!

    Happy Blending!
    Janete Perez

  • Expression Blend and Design

    Using Design-Time Attributes to Categorize Dependency Properties in User Controls

    • 7 Comments

    In most cases, when you create user or custom controls, you will expose dependency properties to allow you to set values or make modifications to your control directly via XAML. Because XAML is the language of Blend, Blend will expose those dependency properties in the property grid itself. For example, let's say you have a user control that displays information in a colored box:

    helloWorld

    This user control has two dependency properties. The first property is called QuickInfo that displays some text such as "Hello World!", and it returns a value of type String. The second property is called BackgroundColor, and as its name implies, sets the background color of our user control. As you may guess, the BackgroundColor property returns a value of type Brush.

    Default Behavior
    In Blend, if you select a user control on the design surface, by default, any dependency properties you expose are displayed in the property grid. Blend looks at the return type of each dependency property and categorizes it in the appropriate location accordingly.

    For example, our BackgroundColor dependency property will find its way into the Brushes panel because it returns a value of type Brush:

    bgColor

    Our QuickInfo dependency property isn't quite as lucky. Because QuickInfo simply returns a string, Blend doesn't know exactly where to place it. Any dependency properties you create that can't be easily categorized are placed in the Miscellaneous panel:

    qiProp

    For just two dependency properties, the default behavior may be fine. If your user control has a lot of dependency properties or someone other than yourself will be using this user control, then you should look into categorizing them.

    Using Design-Time Attributes
    To help design tools such as Blend and Visual Studio, the .NET Framework allows you to use design-time attributes. The following MSDN article (http://msdn2.microsoft.com/en-us/library/tk67c2t8.aspx) goes into greater detail, but in a nutshell, you can specify the category and a description for your dependency property. Blend will take care of the rest.

    The general format for a design-time attribute is [Category("Value"), Description("Value")]

    In your  user control's code-behind file, in Visual Studio, find the locations where you declare the CRL wrappers for your dependency properties. Above the declaration, add your design-time attribute. For example, the following is what I declared above my BackgroundColor wrapper:

    infoBubbleBGDP

    I do something similar for my QuickInfo dependency property also. Once you have provided the category/description for each dependency property you are interested in, go back to Blend, rebuild your project, and select the user control whose code you modified in Visual Studio. Look in your property grid. At the very bottom, you will see your custom categories and properties that fall under them.

    In my case, I categorized both of my dependency properties into InfoBubble:

    infoBubbleDP

    If you hover over each dependency property's name, the description value you provided will display:

    summary

    Conclusion
    As you can see, by using design-time attributes, you have some flexibility over how Blend will behave when faced with a dependency property that it doesn't know how to categorize. Beyond design-time attributes, there are many other classes of attributes that various developments tools such as Blend and Visual Studio listen for, so be sure to look into them and see if they can help you out.

    Cheers!
    Kirupa =)

  • Expression Blend and Design

    Two of the Best Kept Secrets in Expression Design

    • 4 Comments

    There are two special tools that I use constantly that many users of Expression Design don't discover immediately.

    Attribute Dropper
    The first is the attribute dropper:

    attributeDropper

    The attribute dropper allows you to copy the fill, stroke and effects from one object to another object in one graceful swipe.  To use it:

    1. Select the Attribute Dropper tool.  You can also use the keyboard shortcut, Shift + I.
       
    2. Press on an object that have the desired appearance and drag onto your target object. Release when you are over the target
       
    3. The appearance will be transferred from the first object to the second.

    At first, it might feel a little odd, since many other art tools require you to select your target object.  However, it ends up being very efficient. Instead of endlessly selecting objects and clicking on destinations, you can drag your desired appearance from shape to shape in a series of quick short motions.  You don’t need to worry about switching to the select tool. You don’t need to worry about navigating the hierarchy of your drawing.

    Gradient Transform Pop-up
    The second is the gradient pop-up panel:

    GradientTransform

    This is a little icon located in the gradient panel.  When you click on it, the numerical position of your gradient will appear.   Here’s how I use it.

    1. Click and drag on any of the number to move them about.
       
    2. You’ll see your gradient change in real time on the artboard.
       
    3. If you are dealing with a radial gradient, you can unlink the width and height to create elliptical gradients.

    I use gradients as my primary method of shading objects. It is how you make an otherwise flat vector object glossy or rounded. Having access to the actual numbers is a godsend since I can now place the gradient on my artwork with far greater accuracy than I could just using the gradient transform tool.

    Take care
    Danc. 

Page 1 of 1 (3 items)