Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Welcome to the Expression team blog!

    • 0 Comments
     

    Hi, we’re glad to have you visit the Expression team’s blog - we hope you’ll like the resources and information you find here and we hope you’ll return often to see what’s new.

    This introductory post will talk about what the Expression family of products is. It will also talk about the blog itself, what it’s for, and what kinds of things you can expect to find here over the coming months.

    So, first, what is Expression? Microsoft Expression is a suite consisting of three products each intended for use mainly by the professional designer community. Expression Graphic Designer is a visual arts package equally at home with vector or with bitmap graphics. Expression Interactive Designer gives interaction designers the environment in which to build Windows applications for the Windows Presentation Foundation platform - in other words, to build the new Vista-wave generation of Windows user experiences. Expression Web Designer is the product which offers all the tools you’ll need to produce high-quality, standards-based Web sites.

    For lots more information, videos and downloads about Expression, please see the Microsoft Expression product website.

    Now, about the blog. The blog’s scope embraces all three Expression products so there will be a great diversity of resources to be found here, all brought together with the intention of being of interest to designers and to the designer sensibility. Although we expect professional designers to be our main audience, if you’re a design dilettante or a Windows or Web developer, please feel free to dive in and experience and enjoy Expression too!

    In the Article Categories section of the blog, you will find up-to-date directories of sample applications, tutorials and visual artwork. As the names indicate, these samples are targeted at particular pre-release or Community Technology Preview (CTP) versions of the Expression products.

    In the same section there are also articles which contain the ‘readme’ files for particular pre-release or CTP versions of the Expression products.

    The types of blog posts you can expect to see include these:

    • Posts announcing a new sample application or tutorial. By way of documentation, samples will include an overview document if not a tutorial, and any code will have explanatory comments. The overview document might talk about the sample’s purpose and use, how it was written, the design behind the user experience, and any interesting techniques or designer-developer workflow which was experienced whilst producing it.
    • Posts containing a piece of visual artwork.
    • Posts showing a tip or trick or relating an interesting experience around using an Expression product.
    • Posts discussing features of Expression products and gauging interest in them or feedback about them.
    • Posts containing videos of an Expression product or feature demonstration.

    Happy designing!

    - the Expression team

  • Expression Blend and Design

    New Training Videos Available!

    • 3 Comments

    Just a quick post to let you know 5 new training videos are now available for viewing and download at http://www.microsoft.com/products/expression/en/demos.mspx. Simply click the Interactive Designer tab near the bottom of the page, and then click one of the video links under Training Videos.

    Enjoy!

  • 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

    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

    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

    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

    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

    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

    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

    Pavan Podila's quicksort animation in WPF

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

    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

    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

    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

    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

    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

    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

    Counting Crows - Miguetelo's Art Created With Expression Graphic Designer

    • 0 Comments
    On his blog Instrucciones Para Mirar [1], Miguetelo has published some beautiful artwork which he created with Expression Graphic Designer [2]. The pieces created with EGD are Corvo [3] and Corvo 2 [4]. I'm sure you'll be aware that corvo is Spanish for crow (or raven). We hope you enjoy looking at Miguetelo's art as much as the Expression team has.

    [1]
    http://miguetelo.blogspot.com/
    [2] http://blogs.msdn.com/expression/archive/2006/03/10/549181.aspx
    [3] http://photos1.blogger.com/hello/188/2667/640/corvoweb.jpg
    [4] http://photos1.blogger.com/hello/188/2667/640/gallosycuervoweb.jpg
Page 7 of 9 (217 items) «56789