Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Expression Blend 2 and Expression Design 2 Released!

    • 7 Comments

    In case you missed our announcements and 3rd party coverage, we shipped Expression Studio 2 yesterday! You can download trial versions of all our applications by visiting our Downloads Page!

    This post will focus more on Expression Blend and Design, and since Expression Blend ships in its own box as well, check out our cool box design:

    ExpressionBlendBox

    Our version 2 release comes around just a year after we shipped version 1, and there have been a slew of new features that we’ve added. Many of you have already played with them through the various previews we’ve released over the past year, but just for fun, I’ve tried to list the ones, in no particular order, that come to my mind:

    Support for Visual Studio 2008 and WPF 3.5

    Silverlight 1.0 Support with built-in JS Editor

    UI Refinements (More incremental search, ability to close panels, etc.)

    Storyboard Picker for Managing your Animations

    Vertex and Clipping Path Animations

    KeySpline Editor for Editing Ease In/Out

    SplitView for Seeing your Design as well as the XAML

    Importing from Expression Design

    Font Subsetting

    Design-time Sizing

    Easier Ways to Incorporate Media

    New WPF and Silverlight Samples

    Support for more Object Manipulations (Being able to uniformly scale, resize, and rotate multiple selected elements.)

    Breadcrumb Bar

    Making and Editing User Controls from the Design Surface

    Being able to export Slices in Expression Design

    I’m sure there are some that I’ve missed, so be sure to check out the higher-level feature overviews of Expression Blend 2 and Expression Design 2 from our newly re-designed Expression Studio product site.

    What are some of your favorite features? What are some of the features you would like to learn more about?

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    .NET Framework 3.5 Service Pack 1 Beta and Expression Blend

    • 27 Comments

    Recently, a beta of .NET Framework 3.5 Service Pack 1 was released. There is currently an incompatibility with Expression Blend/SP1, Expression Blend 2, and Expression Blend 2.5 March 2008 (whose version number is 2.1.1111.0) where Blend will not work if you have .NET Framework 3.5 SP1 Beta installed.

    We currently have a version of Expression Blend 2.5 March 2008 Preview (referred to as Blend 2.5 Preview from now on) that fixes this incompatibility, but you will only be able to create and edit WPF and Silverlight 1 projects. While Blend 2.5 Preview will also allow you to create and edit Silverlight 2 projects, they are not supported by Visual Studio at this time.  If you are doing any Silverlight 2 development, please do not install .NET Framework 3.5 SP1 Beta until a future Silverlight Tools update is made available.

    Download Updated Blend 2.5 Preview
    If you downloaded and installed a version of Blend 2.5 Preview prior to May 9th, please uninstall your existing version of Blend 2.5 Preview and install the updated version of from the following link:


    blendicon Download Refresh of Expression Blend 2.5 March 2008 Preview

    Once you have the latest version of Blend 2.5 Preview installed, you can verify that you are running the latest version if your build number is 2.1.1113.0 by going to Help | About:

    clip_image002

    If you are running an earlier version of Expression Blend such as V1 or V2, please do not install the .NET Framework 3.5 SP1 Beta. Instead, please wait for the final release of .NET Framework 3.5 SP1 that will be compatible with all versions of Expression Blend.

    Sending us Feedback
    If you have any questions or encounter other issues while running Expression Blend 2.5 on .NET Framework 3.5 SP1 Beta, please let us know by posting on our forums.

    Thanks,
    Pete

    Update (13 May 2008)
    There’s been some confusion around the date of this blog post- the date that it’s picking up is when we originally discovered that we’d have to do an update to Blend coinciding with the 3.5 SP1 Beta and prepared the original draft of the blog post that we’d use to communicate the issue.

    The publish date was completely accidental- just a byproduct of trying to coordinate releases. Sorry about the confusion, we really weren’t trying to be sneaky at all!

  • Expression Blend and Design

    End to End Hands on Lab – Blend 2.5 and Silverlight 2!

    • 9 Comments

    Our colleagues in Microsoft Switzerland have published a comprehensive hands-on-lab that explains in detail everything you need to get started with creating Silverlight 2 applications using Blend 2.5.

    You can learn more and download the project files from here: Silverlight 2 Beta 1 Hands-on-Lab

    They cover a lot of great topics including templating, isolated storage, and more. Beyond just talking about it, they provide actual projects for you to play with. They even have a Deep Zoom collections demo:

    deepZoomPost

    If you are looking to make the jump into Silverlight 2, then this lab is a good place to start!

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Living Without App.xaml (…and still being able to use Blend!)

    • 7 Comments

    While default WPF (and Silverlight) projects make it very easy for you to get up and running with your application for a majority of scenarios, often, there are scenarios where you want better control of your application. A good example of this scenario is the Expression Blend source code itself. We perform a number of tasks (for example, displaying a splash screen) before the main application Window is shown to you.  For making this happen, we don’t use the App.xaml concept in WPF projects, but instead go with a code generated Application object which gives us better control over how things work. We then load a number of external resource dictionaries that control the look and feel of our application into the Application’s resources.

    However, the lack of App.xaml causes issues when you design your application inside Blend. Blend provides a lot of design-time experiences around App.xaml – for example, all resources in App.xaml are always available in all the projects that are referenced from the main project. This is essentially a feature that lets you easily centralize your shared resources across control libraries into one location. Another example is that we allow you to link your external resource dictionaries into App.xaml, again, to make sharing of resources easier for you.

    If you ever run into this, you can use another feature in Blend to work around this issue. You can include your App.xaml into the project file on a conditional basis such that when the project is loaded inside Blend, you get the normal experience that you are comfortable with. While building your application, though, App.xaml is not included in the build process, so your code continues to work as before (for example, WPF automatically creates an entry point for your application when you build App.xaml, but you might already have an entry point defined in code).

    The below sample will show how you can leverage this by just making a couple of lines of edit to your project files. Essentially, the changes to the project boil down the following two lines:

    <DesignTime Condition="'$(SolutionPath)'!='' AND Exists('$(SolutionPath)')">true</DesignTime>

    ….
    <ApplicationDefinition Condition="'$(DesignTime)'=='true' AND '$(BuildingInsideVisualStudio)'!='true' AND '$(BuildingInsideExpressionBlend)'!='true'" Include="App.xaml">
          <Generator>MSBuild:Compile</Generator>
          <SubType>Designer</SubType>
    </ApplicationDefinition>

    Download the project files from below:


    slproject Download Sample

    Hope this helps. If you have any questions, feel free to comment here or on our forums.

    Regards,

    Unni

  • Expression Blend and Design

    Styling Silverlight 2 Controls

    • 6 Comments

    One of the nice things about both WPF and Silverlight is their ability to allow a designer to extensively alter the look and feel of a control without having to write code. A great blog to observe is Corrina Barber’s Ux Musings where she explains how to style some of the common controls that ship outside of the box with Silverlight 2 Beta 1.

    For example, you can see a live demo (source) of one such style she created:

    customControls

    Check out her blog here: http://blogs.msdn.com/corrinab/

    Everything she shows, you can accomplish via XAML in Expression Blend 2.5, and our design surface will pick up and display the updates. We don’t support styling and templating via our UI (like we do for WPF)….yet for Silverlight 2! Expect that soon.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer Forum + Filtering Code/Example

    • 7 Comments

    Hi everyone,
    For the past month, all of the feedback and questions about the Deep Zoom Composer (DZC) were posted here on the blog. To make it easier on everyone, we found a better place for you all to post questions, send us feedback, etc. That location is the Deep Zoom Composer forum. If there any questions that you had asked us earlier that we didn’t notice, please re-post that in our forum.

    Filtering
    This is something that many of you have asked us about. We’ve been busy working on the next preview version of Deep Zoom Composer, so we haven’t been able to post an example for you all to use. Thankfully, Wilfred Pinto has done some really nice work with the Deep Zoom technology, and you can see all of his examples (including filtering, clicking on a subimage, etc.) here: http://projectsilverlight.blogspot.com/search/label/Deep%20Zoom

    This blog will probably go a bit quiet on Deep Zoom material until we have our next release (soon!), but expect interesting topics on Expression Blend, Expression Design, and other things you all mentioned in the previous post instead.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    What Topics Would You Like to See Covered Here?

    • 24 Comments

    Over the past month, we released beta versions of Expression Blend 2 and Expression Design 2, a preview of Expression Blend 2.5, and a preview of Deep Zoom Composer. With four new releases, there is a steady supply of interesting topics for all of us to write about on this blog. To give you a preview of what future posts will contain, we’ll probably elaborate a bit more on the list of the new features Blend 2 has, describe more of the Deep Zoom Composer, and also shower you with information on Design 2!

    This brings me to my request. While we try to write about things that interest you as well as us, do you have any particular topics that you would like us to write about more? Don’t be shy - let us know via the comments below, and we will try to work your request into our regularly scheduled programming :P

    Cheers!
    Kirupa

  • Expression Blend and Design

    Deep Zoom Collections Example

    • 37 Comments

    Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions images. This is the case where you arrange all of your images on the artboard, and during export, flatten everything into a large image before breaking them up into the various tiles. This is actually the default behavior of the Deep Zoom Composer and is done transparently in the background while you export. Single high-resolution images are great, but if you wanted to do more with your images such as programmatically move individual images around or filter your images (similar to the Hard Rock Cafe Memorabilia site), the single high-resolution image is not ideal. That is where the Collections feature of Deep Zoom comes in.

    With collections, instead of flattening your entire composition into one image before generating your image tree, you actually generate an image tree for each image in your project. This is almost like generating a single high-resolution image for each image you use. The details are not that important. What is important is that this allows you to control each image individually while still retaining the layered zooming and fading effects that Deep Zoom is really known for.

    Instead of just describing collections using text, below you’ll find an example that showcases these features instead:

    Click on the Randomize Images button to arrange your initial layout into a grid. Keep clicking on Randomize Images to continue randomly swapping your images while still staying within this grid.

    If you are curious to see how the above example was created, below I’ve posted a sample project (make sure you have the Silverlight 2 Tools Beta 1 installed) that contains everything you will need:


    slproject Download Sample

    As you can see, this is really cool, and best of all, you already have everything at your fingertips to create collections using the Deep Zoom Composer itself. In a Deep Zoom Composer project, from the Export workspace, check the “Create Collection” checkbox, and your output is properly adjusted for collections:

    createCollectionBox

    The source files provided earlier contain both the C# Silverlight 2 project as well as the Web Site project where your images are stored. Take a look at the Page.xaml file to see the extra Grid/Column info I added for our MultiScaleimage to ensure our Collections will display initially, and if you are curious to know  how the rearranging animation was done, take a gander at the Page.xaml.cs as well.

    In case I never explicitly mentioned it, feel free to reuse and modify any of the source files I’ve posted into your own (hopefully cooler!) examples.

    Cheers!

    - Kirupa (Expression Blend)

    - Lutz Gerhard (Live Labs)

  • 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

    MIX08 Session: Applications = Designers + Developers

    • 5 Comments

    Hi everyone,

    Thanks to all of you who attended the session Celso and I gave at MIX08. If you didn't get a chance to see us, you can view the session here. Besides describing how our Deep Zoom Composer was developed and styled, we spent the first half of the session working on a sample application called the FurnitureShowroom:

    furnitureSS

    We've received numerous requests to provide the source files for FurnitureShowroom, so...here you go:


    slproject Download Sample

    When you extract the above source files, there will be a folder called Database. Please move the Database folder to your C:\ drive so that the application knows where to get the data from. Make sure you also have the SQL Server 2005 support enabled. That is an installation option in Visual Studio, but you can also install the free SQL Server 2005 Express edition instead.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Deep Zoom Sample with MouseWheel / Pan / Click-Zoom

    • 32 Comments

    Hi everyone,
    One of the most frequent requests you all have made has been for samples that showcase taking the output from a Deep Zoom Composer project and integrating it with the MultiScaleImage control to have a cool example. We provided an example of that in the previous post. That example only included mouse wheel support but nothing else. In this post we not only incorporate mousewheel support for zooming but we also incorporate using the mouse to pan and clicking/Shift+clicking to zoom in or zoom out thanks to the nice work by Scott Hanselman.

    The following example includes everything you need plus a sample Deep Zoom image containing some Vista wallpapers I arranged and exported via the Deep Zoom Composer:


    slproject Download Sample

    The sample solution contains both a C# Silverlight project as well as a Web Site project:

    projectInfo

    In your Web Site project, inside your ClientBin folder, you will see a folder called vistaWallpapers. The vistaWallpapers folder contains the images, xml, and bin files Deep Zoom Composer (DZC) output.

    To reuse this sample for your own projects, delete the vistaWallpapers folder and import your own folder containing the DZC output. Once you have done that, open Page.xaml in your Silverlight project and change the source of your MultiScaleImage control to point to your new folder and its info.bin file in your Web Site project:

    path

    Once you have replaced your images and changed the path to the images in Page.xaml, build your project and view your DeepZoomOutput.html page in your browser. Things should just work...if they don't, please feel free to comment below and I'll take a look!

    Cheers!
    Kirupa =)

  • Expression Blend and Design

    Deep Zoom Composer Example (Updated)

    • 15 Comments

    Hi everyone,
    I have posted a quick ZIP file containing a sample project that shows you how to use the output from the Deep Zoom Composer with Silverlight's MultiScaleImage control.


    zipIcons Download Sample (Zip)

    Beyond giving you a working example, this implementation also includes a C# approach to getting mousewheel support in IE, Firefox, and Safari (Mac). You can read more about my mouse wheel support on my blog here.

    For another example using the keyboard, please read Mike Taulty's post on this topic.

    Update: Scott Hanselman has posted a modified version of this code with panning, click-to-zoom, and more! Check it out here.

    - Pete

  • Expression Blend and Design

    Deep Zoom Composer User Guide

    • 49 Comments

    To access the User Guide, make sure you have the latest version of Deep Zoom Composer installed and go to Help | User Guide or press F1:

    help_userGuide

    If you reached this post via the User Guide link found in the Welcome Screen, rest assured that we will fix that bug in the near future. Clicking the User Guide link should open the user guide and not take you to a blog post :)

    Thanks,
    Kirupa

  • Expression Blend and Design

    Download the Preview of the Deep Zoom Composer

    • 70 Comments

    One of the slew of new things that is being released at MIX today is the Deep Zoom Composer powertoy:

    dzcSplash

    If you have followed the Silverlight 2 Beta 1 announcements, Silverlight 2 includes support for the Deep Zoom technology to allow you to quickly and smoothly zoom in on really large images. If you want to see an amazing implementation of the Deep Zoom technology, check out the Hard Rock Memorabilia site: http://memorabilia.hardrock.com/

    What is the Deep Zoom Composer?
    Deep Zoom Composer allows you to quickly import your own images, arrange and position them to your liking, and export the final output as either a Deep Zoom Image or Collection that can be fed into Silverlight's MutliScaleImage control. This means that you too can use your own images and display them using our Deep Zoom technology.

    Click the link below to download the free preview version:


    dzcicon Download the Deep Zoom Composer

    Because we are currently at MIX, we haven't had  a chance to write a detailed post outlining all of the cool things you can create. Rest assured, we'll be explaining more about this application in future blog posts, but until then, feel free to try this out and let us know what you think.

    Cheers!
    Celso, Janete, Kirupa, and Lutz

     

    FYI: In case you are curious, Deep Zoom is related to the SeaDragon technology that we have been demoing in our PhotoSynth application for a while.

  • 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

    The Big Jasinski!

    • 5 Comments

    I figured you could all use a break from the tips and tricks my colleagues have been posting for the past few days! At one time, the Expression team was fortunate to have incredibly talented artist (illustrator, musician) Aaron Jasinski on board as a product designer. Among his contributions were the style guides which define the visual specifications of each part of the products' UI, the design of the Welcome Screen, teaming up with feature Program Managers on UI and user experience design, looking into the future of the Expression products, and generally making his office a cool and ambient place to be. To emphasize the last point, here are the shots of his whiteboard:

    Whiteboard1_sm

    ( larger version )

     

    Whiteboard2_sm

    ( larger version )

     

    Whiteboard3_sm

    ( larger version )

     

    You can see more of his work at http://www.aaronjasinski.com.

    Steve White

  • Expression Blend and Design

    Creating your Own Vista "Chrome" Style Button

    • 18 Comments

    In this blog post I’d like to show a way to create your own “chrome” like button template that can be easily modified and used over and over again using Expression Design.  This post is targeted for the absolute beginner, so if you've never tried using Expression Design before, this post should help you become familiar with it. What you should get by the end of this exercise is a button that looks like this:

     

    Slice 6 

    So let’s begin:

    Lets start by creating a rectangle on the art board, setting its width to 150 pixels and its height to 50 pixels:

    Slice 1 

    While you could use the adorners, you can more precisely use the Action Bar to set the width and height instead:

    action

    If you look at the final button shown above, you will notice that it has rounded corners. That means we need to make our rectangle have rounded corners also. Select your rectangle and modify its corner radius on the Properties Panel to 10px:

    radius

    Once you have made your changes, your rectangle will now have curved corners:

    Slice 2

    Now we’ll add a gradient to our button.  For the sake of simplifying things, we will use the default gradient swatch and make this button a silver (grayscale) button:

    gradient

    When you apply your gradient, your button will now look as follows:

    Slice 8

    As you can see, we have quite a bit of work to do before we have it looking nice! First, we’ll remove the stroke from the button by clicking on the stroke tab and setting it to none:

    nostroke

    Setting the Stroke to none has the effect of removing the black outlines you see in your curved rectangle:

    Slice 3

    With the stroke gone, let's focus our attention on the fill. Notice that the gradient on the button pans from Left to Right.  We want to change this so it pans from Top to Bottom.  Using the gradient rotation angle tool, change the rotation angle to 270 degrees or -90 degrees as shown below:

    rotate

    Once you change the rotation angle for your gradient, your button will now look like what is shown in the following image:

    Slice 4

    Now that we have our smooth gradient, we’re ready to move on to the next step.  The shine! Or what some might call the light layer, or what I like to call it, the Bling!

    Copy your button object to the clipboard and use the PASTE IN FRONT feature from the EDIT MENU to place another copy on top. While on top we’ll make some adjustments to give it that look that we want.

    Select your new button object and do the following:

    1. Return to the ACTION BAR and change your new objects width and height to (146x25).  Your second button object becomes centered on top of the original. 
       
    2. Also change the corner radius of your new shape to eight (8) pixels to give your new object smaller corner roundness.
       
    3. Nudge your object upwards to the top of your underlying object until it’s about 4 pixels away from the top of your underlying object.  You might want to zoom in a bit to do this more precisely.
       
    4. Change the gradient rotation angle to 90 degrees.  It should have been set to -90 degrees from copying and pasting from your underlying object.
       
    5. Return to the properties panel.  Replace the black gradient stop with the color white so that you have white on both ends of the gradient.

    At this point, your button will look a lot different:

    Slice 5

    While still on the same gradient stop, change the Stop Alpha to 0%:

    stop alpha

    Boo-yah!  Your button is now complete and should look like this:

    Slice 6

    Here is the trick.  Click on the bottom object and try replacing the black gradient stop with any color you’d like and watch your button color Scheme change as you browse through the spectrum.  You can even go further and experiment with more than two gradient stops.

    Hint:  You can make your button darker by increasing the midpoint of the gradient.

    Here is the expression design file with some of the assets used in this tutorial: Download Chrome Style Button Design File

    Have fun!
    Sam Paye

  • Expression Blend and Design

    Using Brush Strokes to Create a Design

    • 9 Comments

    Design has an extensive library of  brushes that can be used to create artwork. In the spirit of upcoming elections, I created this stars & stripes piece:

    kimPost

    Download Design File (33k)

    All of the elements you see can be found in Design’s default brush strokes:

    brushStrokes

    To create similar brush effects, simply draw strokes and increase the width until you get the desired effect. Then to manipulate further, select Object/Convert Stroke to Path. For example, I didn’t want as many large stars as the brush gave me so after converting to path I just deleted the extras. This works great for adding abstract elements to a background or creating wallpapers.

    Hope you like it, and if you have any questions, feel free to leave a comment below!

    - Kim

  • Expression Blend and Design

    A Small InkCanvas Sample

    • 5 Comments

    One of my favorite controls in WPF is the InkCanvas control. As a child, I've always enjoyed simple line drawings, but I started to draw less and less as I got older because I now had to clean up all of the paper and pencils myself! Recently, I began to get back into line drawings, and unlike using physical mediums like pencils and paper, I began playing with the InkCanvas control in WPF instead. This control is very elegant. You have a working application once you simply insert a InkCanvas control. The InkCanvas becomes your paper, and your mouse cursor becomes your pen or pencil.

    Behind its elegance, there is actually a lot of great functionality that you can expose, and I created a simple application (with source) that showcases some of the common things you would want to do with an ink canvas:

    inkcanvasExample 

    ( Click here to download the Blend 2 / Visual Studio 2008 Source Files )

    In the above application, the code shows you how to change your pencil's stroke size, color, and how to use the eraser functionality. Behind the scenes, when you close your application, everything you draw gets saved to your AppData folder. The next time you run your application again, any doodles you made earlier are displayed again - allowing you to pick up from where you left off. There are also more features that I simply haven't had time to implement, but I may revisit this at a later time and improve what is shown above.

    Anyway, I hope this helps. If you have any suggestions on examples you would like to see covered in this blog, feel free to drop a line in the comments and I or the other friendly bloggers might use it to guide the content of our future posts.

    Oh, and before I forget, the really cool icons used in the above sample are from Mark James's Silk Icons collection.

    Update
    There was a bug in the version of the code I posted initially. Thanks to fellow colleague Sam Paye for pointing it out. The version posted now is the revised version.

    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. 

  • Expression Blend and Design

    Clip Path Editing and Animating in Blend 2!

    • 11 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

    Creating Falling Snow Using Code

    • 11 Comments

    With WPF, you have several ways of creating animations. A common way is by using Storyboards/keyframes, and you can do that easily using Blend itself. If you are willing to take a trip through the dark side and use code to create your animations, you have the ability to create some really cool effects.

    Snow is the big thing during this part of the year in much of the world...except if you live in a place that is too warm to have snow in December. To those of you who can't experience real snow (like me who is spending the holidays here), I decided to create a small application that uses UserControls, some old-fashioned C# code, and a dash of CompositionTarget.Rendering to simulate falling snow on your computer:

    fallingSnow

    Click here to run the application, but if you are unable to run the ClickOnce application, download and extract the source code and use Blend 2 or Visual Studio 2008 to open and run this application instead. Let's look at some interesting bits and pieces of code that make up this application:

    CompositionTarget.Rendering
    When creating animations via code, you need some sort of a loop structure that updates what is displayed on your screen. The loop structure in our case is provided via the CompositionTarget.Rendering event which calls our MoveSnowFlakes event handler each time your scene is drawn/re-drawn:

    if (!IsInDesignMode())
    {
        CompositionTarget.Rendering += 
    new EventHandler(MoveSnowflakes); }

    For more information on what the CompositionTarget.Rendering event does, refer to its MSDN documentation page.

    Creating the Oscillation
    If you observe the snowflakes as they fall, you'll see that they oscillate horizontally. The oscillation effect is provided by the Cosine function which takes a number as its argument:

    radians += .5*speed;
    
    cX = Canvas.GetLeft(this) + Math.Cos(.1*radians);

    The oscillations are possible because Cosine is considered to be a periodic function whose output always falls within -1 and 1.

    Setting the Positions
    We looked at how we create a loop to update what gets displayed and how the oscillation effect is created. The next thing to look at is how the actual positioning works:

    Canvas.SetLeft(this, cX);
    Canvas.SetTop(this, cY);
    
    if (cY > stageHeight)
    {
        cY = -50;
    
        Canvas.SetTop(this, cY);
    }

    Because I am interested in positioning each snowflake precisely, each snowflake is placed inside a Canvas layout control, and the exact position is set using the SetLeft and SetTop attached properties. With this approach, I gain the ability to position my snowflake with exact x/y coordinates, but I do lose the automatic layout functionality WPF provides.


    I hope this post helped you to see a new way of creating animations in WPF. Because WPF uses hardware acceleration and provides decent drawing support, feel free to experiment and create far cooler animations than what I have shown above or were able to create in the past with other technologies.

    Cheers!
    Kirupa =)

  • Expression Blend and Design

    Mini Cube - Ready for Developers (Can you finish it?)

    • 11 Comments

    I love 3D, so I'm always trying to incorporate it in my projects. And what better opportunity to work with 3D than a blog post! This week I want to share this Mini Cube project, which is a (2x2) simplified version of that famous game that gave me so many headaches in the past. This is a perfect candidate for a 3D sample, since you have to visualize the cube in three dimensions in order to play it properly.

    This project is not finished yet, I've prepared the 3D objects and some interaction, but the cube doesn't "work", which means you can't rotate the blocks. But that's the point of this post... invite you to finish it ;-) So, let me give you an idea of what I have done so far and see if someone wants to take it to the next level:

    Download the project here (Maya and Blend projects included).

    image

    Creating the 3D Objects

    The workflow I used was Maya 6.0 > Export to Obj > Import Obj in Blend. In Maya I was able to create the geometry, separate materials, and adjust the pivot points for each block. For the geometry, I also created a few extra objects that will receive mouse events in Blend. If you click on one corner, you will notice that a Message Box shows the name of that corner (red1, red2, etc...) Please, see the following image to see where they are located. You can find the original Maya project in the project ZIP file (/miniCube/Maya_files).

     image

    Importing the Obj File in Blend

    To import a Obj file you just need to drag the files to your WPF Project in Blend. Just remember that you have to drag the .obj and the .mtl files. The latter contains all the materials that you defined in Maya. Double click the file cube.obj to insert into the Artboard. Then use Camera Orbit to rotate the 3D space.

    image

    What else is Ready in Blend?

    Ok, that's the general idea. Now if you open the Blend project you will see that I've prepared a few more steps:

    • I've created new groups in Blend for the blocks (b1, b2, b3, etc...)
    • The project has several Storyboards for each block. Those Storyboards are rotating each block in X, Y and Z, in both directions.
    • The code behind (Window1.xaml.cs) has basic interaction to rotate the cube.
    • If you click on a corner, you can see a Message Box that shows you which corner got the event (look for the method OnMouseUp in Window.xaml.cs).

    What's Next?

    Well, since you have the Holidays, you can use that time off to finish this project! The next steps are not easy, but interesting. You can use the Storyboards that are already there, or you can rotate the blocks using just code. The idea now is to make the cube work, so you can come back from the Holidays and spend your time playing the game at work! Just kidding...

    I will publish the final project in January, but I would be glad to publish any solution that you might send us!

     

    Enjoy, and Happy Holidays!
    -Celso

  • Expression Blend and Design

    Silverlight 2.0, Sprawl, and a Dash of Snoop!

    • 6 Comments

    Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expected including layout, databinding, controls and templating. On the Blend team we’re extremely excited about the features arriving in Silverlight 2.0 and are very busy building some excellent tooling for it. We don’t have too much information right now, but rest assured that we’re working on it.

    Following from Danc’s earlier post about creating game graphics in Expression Design, a fun Silverlight game that we did together is Sprawl, you’ll see a very similar visual style there:

    sprawl2

    The game is all Silverlight 1.0 and took about a day of development time to make once the graphics were done. I hadn’t realized Danc was going to post his Planet Cute drawings, otherwise I would have polished up a sample Silverlight app built off of it :)

    One thing that many people have been pestering me about (and rightly so!) is an update to the Snoop application used for debugging WPF applications. I just wanted to assure folks that I am working on updating it and hopefully will have a quality update in not too long.

    Happy Blending!

    Pete

Page 5 of 9 (217 items) «34567»