The team blog of the Expression Blend and Design
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:
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.
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:
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.
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:
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.
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:
This time, notice that even though you scaled out only one of the endpoints, both of the end points grew outward.
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
We're pleased to present the second Beta version of Expression Blend. Here are some of the changes since the Beta 1:
Download Microsoft Expression Blend beta
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:
( 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 :)
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:
If you are looking to make the jump into Silverlight 2, then this lab is a good place to start!
Cheers! Kirupa :)
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:
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:
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:
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:
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.
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.
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
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:
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.
In his blog post , Tim Sneath answers the following questions about considering when and where to use the most appropriate presentation layer technology:
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.
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  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.
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:
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:
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:
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.
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.
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:
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.
Arturo | Designer Audience Product Manager
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.
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.
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.
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:
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.
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:
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.