Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • 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
  • Expression Blend and Design

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

    • 2 Comments
    Have you checked out Amir's and Peter's Flickr Browser sample yet? This post has a reminder of how to get your own API key so that the sample can run and then it digs into some of the theory of how the sample works.

    The sample connects to the
    Flickr Web Service and for this it needs a valid API key. These are free of charge once you've signed up to Flickr. So the first thing you need to do is visit http://www.flickr.com/signup and trade some details in exchange for your credentials. Once you're signed in just visit http://www.flickr.com/services/api/key.gne and get your free API key and then simply paste that key into the file called FlickrKey.txt which you'll find in the bin\Release folder. Now run FlickrBrowsrCh9.exe and you're all set.

    The list box of thumbnails on the left-hand side of the application's UI has two important features. The first feature is that, when an item is selected, it seems to step forward and stand in front of its neighboring siblings (it comes to the front of what is called 'z-order' which is the order along a line from the screen to the eye: the z-axis). The second feature is that the items animate smoothly to new layout positions instead of abruptly jumping there.

    The z-order feature is achieved with a panel (i.e. a container) class called WrapPanelZ which Peter Blois authored. WrapPanelZ is a specialized version of the WrapPanel which is part of the Windows Presentation Foundation (WPF). What I mean by specialized is that a new class was written which inherits all the functionality of the standard WPF WrapPanel and either retains or replaces that functionality as appropriate. When the standard WrapPanel is queried for the visual elements which constitute its items, it returns them in order from first to last and this is the order in which they are drawn to the screen. So if there is any overlapping of visual elements, the ones drawn latest are drawn topmost. In order for the selected item to be drawn topmost, the visual elements must be returned in a different order, with the selected one (the one which is scaled up when selected) returned last. This is what WrapPanelZ does by overriding the GetVisualChild method. You can download the
    source code for WrapPanelZ from Peter's blog [1].

    The smooth animation, which happens when the layout of the items changes, is achieved by placing each item inside a specialized ContentControl, called SmoothMove, also authored by Blois. ContentControl is not a panel, it's a control with a Content property of type object (the most abstract CLR type). This means that, even though a ContentControl may have only one child for its content, the content may be any single object whatsoever. If the content is a container such as a panel or an items control then the content is effectively the root of an element tree. This flexible design means that you can wrap each of a container's items inside a specialized ContentControl with the smarts to detect when it is being moved to a different layout location and to smoothly animate there. As the ContentControl animates, it naturally takes its content (i.e. the item) with it. The SmoothMove class inherits from ContentControl, handles UIElement's LayoutUpdated event, and then animates its own RenderTransform in that handler. You can also download the
    source code for SmoothMove from Peter's blog [2].

    [1]
    http://blois.us/blog/2005/12/stupid-listbox-tricks.html
    [2] http://blois.us/blog/2005/10/i-was-very-impressed-by-some-of-small.html

  • Expression Blend and Design

    Resurrecting a Beloved Deep Zoom Composer Feature

    • 2 Comments

    In our latest release of Deep Zoom Composer, we removed a feature that all of you liked a lot. While I will detail this in the near future, I figure the following screenshots from a version of Deep Zoom Composer on my machine should give you an idea of what it is we brought back:

    export 

    classicAndSource 

    project 

    sourceFiles

    And of course, the grand finale:

    image

    If you notice carefully, you’ll spot some cool Deep Zoom enhancements we have added in Expression Blend 3 since our release at MIX as well.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Expression Graphic Designer January 2006 CTP available!

    • 3 Comments

    Today we are also delighted to announce the availability of a new preview version of Expression Graphic Designer. This preview version is the January 2006 Community Technology Preview [1]

    We would like to thank you for your enthusiastic support regarding our professional graphic design application, Microsoft Expression Graphic Designer (formerly code-named "Acrylic"). We look forward to your continued feedback.

    Please note that you must complete a product registration to receive this download.

    [1] http://www.microsoft.com/products/expression/en/graphic_designer/gd_free_trial.aspx

  • Expression Blend and Design

    Two new websites from X-Coders

    • 1 Comments

    The company X-Coders has launched two new websites - ExpressionBlend.com and ResourceDictionary.com - each carrying information, blogs, videos, forums and downloads related to Expression Blend.

    The videos are great - we recommend you go and check them out.

  • Expression Blend and Design

    New version of the Expression Design December CTP is available

    • 2 Comments

    An updated version of the Expression Design December CTP is now available that no longer expires at the beginning of 2007.   This should let you start testing again with hopefully a minimal interruption. The team appreciates all the great feedback we've been hearing and many of us have taken to reading the news groups daily in order to catch up on the latest issues.

    You can download the updated CTP here:
    http://www.microsoft.com/products/expression/en/expression-design/free-trial.mspx


     

  • Expression Blend and Design

    What does EID's 'active' or 'activated' container mean?

    • 1 Comments

    Steve White, Technical Writer, EID

    Microsoft Expression Interactive Designer (EID) is largely about creating and editing trees of user-interface elements. When you use the double-click gesture in the Library palette (View > Library) to create a new element, Interactive Designer needs to know into which container in the tree to put the new element. So we have this idea of the 'active' or 'activated' container which refers to an existing container which will become the parent of the new element. Only one container in the tree can be activated at any time. By the way, I use the term 'activated' because the container in question is in a particular state, ready to receive the new element. 'Active' implies the container is somehow going to do something whereas in fact its state is passive. Either term is ok to use and they refer to the same idea.

    So, how do you set a container to be activated and how do you identify the currently activated container? I would recommend that you go to the element tree (in the Timeline palette - View > Timeline) and expand the tree until you find the container you want to activate. Then double-click the container and note that it now appears in both the element tree and on the artboard with a yellow highlighted border. It's the highlighted border which shows which container is activated.

    Now, when you double-click an element type from the Library palette (View > Library), EID will create the new element and nest it as a child of the activated container. If the activated container is one which may have only one child, and that container already has a child, then your double-click-to-create gesture will replace the previous child (and all its children, if any). This is sometimes what you want, other times it may be an indication that the activated container was not the one you intended. Always check for the yellow highlighted border before double-clicking from the Library palette.

    The other way to create a new element is to select the element type in the Library palette and then draw it onto the artboard. EID will place the new element as a child of the container most appropriate to the location in which you are drawing.

  • Expression Blend and Design

    Expression Blend 2 August Preview has been refreshed

    • 0 Comments

    Based on your feedback, we have published a new build of Expression Blend 2 August Preview that addresses two issues:

    a) Expression Blend 2 August Preview will not require a license key to work. The software is designed to stop working on January 1st, 2008, no matter when you install it. If you had issues with the trial licenses expiring, you should un-install the previous August Preview build and install our refreshed bits.

    b) You can create Silverlight 1.1 projects inside Expression Blend 2 August Preview again. This functionality was broken with the update to the Silverlight 1.1 Alpha Refresh bits.

    You should un-install the previous August Preview build, before installing the refreshed bits. Instructions for downloading and installing the refreshed Expression Blend 2 August Preview build can be found here.

    Thanks,
    The Expression Blend team

     

  • Expression Blend and Design

    Dante's Integer-to-Roman-Numeral ValueConverter

    • 0 Comments
    Dante Gagne, a Software Design Engineer in Test in the Expression Interactive Designer team, has published a blog entry demonstrating how to write a ValueConverter (a great utility for data binding) and he also explains how to use it in Expression Interactive Designer.

    [1]
    http://blogs.msdn.com/danteg/archive/2006/03/22/558450.aspx

  • Expression Blend and Design

    Expression Web Designer CTP is now available!

    • 4 Comments

    Download for free the first-ever Expression Web Designer CTP now via the Microsoft Expression Web site.

    Also, you can discuss Expression Web Designer in the forums as well as send feedback or report a bug to help us make a better product!

  • Expression Blend and Design

    Generating Data at Design Time

    • 4 Comments

    For most practical scenarios, the controls that you create (and are instantiated by Blend on its design surface) are bound to data structures that are populated at run-time. Unfortunately, these result in an experience on the design surface that is not friendly to designers – for example, how can you figure out the optimal font size for rendering a label when you can’t visualize the typical value that the label would display?

    Fortunately, Blend has a way to easily modify the behavior of controls when they are hosted inside the Blend design surface, as opposed to the actual application. This opens up a number of possibilities, including the ability to simulate data at design time. Let us use a simple example to describe how you can do this.

    Consider that you are designing a form that visualizes stock data, with the actual data coming from a web-service.  The data structure that holds the data might look something like the following:

    public class StockWidgetModel

          {

                private ObservableCollection<Quote> quoteList = new ObservableCollection<Quote>();

                public ObservableCollection<Quote> QuoteList

                {

                      get { return quoteList; }

                }

     

                public StockWidgetModel()

                {

                      if (IsInDesignMode())

                      {

                            this.createDummyData();

                      }

                }

     

                private bool IsInDesignMode()

    {

    return (bool)DependencyPropertyDescriptor.FromProperty(DesignerProperties.IsInDesignModeProperty, typeof(FrameworkElement)).Metadata.DefaultValue;

    }

     

                private void createDummyData()

                {

                      this.QuoteList.Add(new Quote("MSFT", "Microsoft Corporation, Redmond, WA 98052", 25.4, +1.2));

                }

     

                private void RefreshQuotes() { }

                public static Quote GetQuote(string symbol) { }

          }

    The interesting bit is highlighted in Yellow. This function can be used to check, anywhere in your code, as to whether your control is running inside the Blend Design surface. In this case, we are conditionally executing some code that won’t execute in the actual running application to populate our Quotes data structure, so we could design the list box that is bound to this data structure better.

    See this in action by downloading the sample here.

    Unni

  • Expression Blend and Design

    ImageButtons - a new EID tutorial

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

    Because Windows Presentation Foundation (WPF) is based on the .NET Framework, you can customize the functionality of existing control types. You can start with a control defined in a WPF library, derive a new control type from it, and build that into a library of your own. You can draw a control onto the design surface of Expression Interactive Designer just as easily whether it is implemented in your own library or in a WPF library. In this tutorial you will extend the Button control to create an ImageButton control which has a Source property in addition to the standard Content property. You can then specify how the new Source property is to be used by the control by modifying the control's template.

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

  • Expression Blend and Design

    Troubleshooting Issues Installing WPF and/or Expression Interactive Designer

    • 0 Comments
    Tim Sneath has written an excellent blog post [1] about what to do if you're having any issues installing WPF or EID.

    [1]
    http://blogs.msdn.com/tims/archive/2006/03/13/550600.aspx
  • Expression Blend and Design

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

    • 2 Comments

    Mix 09 this year is going to be pretty interesting – especially if you are an Expression Blend aficionado. You can see the full session information for all Expression Sessions here: https://content.visitmix.com/2009/sessions/?categories=Expression

    The following are just the Expression Blend sessions chosen from the above list:

     blendSessionsList

    Besides the speakers listed above, Lutz Roeder and I will be there as well. If you happen to stop by any of the above sessions, feel free to chat with any of us. We enjoy the company!

    Cheers,
    Kirupa :-)

  • Expression Blend and Design

    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

    Binding to data which loads in the background

    • 2 Comments

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

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

    [2] http://blogs.msdn.com/expression/archive/2006/02/08/528041.aspx
  • Expression Blend and Design

    Silverlight 1.0 Fire Starter - Free Training

    • 4 Comments

    Microsoft will be hosting an free public training day for Silverlight 1.0 in Redmond. Everyone is welcome! This is great opportunity for designers and developers interested in learning how to start creating Silverlight 1.0 content using the Expression Design Tools and VS Developer tools.

    Silverlight 1.0 Fire Starter
    On November 29, 2007 Microsoft will be hosting Silverlight 1.0 Fire Starter on the Redmond, Washington campus. This daylong event is free to anyone who wants to learn about designing and developing with Microsoft Silverlight 1.0.

    Microsoft Silverlight 1.0 is a cross platform browser plug-in that enables for easy development of media rich web sites.  For more information, visit http://silverlight.net/.

    EVENT DETAILS:

    Date: November 29, 2007 

    Location: Microsoft Redmond Campus
    1 Microsoft Way
    Redmond, WA
    Building 33, Kodiak Room
    ** Please have a photo ID with you to register onsite and park

    Time: Check-in: 8:00 am
    Event: 8:30 am – 5:00 pm

    Register: http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032359153&Culture=en-US
    or by calling 1-877-673-8368 and referencing Event ID 1032359153

    AGENDA:

    Introduction to Silverlight- Mithun Dhar
    Getting Started with Silverlight- Laurence Moroney
    Microsoft Expression Design Tools- Arturo Toledo
    XAML Essentials for Silverlight- Laurence Moroney
    Developer Tools for Silverlight- Adam Kinney
    Media, Markers and More- Ernie Booth
    Popfly and Silverlight – Writing a Silverlight ‘Social’ app Popfly Team
    What will Silverlight look like in future versions?- Ernie Booth

    There will also be a post event in the evening with XBOX, networking and refreshments.

    This is a great opportunity! Don't miss out!

    -Janete

  • Expression Blend and Design

    Expression Blend 3 – Secrets of Working With Data

    • 0 Comments

    Evgeny is back with a great blog post describing some cool features related to the new Sample Data feature we introduced in Expression Blend 3.

    Visit his blog post to go read it: http://etvorun.spaces.live.com/blog/cns!6054141F335D00D3!130.entry

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Unni's sample gallery

    • 3 Comments

    Swing by Unni's blog [1] and check out his beautiful samples built with Expression Interactive Designer. Unni is a Program Manager with Expression.

     

     

    [1] http://blogs.msdn.com/unnir/

  • 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

    Expression Interactive Designer March 2006 CTP is now available from the Expression Web Site

    • 2 Comments
    The previous download instructions involved using the Microsoft Connect web site. We're happy to announce that you can now download the EID March CTP [1] from the Microsoft Expression web site.

    [1]
    http://www.microsoft.com/products/expression/en/interactive_designer/id_free_trial.aspx
  • Expression Blend and Design

    A taste of Cider

    • 0 Comments
    The next version of Visual Studio is codenamed Orcas. Just as Visual Studio does today, Orcas will continue to integrate well with Expression for teams building applications in the Windows Vista time-frame. The disciplines in such a team include developers and designers, hence the specialization in toolsets. Cider is the codename for Orcas' Windows Presentation Foundation (WPF) design-time features. If you'd like to know more about Cider, a great stepping-off point is the Cider Wiki on the Channel 9 web site [1].

    [1] http://channel9.msdn.com/wiki/default.aspx/Cider.HomePage

  • Expression Blend and Design

    July CTPs of EGD and EID available - target July CTP of .NET Framework 3.0

    The July CTPs of Expression Graphic Designer and Expression Interactive Designer are now available. Both of these CTPs target the July CTP of .NET Framework 3.0 (formerly known as WinFX).

    Download Expression Graphic Designer July 2006 CTP
    Download Expression Interactive Designer July 2006 CTP

    For more late-breaking changes 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.

  • Expression Blend and Design

    Important 'Readme' item for the Expression Interactive Designer Jan 06 CTP

    • 0 Comments

    We thought it was worth calling out this item as it may be an issue some of you encounter.

    If you are trying to test build a project (Project | Test Project) immediately after installing WinFX and Expression Interactive Designer, but Expression Interactive Designer was never launched before, your build attempt might fail with the following message: “Error MC1000: Unknown build error”. If this occurs, you will need to close Expression Interactive Designer and launch it again.

    Quite painless, hopefully, but worth knowing.

  • Expression Blend and Design

    XAML namespace changes for the upcoming February CTP of WPF

    • 0 Comments
    Rob Relyea's [1] blog is worth knowing about if you're interested in Windows Presentation Foundation (and if you're into Expression Interactive Designer then you're interested in WPF!). Rob has blogged about the upcoming XAML namespace changes in the next CTP of WPF [2].

    The February CTP of WPF hasn't yet been released but watch this space.

    [1]
    http://www.longhornblogs.com/rrelyea/default.aspx
    [2] http://www.longhornblogs.com/rrelyea/archive/2006/02/14/XamlMigrator.aspx
Page 8 of 9 (217 items) «56789