Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Use SimpleStyles to Easily Style System Controls

    • 3 Comments

    While Blend makes it easy for you to create your own controls, creating your own control may not always be the best solution. In many cases, especially when you want to change how a control looks, styling an existing control may be a better choice. While you can style any control by using Blend's UI, modifying system controls can be time consuming if you are new to WPF and not sure what the consequences of modifying a particular property may be. To make it easier on you, Blend includes a resource dictionary called Simple Styles.xaml that applies an easily-modifiable style to your commonly used system controls.

    To use these simple style controls, go to your Asset Library and select Simple Styles under the Controls tab:

     simpleStyles

    You will see the simplified versions of your system controls, and they are just like your system controls...except much easier to style.

    The User Guide provides great coverage of how to use simple style controls, so if you need any further information, hit F1 or go to Help | User Guide. In the User Guide, you can find Simple Styles listed under Home | Controls | Working with simple styles, or you can do what I did and just search the User Guide for "simple styles" instead!

    Cheers!
    Kirupa Chinnathambi

  • Expression Blend and Design

    Expression Blend Service Pack 1 Released

    • 3 Comments

    Yesterday, we released the Expression Blend Service Pack 1, and you can download it from the following location. One of the major goals of this service pack was to make sure that Visual Studio 2008 was better supported, but we made other minor fixes and changes also.

    You can see a comprehensive list of the changes in the following document, and there is more coverage of this release on Soma's blog.

    Thanks,
    Expression Blend Team

  • Expression Blend and Design

    MIX08 Session: XAML-Ready Agency with Expression Blend

    • 3 Comments

    Hello!

    We had such a blast at MIX08!  I hope you had a great time too. I had a session on Friday called XAML-Ready Design Agency with Expression Blend. I feel very happy for meeting all the folks that were able to join us during the session. I have published all the assets for my session including the DeepZoom “slide deck” we used during the session (We decided not to use PowerPoint anymore, just DeepZoom, thanks to Kirupa).

    I’m also including my source Expression Design file to my slides and all the other assets by Celso, Sam Paye, Kim Sealls and Dan Cook. Now you can see for yourself how some of the assets used in the presentation such as the image you see below were created:

    RussianDolls 

    Feel free to re-use, just add a note mentioning the source :-) You can find more news about training related topics for designers @ ux.artu.tv.

     

    Thanks!

    Arturo | Designer Audience Product Manager

  • Expression Blend and Design

    Meet Members of the Blend and Design Teams at MIX

    • 3 Comments

    As many of you know, MIX is Microsoft’s design-focused conference held in Las Vegas near the beginning of each year. Last year, the focus was all about Silverlight 2. Looking through the list of sessions posted so far, the buzz seems to be around Silverlight 3.

    A group of us from the Expression Blend and Design teams will be there, so if you are going to be in the Venetian, feel free to drop by any of the Expression sessions and chat with us. We would love to hear from you.

    If you are undecided on attending, there is a discount if you register by February 14th, so click here.

    Cheers!
    Kirupa :-)

  • Expression Blend and Design

    Do You Want to Help Implement Interesting Ideas? The Blend Team needs you!

    • 3 Comments

    A few months ago, we asked you for feedback on what are some of the things you would like to see improved in Expression Blend. You all had a lot of great suggestions...A LOT. If you are interested in helping us both implement some of the feedback but also help define cool features,  we are looking for Program Managers to join our team!

    The specific job details can be found on the following links for our two current PM spots: Position 1, Position 2.

    Cheers!
    Kirupa

    EDIT:
    Updated post to reflect an additional PM opening we have.

  • Expression Blend and Design

    Where do You Go to Learn More About Expression Blend?

    • 3 Comments

    One of the things that we are planning on doing is providing easier access to learning content. Besides the influx of learning content (videos, articles, etc.) we will be generating ourselves, we also want to link to content around the web that many of you like as well.

    Please comment below on sites, blogs, etc. that you have found very useful for learning more about Expression Blend. In the future, I will create a follow-up post that will hopefully act as a central location we can point individuals to if they want to learn how to use Expression Blend.

    Thanks,
    Kirupa

  • Expression Blend and Design

    Deep Zoom Composer : (Possible) Collection Layout FIX

    • 3 Comments

    If you’ve browsed through the Deep Zoom Composer forums lately, you will have seen a few cases where Deep Zoom Composer was having difficulties maintaining layout when exporting collections. More specifically, the arrangement and position of images seen inside Deep Zoom Composer was not what you saw when you previewed your collection in your browser.

    If this describes the handful of you who were having difficulties, we have a manual solution for you until we release our next version of Deep Zoom Composer. The solution is for you to open your dzc_output.xml file in Notepad and do a find/replace on all instances of commas ‘,’ with periods ‘.’ instead:

    image

    Save your dzc_output.xml file, and you should be set!

    The problem is that in certain locales, commas are used to indicate precision as opposed to decimal units. Replacing the commas with periods will take care of this issue for you. In the next release of Deep Zoom Composer, we will take care of this automatically so you don’t have to worry about it.

    Credit for finding the cause of the problem and the possible solution goes to Avi Dunn and Rado Nickolov of the Live Labs team.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Using the KeySpline Editor to Add Animation Easing

    • 3 Comments

    Previously on the blog I’ve explained how a KeySpline can be used to do animation easing. I also demonstrated a tool for converting an animation curve (in this case a Path drawn in Blend) into an actual animation.

    This time let’s look at the new KeySpline editor in Blend 2 and walk through an example of how to visualize and edit your easing graphically. If you want to follow along, create a new project (WPF or Silverlight) and draw a red-filled circular Ellipse at the top of the page to serve as our falling object. Create a new Storyboard, move the playhead to time 1 and move the Ellipse to the bottom of the page and change its Fill to gray. If you preview the Storyboard now, or build and run, you’ll see the ‘ball’ falls at a steady rate and changes color at a steady rate. Now, what if we want the ball to look like it’s falling under gravity (so, speeding up as it falls) and cooling down from red-hot back to gray (so, cools quickly at first, then more slowly).

    In Expression Blend 2 you can actually select a keyframe and edit its KeySpline. The KeySpline is the thing that determines how the animated property changes between the previous keyframe and the keyframe you selected. You can think of each keyframe as being a point on a curve. Each keyframe is connected to the one before it by a segment of this curve. So selecting a keyframe then editing its KeySpline is actually editing the shape of the curve between the selected keyframe and the keyframe before that. Even the first keyframe has a curve going from time 0 to the keyframe (a special case of this is when the first keyframe is at time 0, in which case that curve has no size so editing it will have no  effect).

    Let’s see how to edit the KeySpline to get the acceleration and cooling behavior we want. With the Storyboard still open, go to the object tree and expand your ellipse. Now select the keyframe icon on the RenderTransform row by clicking it once:

    image

    In the property inspector you’ll see an Easing category inside which is the KeySpline editor. It’s currently a straight line but you can drag the two yellow control point handles around to change that, or use the number editors below to edit the coordinate values more precisely. Make the KeySpline look like the picture below.

    image

    Across the top of the KeySpline editor is a little graphic that serves as a reminder for where your selected keyframe lives on the curve you’re editing. I’ve put a red circle around the gray graphic representing your selected keyframe. Remember, the selected keyframe is the one at the end of the curve segment you’re editing. The previous keyframe (or the value at time 0 if you’ve selected the first keyframe) is represented by the lighter keyframe icon graphic at the top-left. So this curve is showing that the animation from the value at time 0 to the value of your selected keyframe makes very little progress in the first half of its duration but then makes up for that towards the end by changing the value very rapidly. Imagine this behavior with respect to the position of a falling ball and then preview your Storyboard, or build and run, to see the new curve in action.

    For the cooling effect, you want a differently shaped curve. This time you’re animating from Red to Gray but you want to progress along this animation rapidly at first then slowing down. So select the keyframe on the Fill row and make its KeySpline look like this:

    image

    You can create more interesting curves, including inflection points, by moving both control points (the yellow handles). Have fun and please keep the Blend feedback coming.

    Steve

  • Expression Blend and Design

    Round-Up of Blog Posts (and other Activities) by the Expression Blend Team!

    • 3 Comments

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

  • Expression Blend and Design

    Working with Layout when DataContexts are Involved

    • 3 Comments

    Hi everyone,
    When using Expression Blend, a common task you probably engage in is working with layout. Tasks I commonly associate with “working with layout” involve moving things around, rearranging the order of elements, ensuring everything flows when resized, changing your layout container, etc. For the most part, the changes you make to the layout of your application are pretty harmless…except when it involves DataContexts.

    In a nutshell, data contexts allow you to specify the data that elements can inherit and work with. Seems pretty harmless so far. Data contexts can be set on pretty much anything, but because the data is inherited, data contexts are often placed on parent elements (such as a layout container) whose children will inherit the data:

    dataContext

    What seemed harmless earlier now has the potential to cause trouble. Because data contexts are often placed on a layout container, and because data contexts primarily benefit any children listening in, you need to ensure that any layout changes you make do not cause your data context to break. The common ways your data context can break are:

    1. Reparenting a Child
      When a child is inheriting data, do not reparent the child to a location where the data context is no longer inheritable. This will cause your child to look for something that doesn’t exist.
       
    2. Ungrouping a Layout Panel
      Blend makes it very easy for you to ungroup children from a layout container. When you ungroup a layout container that has a data context set on it, the data context your children rely on will be lost.

    Today, Blend does not let you know when you perform a layout operation that breaks data context. It is up to you to be vigilant, and you can see which element has a data context set on it by looking at its DataContext property:

    datacontextproperty

    If this property isn’t empty, it means that a data context has been set on it. While having a data context set should not imply that data is actually being used, it is a good gauge on whether a layout operation you perform will have any negative side effects on the children involved.

    Cheers!
    Kirupa =)

  • Expression Blend and Design

    Windows Phone Developer Tools Released!

    • 3 Comments

    Today, we have released the final version of the Windows Phone Developer Tools. You can download it below:First, download everything you need below:


    blendicon_3 Windows Phone Developer Tools

    This installer will automatically install free, phone-flavored versions of Expression Blend, Visual Studio 2010, and XNA Game Studio.

    If you already have Expression Blend 4 installed, unlike earlier releases, running this installer will update your existing version of Expression Blend 4 and give you the ability to create Silverlight, WPF, and Windows Phone applications:

    blendProjectTypes

    Thanks to everyone who has provided feedback over the past number of releases to help us get to this stage. As always, if you have any additional feedback, feel free to post them on the Windows Phone Developer Forums.

    - The Expression Blend Team

  • Expression Blend and Design

    Say “Hello” to BlendInsider

    • 2 Comments

    Hi everyone,
    If you have watched the BUILD keynotes and sessions, you may have seen some exciting things about Expression Blend’s support for Metro-style applications.

    For all future news and updates concerning Expression Blend, please visit our new team blog called BlendInsider. The BlendInsider blog will provide you with the types of content you found here…and hopefully much more!

    This blog will be kept around for archival purposes, but no new content will be added.

    See you all “on the Inside!”

    Cheers,
    Kirupa

  • Expression Blend and Design

    Expression Blend Sessions from TechEd

    • 2 Comments

    A few weeks ago, a couple of Expression Blend team members presented at the TechEd conference held in New Orleans this year!

    You can view those sessions given by Unni/Alan and Dave below:

    Get Microsoft Silverlight

    Get Microsoft Silverlight

    You can browse through all of the sessions by clicking here.

    Cheers,
    Kirupa =)

  • Expression Blend and Design

    Switching Visual States Easily using GoToStateAction

    • 2 Comments

    Over the next couple of weeks, it seems like a good idea to go over some of the behaviors we shipped as a part of Expression Blend 3. Many of you have mentioned that you would like to learn more about the stock behaviors we ship and how they are used, so this blog will be a good interim solution for that until we properly incorporate your feedback into our future product documentation.

    - Kirupa

    First up on our list is one of my favorite behaviors that we shipped, the GoToStateAction!

    What is it?
    As you know, you have the ability to define and modify your own visual states in your applications:

    newLargeState

    Having a visual state is only one part of what needs to be done. The other part is actually being able to switch to the visual state at the appropriate time. For predefined visual states that you find in your controls, the mechanism for switching states is built in. For visual states that you create on your own, you will have to provide the logic for switching the visual states yourself.

    That is where this behavior comes in. The GoToStateAction allows you to easily switch visual states given an appropriate event using just your Properties Inspector. The following screenshot shows you the standard behaviors UI customized with the properties exposed by GoToStateAction:

    GoToStateActioon

    Let’s look at some of these properties in greater detail.

    Using It
    Like I mentioned earlier, this behavior primary functionality lies in allowing you to change the visual state. How it does might require some further inspection, so let’s look at the various properties in more detail.

    Picking the Visual State
    The visual state is set via the StateName property. By default, you will see all the states defined in your root scope (ie: UserControl or Window) regardless of where you drag/drop this behavior onto. You can change this by targeting this behavior at another element.

    For example, the default target is my UserControl where I have two states defined:

    default_target

    If I were to target another element, such as a Button that contains its own states, the StateName list is populated with those states instead:

    button_target

    I spoke a lot about changing the target that your states come from, so let’s look at the TargetName property where the element you wish to target is actually specified.

    Changing the Target
    If you want to target states that live somewhere else such as another Control or UserControl, you can use the TargetName property to change the element you want to point to. As mentioned earlier, the default value for TargetName is the root scope such as your UserControl or Window.

    You can change the default by clicking on the little circular icon in the value editor to visually pick another element from your Artboard or Objects and Timeline panel:

    targetname

    If you are trying to pick something that isn’t easily selectable visually, you can hit the little … button to see a flat listing of all of your elements. That is similar to what you see in the Objects and Timeline panel.

    Playing Transitions
    You can either switch states suddenly, or you can smoothly transition into states. The UseTransitions property is what controls what your behavior will do. By default, the UseTransitions property is checked, but you can uncheck it if you want a sudden switchover to your new state.

    Conclusion
    Hopefully this helped provide you with a summary of the GoToStateAction and how it can be used. If you have any questions, please feel free to comment below.

    Cheers!
    Kirupa :-)

  • Expression Blend and Design

    Meet Members of the Expression Blend, Design, and DZC Teams at Mix 09!

    • 2 Comments

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

  • Expression Blend and Design

    Link Round-Up: Behaviors-Related Posts

    • 2 Comments

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

  • 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

    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

    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

    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

    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

    Nibbles Tutorials: Snack Tutorials for Hungry Designers

    • 2 Comments

    A great site that covers designer-oriented Expression Blend topics is Celso Gomes’s Nibbles Tutorials site:

    celsog

    This all-Silverlight site features some nice articles on how you can use Blend to create WPF, Silverlight 1, and Silverlight 2 applications. He recently updated it cover the new features in Blend 2.5 such as the Visual State Manager, so if you’ve been itching to learn more about it, head on over to his site.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Slicing Images in Expression Design 2

    • 2 Comments

    You've just downloaded the new release of Expression Design 2 and you're anxious to try the new slicing feature. This article will guide you through the process of creating slices which will then be exported to an HTML document. To follow along with the steps outlined below, please download the frog.zip file. Let's get started.

    Positioning

    Expression Design uses absolute positioning in CSS to position objects in HTML documents. Where the objects are positioned in the artboard is where they will appear in a web browser after exporting the slices to an HTML document. (Remember that the artboard is the area within the Document Frame.) For example, if you want your design to be positioned beginning in the upper left corner of the browser window, position your objects starting in the upper left corner of the artboard. Once your layout is exported to an HTML document, you may alter the positioning in Expression Web.

    Another important consideration is the order in which your slices appear in the Slice Layer, which is created after you create your first slice. Just like the stacking order of objects in Design, the order in which your objects appear in the Slice Layer determines whether the objects are above or below other objects in the HTML document; more on this in the next section.

    Creating Slices

    There are two methods of creating slices in Expression Design. The first method is to choose the Slice tool in the Toolbox and drag around the area you want to define as a slice. Let's do that now. Choose the Slice tool, the 7th tool from the top in the Toolbox (shortcut letter k), and drag from the upper left corner of the frog image to the botton right corner past the drop shadow on the bottom and right sides of the image. When you release the mouse a light blue, transparent object appears over the image. This is the slice.

    When you create the first slice you'll see that a new layer is created in the Layers panel, named Slice Layer. Expand this layer and you'll see an object named Slice1 followed by a file type extension. This is a good time to rename the slice because the slice name will be the name of the exported image and of the CSS class by which the image is referenced in the HTML document. To rename the slice, double click on the slice name in the Slice layer and then type the new name FrogImage and press the Enter key to accept the new name. There's no need to type the file extension as Design will add this for you.

    The second method of creating a slice is to right click on a selected object and choose Create Slice from Selection from the context menu. You can right click on a selected object using the slice tool or any other tool in the Toolbox. Once you choose the Create Slice from Selection option from the context menu, that slice will appear at the top of the slice layer, above previously created slices.

    Regardless of which method you choose to create your slice, it's important to know that the slice will include anything that is visible on top of the object you're creating the slice from. If we were to right click on the gradient filled object at the top of the artboard, the slice would not only include the gradient filled object but also the Green Team text object and the part of the frog image that overlaps the gradient filled object. To eliminate these items from the slice, we'll hide those objects before creating the slice. Let's create a slice using right click method next.

    Expand the layer named Layout in the Layers panel. A new feature in Design 2 allows us to hide individual objects within a layer. Click on the eye icon to the right of the text object named Green Team to hide the Green Team text on the artboard. Locate and click the Eye icon next to the grouped objects named Frog Image to hide the image. Now click on the gradient filled object at the top of the artboard, and then right click on the selected object and choose Create Slice from Selection. Notice that a new slice is added to the slice layer, above the FrogImage.png object, named Slice2. Mouse over the newly created object and notice from the popup preview that the slice includes only the gradient filled object.

    Now click on the eye icons to the right of the Frog Image group and the Green Team text objects to make those objects visible again, mouse over the newly created slice again and notice that these previously hidden objects still do not become part of the new slice.

    Rename your new slice GradHeader.png. Your Layers panel should now look like this:

    Before we move on the adjusting the slice properties we've made so far, go ahead and create slices for the remaining objects which include the Green Team text above the gradient header (remember to hide the gradient filled object first), the navigation bar (hide the buttons and frog image first) and the buttons on the navigation bar (hide the buttons first). Remember to rename the slices as you want them to appear in the final HTML export.

    If you expand the Layout layer in the Layers panel you'll see that the buttons are grouped objects. There is no real advantage to grouping these objects because as long as the text on the buttons aren't hidden first, the text will be included when you create a slice of the button. I simply grouped the objects to make a more organized layout; either way, the results are the same.

    Adjusting Slice Properties

    Click on a slice in the Slice Layer and notice that the Appearance panel is replaced with an Edit Slice panel. Here you can make adjustments to the selected slice properties. A slice will default to a .png file extension but if your slice is a photo you would probably prefer to export the slice as a .jpg file. If this is the case, you would locate the Format value box and, using the arrow to the right you would select the .jpg format. Expand the drop down list now and see what options you have to choose from. When you change a file extension the slice in the Slice Layer will change to reflect the new chosen format file extension and the options in the Edit Slice panel change to the options available for your chosen format. The value box containing Slice contents allows you to see what is included in the slice so you can check or uncheck the objects you wish to include in the slice.

    A large preview window also appears in the Edit Slice panel giving you a visual of the expected output of the slice. You can experiment with changing the values of the various value boxes and checking and unchecking other options to see the results of your adjustments.You also have the ability to change the dimensions of the slice in the Width and Height value boxes in the Edit Slice panel. For the GreenTeam.design file we can accept the default .png file format and the values set by default for our slices. Let's move on the exporting and viewing the compiled HTML file.

    Exporting to HTML & Slices

    Choose File > Export from the menu bar. In the resulting dialog box, choose Slices in the Items to Export section. You'll see each individual slice in the preview window. Clicking each slice will highlight the slice in the preview. When you're satisfied with the slices, choose HTML & Images in the value box to the right of the Container Name value box and type a name in the Container Name value box. Again, it's not necessary to add the .html file extension as Design will do this for you. Accept or change the Location where the HTML file will be saved and then click the Export All button to create the HTML document and image slices.

    Navigate to the HTML file in Windows Explorer where you saved the document. Notice that the image slices were saved in a separate folder using the name you gave the document in the steps above followed by _files. This makes it easy to change the location of your images if you choose to do so at a later time. Double click on the HTML file to launch Internet Explorer and view your masterpiece. If all went well, you're done and ready to pass the files along to the web designer who will open the and work on the file in Expression Web.

    Before wrapping it up, you might explore the different export container options. In additions to HTML & Images, you can export to XAML WPF Canvas, XAML Silverlight Canvas and XAML Resource Dictionary.

    - Annie Ford

  • Expression Blend and Design

    AdventureWorks Product Photos - a new EID tutorial

    • 2 Comments
    We have published a new Expression Interactive Designer tutorial targeting the January 2006 CTP. It's called AdventureWorks Product Photos [1]. Here's the overview:

    In this tutorial, you will process an ADO.NET DataTable into an ObservableCollection ready to be bound to controls within Expression Interactive Designer. The first task requires Visual Studio 2005 and SQL Server 2005 (with the AdventureWorks sample database installed). If you prefer, you can fill an ADO.NET DataTable or DataSet from another source. If you do so then please skip the first task and then adapt the remainder of the tutorial to suit the shape of the data you have. The principles will be exactly the same.

    Also remember that there are several tutorials in the Article Categories section over on the lower right of the blog. For other tutorials targeting the Expression Interactive Designer Jan 06 CTP, please see the Samples and Tutorials Gallery [2] for that product. It's recommended that you begin with the Fabrikam Catalog series of tutorials as these provide the basics on which the other tutorials build.

    [1] http://blogs.msdn.com/expression/articles//528008.aspx

    [2] http://blogs.msdn.com/expression/articles/516697.aspx

  • Expression Blend and Design

    Binding to data which loads in the background

    • 2 Comments

    This is to announce that Karsten has a blog post (authored by Andrew Whiddet) on the subject of asynchronous data binding [1]. It's likely to be of interest to you if you're a software developer or you're a designer with a developer sensibility. It's relevant to our previous post about the AdventureWorks Product Photos [2] sample and tutorial which loads data from a database into a collection ready for data binding inside Expression Interactive Designer. Typically, data access is expensive in time, so a good pattern is to keep the user-interface responsive whilst the data loads in the background as the post discusses.

    [1] http://blogs.msdn.com/karstenj/archive/2006/01/27/518499.aspx

    [2] http://blogs.msdn.com/expression/archive/2006/02/08/528041.aspx
Page 6 of 9 (217 items) «45678»