Expression Blend and Design

The team blog of the Expression Blend and Design products.

January, 2006

  • Expression Blend and Design

    Liven Up Your Office Clip Art

    • 1 Comments

    Jeremy Kuhne has written an article Liven Up Your Office Clip Art [1] which you can find by visiting the gallery of Expression Graphic Designer samples over on the right of the blog. Look for the box titled 'Article Categories' and then click Samples and Tutorials Gallery - Expression Graphic Designer Jan 06 CTP to take you to the gallery (or just click the link given above). Jeremy is an SDE/T (Software Design Engineer in Test) for Expression Graphic Designer.

     

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

     

     

  • Expression Blend and Design

    Alexander Lih's Digital Clock Sample

    • 5 Comments
    Alexander Lih has used workflow between Expression Graphic Designer and Expression Interactive Designer to build a digital clock sample [1]. Thanks Alexander, we like it!

    Final Product

    [1] http://feebdack.com/article.php?id_art=14

  • Expression Blend and Design

    Amir's and Peter's Flickr Browser

    • 4 Comments

    Originally it was the rather witty 'Flickr Browsr', although now an 'e' has crept back in to 'Browser'!

    The Flicker Browser sample application which features in the recent Channel 9 video [1] is available for download from Amir Khella's blog [2] so please feel free to check it out.

    You will need to get a free Flickr API key of your own and paste it in the file called FlickrKey.txt in order for the sample to run correctly. You can get a key from http://www.flickr.com/services/api/key.gne.

    [1] http://channel9.msdn.com/showpost.aspx?postid=157843

    [2] http://blogs.amirkhella.com/wordpress/?p=33

    Thanks very much to Amir Khella (Program Manager on Expression) and Peter Blois (Software Design Engineer on Expression) for collaborating to produce this sample and showing great developer-designer workflow in the process.

  • Expression Blend and Design

    Electric Rain's ZAM 3D and examples

    • 1 Comments

    ZAM 3D ™ from Electric Rain is a new 3D XAML Tool for Microsoft Windows Vista application development, and a CTP is available for download [1].

    ZAM 3D fits into the designer-side workflow by complementing Microsoft Expression Interactive Designer. The idea is that a designer uses ZAM 3D to easily create 3D interface elements, models, controls, styles or layouts. Then the designer exports the 3D assets to XAML markup with a single click without any need to write, or even understand, the complex markup that goes into building a WPF 3D scene. Now the 3D assets are easily added to an Expression Interactive Designer project using the Project > Add Item... command.

    You can see some stunning examples of ZAM 3D assets [2] in use in Windows Vista applications on Electric Rain's website.

    [1] http://www.erain.com/downloads/trials/InfoRequest.asp?d=21

    [2] http://www.erain.com/products/zam3d/examples/

  • 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

    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

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

    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

    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

    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

    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

    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

    Expression Interactive Designer preview available!

    • 2 Comments

    Today we are delighted to announce the availability of a preview version of Expression Interactive Designer. This preview version is the January 2006 Community Technology Preview and you can download it at the following URL:

    http://www.microsoft.com/downloads/details.aspx?familyid=ed9f5fb2-4cfc-4d2c-9af8-580d644e3d1d&displaylang=en

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

     

    We have compiled a set of sample applications and tutorials specifically for this CTP and you can see the gallery of these samples over on the right of the blog. Look for the box titled 'Article Categories' and then click Samples and Tutorials Gallery - EID Jan 06 CTP to take you to the gallery (or just click the link given above).

     

    In the same 'Article Categories' box is a link to the Readme file for the Jan 06 CTP which contains important late-breaking news and known issues - Readme File - EID Jan 06 CTP.

     

    There are lots more resources about Expression on the Microsoft Expression web site.

     

    If you enjoyed the previous Channel 9 video featuring the Expression Interactive Designer team then you'll want to check out the new video Robert Scoble hosted and posted today at the link below:

     

    http://channel9.msdn.com/showpost.aspx?postid=157843

Page 1 of 1 (14 items)