Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Fix coming for Expression Design December CTP shutdown issue

    • 2 Comments

    Expression Design Users,

    If you have tried to use Expression Design after December 31st, 2006 you have no doubt found that the product is not working. This was caused by an unfortunate time-related bug in the code that somehow escaped our rigorous testing.

    I very much regret that this has happened and I hope you will accept my apology. We appreciate the time and effort that you take when testing our products and especially the feedback that you give us -- whether positive or negative.

    You should expect a fix for this problem to be posted no later than end of day tomorrow (January 3rd,) or possibly sooner.

    Once again, myself and the Expression Team regret this unfortunate problem.

    Douglas K. Olson
    Product General Manager
    Microsoft

  • Expression Blend and Design

    Brush Transforms and Keyboard Modifiers

    • 4 Comments

    You probably already know that you can use the Brush Transform tool to transform the fill, stroke, opacity mask, or any other brush that is applied to an object. When you click on the Brush Transform tool with an object with, let's say, a gradient brush applied, a brush transform arrow will appear. You can select the brush transform arrow and easily use your mouse cursor to move, scale, and rotate the brush transform arrow to modify your object's gradient fill:

    brushTransformDefault

    While using your mouse is straightforward, you do not have a lot of precision. There are transforms that you may want to do such as set the gradient rotation to exactly 45 degrees, scale the brush transform arrow equally, and more.

    Luckily, such transforms are possible using your mouse cursor and the Alt and Shift keys on your keyboard. Those two keys, among a few others, are known as keyboard modifiers because you use them in conjunction with other keys or mouse clicks. In this post, I will briefly describe common transforms that you can perform to your brush transform arrow using those keyboard modifiers and your mouse cursor.

    Scaling Perfectly Outward/Inward

    When you are scaling your transform arrow, unless you have perfect mouse control, your scaling will usually be accompanied by some rotation. To scale perfectly outward/inward with no rotation, hold down your Shift key while clicking and dragging your brush transform arrow endpoint:

    scalePerfectlyOutward

    Notice that even though our brush transform arrow was originally in a rotated state, when scaling up with the Shift key pressed, the scaling grew perfectly outward.

    Rotating in Fixed Intervals

    When you rotate your brush transform arrow, you are free to set any rotation angle you want. There will be times, though, where you would like to rotate your brush transform to a common fixed value such as 45 degrees, 90 degrees, etc. In those cases, hold down your Shift key while rotating:

    rotation_fixedIntervals

    When holding down your shift key while rotating, you rotate in fixed intervals of 15 degrees. Be sure to note that it is not fixed intervals of 15 degrees relative to your original rotation angle. It is an absolute 15 degrees in a Cartesian plane starting at 0 degrees and ending at 360. If your transform originally had a rotation of 80 degrees, when increasing your rotation angle, your first interval will occur at 90 degrees and then increase by 15 degrees afterwards.

     

    Transforming Both Endpoints Symmetrically

    Any alteration you make to your brush transform's endpoint using your mouse cursor affects only that particular endpoint. If you want to symmetrically move both of the end points, you can do that by holding down your Alt key while manipulating any single end point:

    transformBeforeAfter

    This time, notice that even though you scaled out only one of the endpoints, both of the end points grew outward.

    Wrap Up

    As you can see, a combination of the Alt and Shift modifier keys along with your mouse cursor allows you to more precisely control how you can transform your brushes. With radial gradients, the behavior is also the same, so don't feel as if you are limited to applying these tips to linear gradients only.

    While this post focused primarily on the brush transform arrow, the above techniques apply to more general transforms also. For example, scaling an object by holding down both your Shift and Alt keys allows you to evenly scale an object outward without adding any rotation. Exploring some of those scenarios will be saved for another post!

    Cheers!
    Kirupa Chinnathambi

  • Expression Blend and Design

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

    • 11 Comments

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

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

    screenshot_sm ( click above image to see a larger version )

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

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Announcing the Expression Blend Beta 2

    • 1 Comments

    We're pleased to present the second Beta version of Expression Blend. Here are some of the changes since the Beta 1:

    • You can now instantiate resources from the Resources panel. For example, you can drag and drop a button style onto the artboard and create a button out of it instead of creating a button and applying it as a separate task.
    • You can see inner exceptions when an exception happens on the design surface, allowing you to see more details about the cause of an exception.
    • You now get font previews in the Text category of the Properties panel which makes it easier to choose your font. 
      After adding an event handler, the XAML file is now automatically saved for you.
    • Configuring value editors has been improved. For example, you'll find editing BitmapEffects or adding items to an ItemsControl such as ContextMenu are now much easier to do.

    Download Microsoft Expression Blend beta

  • Expression Blend and Design

    Thinking Outside the XAP – Blend 3 and Support for Web Sites!

    • 6 Comments

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

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

     image

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

    image

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

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

    xapDataMapping

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

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

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

    sitedifferentiator

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

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

    Cheers!
    Kirupa :)

  • 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

    Somasegar on Expression Products & MSDN

    • 5 Comments

    As of early this morning, the Expression team has announced that Microsoft Expression Web and Blend will be included as part of the MSDN Premium subscription. This decision reflects the large amount of feedback that we have heard from you following last December's ship of Expression Web and through the beta cycle of Expression Blend.  For more details, follow this link.

  • Expression Blend and Design

    How to create Aqua Gel Buttons

    • 1 Comments
    Valentin Iliescu [1] deserves another mention for his tutorial on creating aqua gel buttons [2].



    [1]
    http://www.valil.com
    [2] http://spaces.msn.com/viliescu/blog/cns!A7CD34FAB0459777!252.entry
  • 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

    WPF-WinForms interoperability functionality (codename "Crossbow") will be in v1 of WPF

    • 0 Comments
    This will be of interest to those of you with an investment in Windows Forms. Originally, Microsoft had planned to ship this functionality in the Visual Studio "Orcas" timeframe. However, customers have asked us to release it earlier so that's exactly what we'll be doing now: providing this functionality in the WinFX v1 release itself. This will empower customers to leverage their existing Windows Forms code base (hosting WPF controls in WinForms and vice-versa), and to embrace WPF incrementally without ripping-and-replacing. Mike Henderlight has more details in his blog post [1] and on MSDN TV [2].

    [1]
    http://blogs.msdn.com/mhendersblog/archive/2006/03/01/541422.aspx
    [2] http://msdn.microsoft.com/msdntv/episode.aspx?xml=episodes/en/20060216CrossbowMH/manifest.xml
  • Expression Blend and Design

    Blend 1.0 Survey- Win a Free Zune!

    • 2 Comments

    Hello,

    The Microsoft Expression Blend Program Management team is currently working  on planning features for future versions of Expression Blend. We encourage all newsgroup participants to take our Blend 1.0 Survey and send us your feedback. All participants will be eligible to enter a drawing to win a free Zune!

    The deadline for submitting a survey response is Tuesday, April 3, 2007.


    The Blend Connect homepage is:
    https://connect.microsoft.com/site/sitehome.aspx?SiteID=32 

    Survey Link:  https://connect.microsoft.com/Survey/Survey.aspx?SurveyID=3761&SiteID=32

    (Note: Make sure to be signed into Connect by clicking on the "Sign in" button on the top right.)

    The survey contains various areas, feel free to provide feedback on the areas you feel most relevant to your experience with Blend.

      


    Thanks!

  • Expression Blend and Design

    How do I choose between ASP.NET, Atlas, Windows Forms and WPF?

    • 0 Comments

    In his blog post [1], Tim Sneath answers the following questions about considering when and where to use the most appropriate presentation layer technology:

    • How do Windows Presentation Foundation, XAML and ASP.NET fit together? I've heard you can build web applications using XAML - does that mean that ASP.NET is dead?
    • I've seen comments about "Atlas forever changing the way web apps are implemented", how does Atlas fit into the whole WinFX picture?
    • So WPF is the new rich client technology for building web and standalone applications in WinFX. Where does that leave DirectX and Windows Forms?
    • Windows Forms, ASP.NET/Atlas, DirectX, WPF, Win32 - that's five UI technologies to choose between. How do I decide?

    [1] http://blogs.msdn.com/tims/archive/2006/02/23/538189.aspx

  • 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

    XAML exporters for several design applications

    • 1 Comments
    Microsoft Expression Graphic Designer [1] is one application which exports designs to XAML ready to be imported into Expression Interactive Designer, but there are others.

    Mike Swanson, Technical Evangelist, has written a plug-in for Adobe Illustrator called AI->XAML [2] that exports designs to a XAML file.

    If you're interested in a 3D modeling application which exports 3D assets to a XAML file then take a look at the post on this blog about
    ZAM 3D. [3]

    Also,
    Thomas Goddard has written and released a freely-available plug-in [4] for Maya that exports model and texture data to XAML.

    Daniel Lehenbauer has written a Xaml Export Script for Blender and his blog post features a rather fetching 3D model of Steve Ballmer!

    [1]
    http://www.microsoft.com/downloads/details.aspx?FamilyId=ECD88D39-B9FC-4816-8DAE-60444B7C81E7&displaylang=en
    [2] http://www.mikeswanson.com/XAMLExport
    [3] http://blogs.msdn.com/expression/archive/2006/01/24/517169.aspx
    [4]
    http://www.highend3d.com/maya/downloads/tools/3d_converters/3782.html
    [5] http://blogs.msdn.com/danlehen/archive/2006/01/14/513012.aspx
  • Expression Blend and Design

    Pavan Podila's quicksort animation in WPF

    • 2 Comments
    We'd like to share a link to Pavan Podila's QuickSort animation in WPF [1] sample application. Pavan says: "The idea of creating a QuickSort animation struck me when I was explaining this algorithm to someone at UH. I thought it would be cool to animate this using WPF."

    Pavan used Expression Interactive Designer (EID) and Visual Studio 2005 (VS) side by side. He created the project in EID and then opened it up in VS as well. He built the visuals in EID and used VS to write the logic.

    [1]
    http://pavanpodila.blogspot.com/2006/02/quicksort-animation-in-wpf.html
  • Expression Blend and Design

    Binding media to playback controls

    • 2 Comments

    Software Test Engineer, Dante Gagne, takes us through a tutorial of how to bind media to playback controls in Expression Interactive Designer.

    For more tips and tricks like this, check out Dante's blog.

    After you've completed Dante's tutorial, try using Expression Graphic Designer to style your PlayPause button just like the cool new gel buttons in Windows Media Player 11 Beta.

    Martin Grayson also has a 3-part tutorial on making Vista-like gel buttons using WPF.

  • 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

    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

    Microsoft Expression News

    • 1 Comments

    We released important news today about the Expression family of products.  Please visit the Expression Community site for details.

  • Expression Blend and Design

    Meet the Expression team!

    • 3 Comments

    In case you were wondering what we look like, here's a cheerful photograph taken this evening when the Expression team gathered together to relax and share a drink and mark the occasion of the two CTPs being released today. As is natural with a large team, not everyone could be present for the photograph, and regrettably there are one or two notable Expression-ists (pardon the terrible pun) whom we weren't lucky enough to capture on CCD. Maybe we'll correct that in the future.

  • Expression Blend and Design

    Inside Amir's and Peter's Flickr Browser sample - Part 2

    • 3 Comments
    The mechanics of the custom classes which provide smarts to the Flickr Browser sample were described in the previous part of this post [1]. Building on that, this post will show how the classes were used in the main Flicker Browser sample [2] application. The principles discussed here are quite general and the intention is that this explanation will help you with your own Expression Interactive Designer projects whether or not you're using custom classes.

    Let's begin with how WrapPanelZ is used and what happens when an item is selected in the list box of thumbnails on the left-hand side of the application's UI. The developer (Peter) built all his custom classes into a .NET library named UIWidgets.dll which he supplied to the designer (Amir). The designer added the library to his project (Project > Add Item...), then drew a ListBox on the artboard ready to customize it. The designer knew, from his Windows Presentation Foundation (WPF) knowledge, that a ListBox displays its items inside what is know as its items panel. By default, the items panel is a VirtualizingStackPanel so it's just a case of replacing that default with the WrapPanelZ. There is more than one way to do this. You can replace the ListBox's entire template (a ControlTemplate) or, easier, you can simply create a new ItemsPanelTemplate and point the ListBox at it. The designer chose the second option and he right-clicked the ListBox and clicked Edit Other Templates > Edit ItemsPanel > Edit a Copy of the Template... then just deleted the VirtualizingStackPanel and double-clicked WrapPanelZ in the UIWidgets library (View > Library). To cause the items to wrap, the designer then made a tiny change to the ListBox's template. Edit Template > Edit a Copy of the Template... then set the Scroller's HorizontalScrollBarVisibility property (View > Properties) to Disabled.

    If you're curious enough to look in Scene1.xaml, you'll find that two things have happened. First an ItemsPanelTemplate has been created in resources with the key ItemsPanelTemplate1. Second, the ListBox has its ItemsPanel attribute set to reference this resource.

    In a different post we'll talk about how to make the selected item scale up. For now, we need to make use of the SmoothMove control. For this, the designer knew that he had to edit the ListBox's item template. This is a DataTemplate which is used to generate a tree of visual elements for each item in the list box. As the ListBox items were bound to data by this stage, there was an existing item template so the designer clicked Edit Other Templates > Edit ItemTemplate > Edit Template. The workflow here for wrapping a SmoothMove around the existing template was to Cut the template, double-click SmoothMove in the UIWidgets library, then activate the SmoothMove and paste the template back in.

    Again if you want to know what's happened in Scene1.xaml you'll notice that the resource with the key FlickrPhotoTemplate (a DataTemplate) defines a SmoothMove element inside which is the Grid which was created at the earlier data binding step. The ListBox has its ItemTemplate attribute set to reference this resource.

    [1]
    http://blogs.msdn.com/expression/archive/2006/01/31/521207.aspx
    [2] http://blogs.msdn.com/expression/archive/2006/01/24/517010.aspx

  • Expression Blend and Design

    Switch “the look” of your app on the fly

    • 0 Comments

    Test Lead Jen Rowe shows you how you can theme your applications using Resource Dictionaries in Expression Interactive Designer. The application can switch the theme at run time by loading and unloading respective resource dictionaries. This allows you to give your apps custom looks or to simply enable users to select their own themes while using your apps.

  • Expression Blend and Design

    Expression Blend goes Beta, Big Changes to Expression Design CTP

    • 2 Comments

    Today we are going public with beta 1 of Expression Blend, and a new CTP for Expression Design. Before you ask – these are the new product names for what previously was known as Expression Interactive Designer and Expression Graphic Designer.

    Much more importantly, these new versions are not just about new names. If you have seen the previous evolutions of these Expression applications, a single look will show you that we've been working hard on more than new features:

    Expression Blend and Design are the first Expression applications to show off a new user interface design for the entire Expression product line. We want to offer friendlier, easier, more elegant and beautiful tools to enable designers to build great user experiences – and our UX is a big step in this journey.

    We can’t wait for you to give our new family a spin and to let us know what you think.

  • 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

    June CTPs of EGD and EID now available!

    After overcoming some obstacles with our publishing tools these past few days, we finally are able to share with you the June 2006 CTPs for both Expression Graphic Designer and Expression Interactive Designer. Our latest CTPs target the Microsoft .NET Framework 3.0 June 2006 CTP (formerly known as WinFX). For more information about the name change of WinFX to .NET Framework 3.0, please read this.

    .NET Framework 3.0 June 2006 CTP can be installed on any of the following systems:

    • Windows XP SP2
    • Windows Vista June 2006 CTP (build 5456 - limited release)
      • Alert! Windows Vista June 2006 CTP includes .NET Framework 3.0. There is no separate installation package required. The standalone .NET Framework 3.0 packages are not supported on Windows Vista.

    Those who are using Windows Vista Beta 2—the current public pre-release version of Windows Vista—are strongly encouraged to use our May CTPs to avoid compatibility issues. If you are only installing Expression Graphic Designer on Windows Vista Beta 2 and do not plan to use the XAML Export feature, then you will not encounter any compatibility issues. 

    Install on Windows Vista Beta 2

    Install on Windows XP SP2 or Windows Vista June 2006 CTP (build 5456 - limited release)

    For more late-breaking changes and information in Expression Interactive Designer, please see the Readme.

    Found a bug? Report it to us.

    Have something to say about the CTPs? Join a discussion group.

Page 7 of 9 (217 items) «56789