The team blog of the Expression Blend and Design
Have you ever imported an image or Illustrator file into Expression Design or Expression Blend then noticed that it seems either bigger or smaller than your original image? In this post I will explain why this occurs as well as point out a few tips you can use to get your images and other assets imported into Design and Blend at the pixel size you expect.
Expression Blend assumes a resolution of 96 pixels per inch (PPI). WPF, Expression Blend and Silverlight all assume one pixel is approximately 1/96th of an inch and therefore use a resolution of 96 PPI. You might be asking yourself why 96 PPI? I've been using 72 PPI for all of my web work. The short answer is that Microsoft has standardized to using 96 PPI. There are many web sites that describe why this decision was made and why the standard for Apple is 72 PPI. I encourage the reader who would like to learn more about this choice to search on 96 PPI in your favorite search engine.
If you work with assets that were saved specifying a resolution other than 96 PPI, Design and Blend will scale the asset to be the same physical size at 96 PPI. For example, an image that is 72 PPI and has a width of 6.667 inches and height of 8.889 inches has a width in pixels of 480 and height of 640. If I wanted to display that same image at a resolution of 96 PPI, it would need to have a width and height in pixels of 640 and 853 respectively. Therefore, if you import a 480 X 640 image into Design or Blend that was originally created at 72 PPI, its actual size after import will be 640 X 853.
The best way to ensure your assets come in at the same pixel size in Design or Blend as they are in your other content generation tools is to use 96 PPI throughout your workflow.
When using Expression Design be sure to select 96 PPI in the File > New dialog.
In addition, you should set your zoom level to Actual Pixels in order to see your content at full size. For 96 PPI this is 133%.
In Photoshop, you can change the stored resolution of an image in the Image Size dialog to 96 PPI. Be sure to uncheck Resample Image.
Unfortunately, Illustrator files are 72 PPI and currently always scale when imported into Design when the document resolution is 96 PPI. In this case, you can get the object back to the desired pixel size by selecting Scale As Percentage from the Transform options popup menu in the Action Bar. Make sure width and height are linked and change either the width or height to 75% (72 / 96 = .75).
Hopefully these tips will help keep the import goblins at bay!
To install this build of Expression Interactive Designer download it from the Microsoft Expression web site at http://www.microsoft.com/products/expression/en/interactive_designer/id_free_trial.aspx
To help us make a better product, please send your feedback to us via our discussion forum  or our product feedback center on the Microsoft Expression Web site .Highlights in this CTP include:
A gallery of samples and tutorials updated for this CTP  can be found in the Article Categories section to the right of the blog.
Very importantly, please also take a moment to read the Readme file for the March CTP  which contains known issues and workarounds.
 http://blogs.msdn.com/expression/archive/2006/02/22/537105.aspx http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.interactivedesigner&cat=&lang=en&cr=US http://www.microsoft.com/products/expression/en/default.mspx http://blogs.msdn.com/expression/articles/543834.aspx http://blogs.msdn.com/expression/articles/538345.aspx
Jeff Kelly is back with Part III of his behaviors coverage. This time, he focuses on the more advanced uses of Behaviors - Kirupa
In previous posts, I’ve touched on the basic pieces of the Behaviors API and some basic usages of them. In this post, I want to wrap up the discussion of the basic Behaviors API with some discussion of some of the more advanced features exposed by the Behaviors API.
Advanced Behaviors A large amount of interactive scenarios can be described in the language of triggers and actions; that is, when X happens, do Y. However, say I have two actions, A and B, both of which want to read and store information in a hidden (i.e. not exposed to the designer) but shared Foo object. If I implement A and B as actions, each action needs to know how to access the Foo object. There are a number of different ways to approach this, each with various merits and drawbacks. Rather than explore these in depth here, I want to point out a way to approach this problem using Behaviors.
The complexity in this scenario comes from multiple independent actions sharing a dependency on the Foo object. Consider that rather than having multiple Actions that share and operate on the same data objects, you can instead encapsulate the shared data objects into a Behavior and expose the functionality that would have been provided via Actions as commands on the Behavior. The benefits are two-fold: cohesion is greatly improved, as the data and the commands that act upon that data are now encapsulated in a single class, and second, the interface exposed to the designer in Blend 3 is much more explicit (no more wondering which Actions in a large class library are meant to be used together). Rather than relying on class-naming conventions or first-hand implementation knowledge to convey the relationships between several Actions that all act upon the same data object, the user is presented a single Behavior with each possible operation enumerated and customizable by the designer.
This is all tied into the Behavior system with the appropriately named InvokeCommandAction. By placing these actions directly on the behavior that exposes the ICommands, we get a really nice benefit: we can use any Trigger built against the Behavior Trigger API to invoke both Actions AND ICommands exposed on Behaviors! In addition to the assorted tooling work in Blend 3 to make invoking these ICommands from XAML easy for a designer, we’ve also added the ActionCommand support class for developers to make creating Behaviors exposing ICommands a breeze. A bare-bones implementation of ICommand that takes a function with either zero or one parameter, ActionCommand saves you the trouble of writing your own ICommand implementation each time you want to write a Command-able Behavior:
public class MyCommandBehavior : Behavior<DependencyObject>
this.MyCommand = new ActionCommand(this.MyFunction);
public ICommand MyCommand
private void MyFunction()
// do work...
Figure 2: Example Behavior exposing an ICommand
<Button x:Name="BehaviorHostButton" Content="Behavior Host>
<i:EventTrigger SourceName=" BehaviorHostButton" EventName="Click">
Figure 3: Example invocation of an ICommand on a Behavior using InvokeCommandAction
There is one major caveat to consider with this approach. Because InvokeCommandAction is not a TargetedTriggerAction, you cannot set TargetName to target an arbitrary Behavior; the InvokeCommandAction must be hosted on the Behavior it is invoking commands on. This means that the Trigger that fires the InvokeCommandAction must either be retargeted (by setting SourceName), or must be source agnostic. Also note that like any string-based reference system, the CommandName parameter of InvokeActionCommand is susceptible to falling victim to changing property names or refactorings down the road. Special care must be taken to avoid breaking these implicit links if these names are still in flux.
You may find yourself writing Actions and Behaviors that have a fairly common use case, and you may want to improve the default design-time experience around that use case. By default when you create an Action, Blend 3 will trigger it with an MouseLeftButtonDown EventTrigger where we can, or a Loaded EventTrigger if MouseLeftButtonDown isn’t available. However, you may want a custom Trigger instead of an EventTrigger, or maybe just a different default event in an EventTrigger. In order to facilitate this, we’ve added the DefaultTriggerAttribute in the System.Windows.Interactivity namespace:
public DefaultTriggerAttribute(Type targetType, Type triggerType,
params object parameters)
By setting this attribute on an Action class definition or an ICommand property definition exposed on a Behavior, you can specify one or more Triggers to instantiate automatically when that Action or Behavior is created by a user in Blend 3. The first parameter is the type for which to create this Trigger, the second is the type of Trigger to create, and the final is a list of constructor arguments to pass to the Trigger when it is created. If more than one attribute is defined, the most derived targetType that is applicable when the user created the Action/Behavior will be used.
For example, in the following definition:
[DefaultTrigger(typeof(UIElement), typeof(EventTrigger), "MouseLeftButtonDown")]
[DefaultTrigger(typeof(ButtonBase), typeof(EventTrigger), "Click")]
public class MyAction : TriggerAction<UIElement>
If MyAction is dragged onto a Button (or another ButtonBase derived class), the Action will be created under a Click EventTrigger. However, if MyAction is dragged onto any other UIElement, a MouseLeftButtonDown trigger will be created for it instead.
If you’ve read my previous point, you know that each of the core Behaviors classes constrain their AssociatedObject type via a generic argument in the class inheritance definition. However, there is a somewhat subtle complication here in the case of TargetedTriggerAction<T> and EventTriggerBase<T>. In both cases, these classes extend the more basic TriggerAction<T> and TriggerBase<T> and provide a “retargeting” mechanism, allowing Behavior authors to easily target and act upon elements other than the AssociatedObject.
For TargetedTriggerAction<T> and EventTriggerBase<T>, the generic parameter T does not constraint the type of their AssociatedObject as it does for TriggerAction<T>and TriggerBase<T>. Instead, it constrains the type of the retargeted element (Target/Source properties, respectively). Because retargeted Behavior classes are usually acting solely on their target, rather than their AssociatedObject, this is usually sufficient. But what if it isn’t?
Cue the TypeConstraintAttribute. You can apply this attribute to any TargetedTriggerAction<T> or EventTriggerBase<T> in order to constrain its AssociatedObject to the specified type. Blend 3 will enforce it when you are creating an instance of the Behavior type, and the run-time will throw if you manage to violate it anyway (via by-hand XAML manipulation or code behind).
This post covered quite a bit of ground, but there are a few more topics that we need to go over before calling it a day. Stay tuned for a future post on some of our behaviors-related extensibility features.
Download the RotaryControl source code
Download the ACControls source code
As promised, in this post I’ll show how to customize the template of the RotaryControl. I wanted to model automobile A/C controls and the result is shown below.
If you want to open and examine the project files as I describe the steps, download the source code and unzip it so that the RotaryControl and ACControls folders are siblings. Then open the ACControls solution in Blend 2 September Preview.
For the button design work I went to see Sam Paye, one of our designers, and he used Expression Design to create the visuals. Knowing that the control template requires three specially-named parts, Sam separated out the graphics into three top-level layers, or groups, each named after a template part. We then exported the graphics as three XAML files and opened those directly in Blend. After drawing out three instances of RotaryControl on the artboard and then making a copy of the template for each, it was very easy to copy all three layers from each XAML file and paste them directly into a Grid at the root of the corresponding template. Because the layer names matched the part names, and the Expression Design graphics were the same size (in pixels) as the Grid at the root of the templates, everything worked like a charm. The control code automatically turned off mouse hit testing on the topmost 'shine' layer and allowed the middle 'dial' layer to rotate in response to mouse gestures.
When you select a RotaryControl, a number of custom properties are listed in the Miscellaneous category of the property inspector. None of the controls are meant to spin freely through 360 degrees: all are constrained, so for each I set RotationIsConstrained to true and CounterClockwiseMostAngle and ClockwiseMostAngle to suitable values. For the leftmost control, the mode control, I set SnapToSnapAngle to true and SnapAngle to 40. For the other two controls I set SnapToSnapAngle to false so that they roll smoothly. When SnapToSnapAngle is false, both SnapAngle and RotationIsAnimated are ignored.
The mode control has five positions, and therefore five values, so I used Blend’s collection editor in the property inspector to enter five strings in the SnapValues property – one to describe each position in clockwise order. I then bound a TextBlock’s Text property to the mode control’s SnapValue property so that the current position is always translated into some meaningful string value beneath the mode control.
I hope you find the RotaryControl, and the example templates given here, of use.
You've just downloaded the new release of Expression Design 2 and you're anxious to try the new slicing feature. This article will guide you through the process of creating slices which will then be exported to an HTML document. To follow along with the steps outlined below, please download the frog.zip file. Let's get started.
Expression Design uses absolute positioning in CSS to position objects in HTML documents. Where the objects are positioned in the artboard is where they will appear in a web browser after exporting the slices to an HTML document. (Remember that the artboard is the area within the Document Frame.) For example, if you want your design to be positioned beginning in the upper left corner of the browser window, position your objects starting in the upper left corner of the artboard. Once your layout is exported to an HTML document, you may alter the positioning in Expression Web.
Another important consideration is the order in which your slices appear in the Slice Layer, which is created after you create your first slice. Just like the stacking order of objects in Design, the order in which your objects appear in the Slice Layer determines whether the objects are above or below other objects in the HTML document; more on this in the next section.
There are two methods of creating slices in Expression Design. The first method is to choose the Slice tool in the Toolbox and drag around the area you want to define as a slice. Let's do that now. Choose the Slice tool, the 7th tool from the top in the Toolbox (shortcut letter k), and drag from the upper left corner of the frog image to the botton right corner past the drop shadow on the bottom and right sides of the image. When you release the mouse a light blue, transparent object appears over the image. This is the slice.
When you create the first slice you'll see that a new layer is created in the Layers panel, named Slice Layer. Expand this layer and you'll see an object named Slice1 followed by a file type extension. This is a good time to rename the slice because the slice name will be the name of the exported image and of the CSS class by which the image is referenced in the HTML document. To rename the slice, double click on the slice name in the Slice layer and then type the new name FrogImage and press the Enter key to accept the new name. There's no need to type the file extension as Design will add this for you.
The second method of creating a slice is to right click on a selected object and choose Create Slice from Selection from the context menu. You can right click on a selected object using the slice tool or any other tool in the Toolbox. Once you choose the Create Slice from Selection option from the context menu, that slice will appear at the top of the slice layer, above previously created slices.
Regardless of which method you choose to create your slice, it's important to know that the slice will include anything that is visible on top of the object you're creating the slice from. If we were to right click on the gradient filled object at the top of the artboard, the slice would not only include the gradient filled object but also the Green Team text object and the part of the frog image that overlaps the gradient filled object. To eliminate these items from the slice, we'll hide those objects before creating the slice. Let's create a slice using right click method next.
Expand the layer named Layout in the Layers panel. A new feature in Design 2 allows us to hide individual objects within a layer. Click on the eye icon to the right of the text object named Green Team to hide the Green Team text on the artboard. Locate and click the Eye icon next to the grouped objects named Frog Image to hide the image. Now click on the gradient filled object at the top of the artboard, and then right click on the selected object and choose Create Slice from Selection. Notice that a new slice is added to the slice layer, above the FrogImage.png object, named Slice2. Mouse over the newly created object and notice from the popup preview that the slice includes only the gradient filled object.
Now click on the eye icons to the right of the Frog Image group and the Green Team text objects to make those objects visible again, mouse over the newly created slice again and notice that these previously hidden objects still do not become part of the new slice.
Rename your new slice GradHeader.png. Your Layers panel should now look like this:
Before we move on the adjusting the slice properties we've made so far, go ahead and create slices for the remaining objects which include the Green Team text above the gradient header (remember to hide the gradient filled object first), the navigation bar (hide the buttons and frog image first) and the buttons on the navigation bar (hide the buttons first). Remember to rename the slices as you want them to appear in the final HTML export.
If you expand the Layout layer in the Layers panel you'll see that the buttons are grouped objects. There is no real advantage to grouping these objects because as long as the text on the buttons aren't hidden first, the text will be included when you create a slice of the button. I simply grouped the objects to make a more organized layout; either way, the results are the same.
Adjusting Slice Properties
Click on a slice in the Slice Layer and notice that the Appearance panel is replaced with an Edit Slice panel. Here you can make adjustments to the selected slice properties. A slice will default to a .png file extension but if your slice is a photo you would probably prefer to export the slice as a .jpg file. If this is the case, you would locate the Format value box and, using the arrow to the right you would select the .jpg format. Expand the drop down list now and see what options you have to choose from. When you change a file extension the slice in the Slice Layer will change to reflect the new chosen format file extension and the options in the Edit Slice panel change to the options available for your chosen format. The value box containing Slice contents allows you to see what is included in the slice so you can check or uncheck the objects you wish to include in the slice.
A large preview window also appears in the Edit Slice panel giving you a visual of the expected output of the slice. You can experiment with changing the values of the various value boxes and checking and unchecking other options to see the results of your adjustments.You also have the ability to change the dimensions of the slice in the Width and Height value boxes in the Edit Slice panel. For the GreenTeam.design file we can accept the default .png file format and the values set by default for our slices. Let's move on the exporting and viewing the compiled HTML file.
Exporting to HTML & Slices
Choose File > Export from the menu bar. In the resulting dialog box, choose Slices in the Items to Export section. You'll see each individual slice in the preview window. Clicking each slice will highlight the slice in the preview. When you're satisfied with the slices, choose HTML & Images in the value box to the right of the Container Name value box and type a name in the Container Name value box. Again, it's not necessary to add the .html file extension as Design will do this for you. Accept or change the Location where the HTML file will be saved and then click the Export All button to create the HTML document and image slices.
Navigate to the HTML file in Windows Explorer where you saved the document. Notice that the image slices were saved in a separate folder using the name you gave the document in the steps above followed by _files. This makes it easy to change the location of your images if you choose to do so at a later time. Double click on the HTML file to launch Internet Explorer and view your masterpiece. If all went well, you're done and ready to pass the files along to the web designer who will open the and work on the file in Expression Web.
Before wrapping it up, you might explore the different export container options. In additions to HTML & Images, you can export to XAML WPF Canvas, XAML Silverlight Canvas and XAML Resource Dictionary.
- Annie Ford
As most of you know, last week we released the release candidate version of Expression Blend 4. Shortly after many of you had a chance to play with it, some of you reported that Expression Blend crashes during launch.
If you are one of those people whose Expression Blend crashes after launch, please download this minor revision of the release candidate we released last week:
If you aren’t having any problems launching Blend, you do not have to upgrade. There are no new features or changes besides some changes to make sure Expression Blend runs properly on launch.
Submit Error Reports! We were able to detect this issue thanks largely through the error reports those of you with this crash submitted. We constantly go through all of the crash reports we receive, and we try to fix as many of them as possible.
While we hope you never have to experience crashes from running Expression Blend, if you do experience a crash, please do submit the error reports!
- The Expression Blend Team
As many of you know, MIX is Microsoft’s design-focused conference held in Las Vegas near the beginning of each year. Last year, the focus was all about Silverlight 2. Looking through the list of sessions posted so far, the buzz seems to be around Silverlight 3.
A group of us from the Expression Blend and Design teams will be there, so if you are going to be in the Venetian, feel free to drop by any of the Expression sessions and chat with us. We would love to hear from you.
If you are undecided on attending, there is a discount if you register by February 14th, so click here.
Cheers! Kirupa :-)
That’s right, we're very pleased to announce that version 1 of our team's suite of end-to-end tools for creative designers is done! The process is now underway to manufacture and distribute the product. For more details on the suite and how you will be able to purchase it, see the Expression Web Site .
The Expression Studio suite consists of four products – Expression Web, Expression Blend, Expression Design and Expression Media.
At MIX, we released an early preview of our support for building applications for Windows Phone 7 that only ran on a pre-release version of the .NET Framework.
If you have been holding off on upgrading to the latest versions of Expression Blend, Visual Studio, or .NET 4, wait no more! Today, we (along with the Windows Phone team) are releasing an update to the components we released last month to work on the final version of .NET Framework 4.
Download everything you need below:
Windows Phone Development Besides the RC posted above, you will need the following components installed for developing Windows Phone apps:
Besides support for .NET 4, there have been some general improvements to the overall design experience, emulator updates, and breaking API changes. You can get a broader overview on the Windows Phone Developer blog.
As always, we love to hear from you. Please feel free to comment below or use our forums here.
In Blend you can author keyframes with ease out and ease in interpolation to give your animations acceleration and deceleration: in other words, life. You can also draw a motion path and animate an element along it. A value curve is a graph of the change in a property value over time, and the combination of different value curves for different properties allows fine control over advanced scenarios such as acceleration along a curved trajectory.
The previous post Keyframe easing and key splines explains the string of numbers in a XAML KeySpline attribute such as those generated by Blend’s ease out and ease in settings. In a nutshell, the numbers are one keyframe’s worth of control points on a value curve. You can draw a value curve in Blend using the Pen tool and if you associate that curve with an element, a double property, and scales for the axes, then it’s a simple task to generate a set of keyframes and key splines. There are some scenarios where doing this is more appropriate than using Blend’s timeline so here’s a sample application which will get you started. The sample is unsupported but it is offered in the hope that it will be useful, instructive, or interesting.
Download the ValueCurve2KeySplines source code (Blend Beta 1).
Once you’ve downloaded and unzipped the sample project files, open and test (F5) the application. After building, the message on the artboard will disappear and the scene will display correctly. In the running application you can see three different-colored value curves, each of which targets a different property of the red plus sign-shaped element. When you click the ‘Generate’ button, an animation is generated from each of the value curves and these animations are saved in XAML format into the build folder in a file named Storyboard.xaml. The animations are also inserted into the application and previewed. The animation generated from the value curves included in the sample resembles an object spring-mounted on a surface and set in motion with a twang. If you’d like to know how the value curves and parameters were assembled then you can recreate it with the following procedure.
First, you need to delete the value curves and parameters so you can recreate them. Expand LayoutRoot > Graph > ValueCurves and delete the Path elements named X, Y and Angle. Expand LayoutRoot > LegendBd > [StackPanel] > LegendLB and delete the ValueCurveParameters elements named XParms, YParms and AngleParms. On the artboard you’ll notice that the Legend list box is now empty. Running and clicking ‘Generate’ now will have no effect.
The ‘spring twang’ animation happens over a small area and time period so let’s scale everything up while we’re designing it and then we can set the correct scale later without having to change any curves. Find the TextBlock element LayoutRoot > Graph > Axes > TimeAxis > TimeMax and set the Text property to ‘10’ so that the animation has a duration of ten seconds.
To recreate the value curve which controls the element’s X coordinate, first double-click ValueCurves to activate it; the yellow border confirms the activated state. Click the Pen tool (or press P) and draw a curve like the one in the diagram:
Make the first point with a click-drag toward the top-right of the screen to set the control point in that direction. Click-drag to the right to draw each of the subsequent points which will set horizontal tangents at the same time. In the previous post I mentioned that it is not valid for a control point to fall outside the bounding box of the spline which owns it. But some of the tangents shown above (and likely some of the tangents you will draw) are not perfectly horizontal so the control point on one end of the tangent will be breaking the rule. The ValueCurve2KeySplines sample will silently tolerate such errors up to a configurable limit (by default, 5% of the corresponding side-length of the bounding box) and will correct the control point. Any error greater than this tolerance will still be corrected but will provoke a warning message when the ‘Generate’ button is clicked. If you don’t want any automatic correction to take place then set the Window1.controlPointWarningTolerance member to zero and correct your control points manually until no warning message is shown. You can manipulate the control points individually with ALT and the Direct Selection tool (A). In the object tree, name the Path ‘X’ and set its Stroke to DarkSeaGreen and its Fill to No brush.
Now the value curve needs parameters so you need to create a parameter object which refers by name to the Path element representing the value curve. Make sure the ListBox named LegendLB is visible in the object tree. Click the Asset Library tool (the bottom tool in the Toolbox), click User Controls, and drag ValueCurveParameters out of the library. Be aware that the Asset Library will close as soon as your drag begins, but keep the mouse button pressed and drop the object onto LegendLB in the object tree to create a new ValueCurveParameters item in the ListBox. Name the object ‘XParms’ and then, in the Property Inspector, expand the Miscellaneous category and set the following property values: MaxValue = 350, MinValue = 50, set PathBrush to a SolidColorBrush with the Color DarkSeaGreen, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children).(TranslateTransform.X)’, and ValueCurveName = ‘X’. An easy way to determine the TargetProperty and to make sure any necessary property elements exist on the target element is to create a new timeline and animate that property. You can copy the correct property path from the Storyboard.TargetProperty attribute in the XAML. Then you can delete the timeline and the necessary property elements will remain on the element.
For the element’s Y coordinate, draw a similar curve to the first but out of phase with it. Name the curve ‘Y’ and color it Navy with no Fill. Add a second parameter object (named ‘YParms’) to the ListBox and set the following property values: MaxValue = 350, MinValue = 50, PathBrush = ‘Navy’, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children).(TranslateTransform.Y)’, and ValueCurveName = ‘Y’.
Finally, for the element’s angle, draw a third curve out of phase with the other two. Name the curve ‘Angle’ and color it Orange with no Fill. Add a third parameter object (named ‘AngleParms’) to the ListBox and set the following property values: MaxValue = 30, MinValue = -30, PathBrush = ‘Orange’, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children).(RotateTransform.Angle)’, and ValueCurveName = ‘Angle’.
The finished application should look similar to this:
Test the animation and make any adjustments to the value curves to get the behavior you want. Essentially the frequency should be increasing while the amplitude is decreasing. When you’re happy, scale the whole animation down. Set TimeMax to ‘1.5’, set the MinValue and MaxValue of the X and Y parameter objects to 220 and 230 respectively, and set the MinValue and MaxValue of the Angle parameter object to -20 and 20 respectively. Now test the animation again. If you want to use the animation in another application then make sure a target element with the correct name and property elements exist and paste the contents of Storyboard.xaml into Window.Resources. You’ll also have to change the xmlns attribute into an x:Key attribute.
For another example set of value curves and parameters, you’ll find a file called Example2.txt in the zip file along with the source code. Replace the ValueCurves and LegendLB element in Window1.xaml with the ones in Example2.txt and give the result a try. It’s an example of an element moving along a circular path with increasing speed.
Found a bug? Report it to us.
Have something to say about the beta? Join the discussion group:
If you haven’t had a chance to check out the sessions from MIX10 that showcased Expression Blend 4, the links below should help you out:
Authoring for Windows Phone, Silverlight 4 and WPF 4 with Expression Blend by Christian Schormann and Pete Blois
Dynamic Layout and Transitions for Microsoft Silverlight 4 with Microsoft Expression Blend by Kenny Young
Prototyping Rich Microsoft Silverlight Applications with Expression SketchFlow by Chris Bernard
This post only focuses on the sessions from MIX that are Expression Blend specific. By now, all of the sessions from MIX should be available online, so head over to the MIX Sessions page to view more: http://live.visitmix.com/Sessions
Cheers, Kirupa =)
Today, we have released the final version of the Windows Phone Developer Tools. You can download it below:First, download everything you need below:
This installer will automatically install free, phone-flavored versions of Expression Blend, Visual Studio 2010, and XNA Game Studio.
If you already have Expression Blend 4 installed, unlike earlier releases, running this installer will update your existing version of Expression Blend 4 and give you the ability to create Silverlight, WPF, and Windows Phone applications:
Thanks to everyone who has provided feedback over the past number of releases to help us get to this stage. As always, if you have any additional feedback, feel free to post them on the Windows Phone Developer Forums.
As you can imagine, shortly after a major release like we had, most of us shift our focus slightly towards talking about and sharing how to use some of the cool new features we released. In this first of a two-part series, I hope to make up for the long period of inactivity on this blog by sharing two Windows Phone focused videos that Unni, Billy, and I recorded for Channel 9.
Overview of Expression Blend for Windows Phone 7 The first video on this list is one that walks you through, at a breakneck speed, most of the new features we added to Expression Blend to help make building Windows Phone 7 apps easier:
Through the guise of building a Bing Search application, I cover features ranging from our Device Panel to Application Bar support to creating Sample Data from a Class file. You can learn more about these features by looking at some of my more in-depth Windows Phone 7-focused articles.
Windows Phone Design Templates Billy and Unni are up next to showcase some of the templates they created to make creating common Windows Phone 7 UI layouts really easy:
The templates they created cover a wide range of common UIs that you will see, so feel free to use these directly in your own projects or simply as a source of inspiration. Before you can do any of that, of course, download the templates from codeplex first.
As always, if you have any questions, feel free to comment below. If you recorded some interesting videos, post them in the comments as well.
Cheers, Kirupa =)
After you buy and install any Expression program, you should immediately license your software to avoid future interruption of the programs. If you don’t license them, the programs will stop running after 60 days or possibly sooner if you have used a trial product key. When you start any unlicensed Expression program, a dialog box may prompt you to enter your product key to license the program. If you’ve closed that dialog without licensing your software or the dialog doesn’t appear, use the following steps to license your software instead:
· To license Expression Blend, Expression Design, or Expression Media, start the program, choose Help > Enter Product Key, and then enter your product key which appears on a sticker on your software box; if you bought Expression Studio, licensing just one of these programs will also license the other two.
· To license Expression Web, enter your product key when prompted during the installation process. If you installed Expression Web with a trial product key, you can license the installed trial program by doing the following: Close Expression Web and open your Control Panel in Windows. Double-click Programs and Features (Windows Vista) or Add or Remove Programs (Windows XP), select Microsoft Expression Web Trial in the list of installed programs, and click Change. In the installer dialog, select Convert and click Continue, and then follow the onscreen instructions to enter your product key.
While Blend makes it easy for you to create your own controls, creating your own control may not always be the best solution. In many cases, especially when you want to change how a control looks, styling an existing control may be a better choice. While you can style any control by using Blend's UI, modifying system controls can be time consuming if you are new to WPF and not sure what the consequences of modifying a particular property may be. To make it easier on you, Blend includes a resource dictionary called Simple Styles.xaml that applies an easily-modifiable style to your commonly used system controls.
To use these simple style controls, go to your Asset Library and select Simple Styles under the Controls tab:
You will see the simplified versions of your system controls, and they are just like your system controls...except much easier to style.
The User Guide provides great coverage of how to use simple style controls, so if you need any further information, hit F1 or go to Help | User Guide. In the User Guide, you can find Simple Styles listed under Home | Controls | Working with simple styles, or you can do what I did and just search the User Guide for "simple styles" instead!
Cheers! Kirupa Chinnathambi
Hi everyone, We have just released another preview of Deep Zoom Composer, and you can download it from the following location:
As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.
Quick Intro to DeepZoomPix This release coincides with the recent launch of the DeepZoomPix technology preview: http://deepzoompix.com/default.aspx If you haven’t seen DeepZoomPix, it is a technology demo where you can upload and view your images using the Deep Zoom technology found in Silverlight:
A key part of DeepZoomPix is the viewer through which you can browse and interact with your images. Within the viewer, you have the ability to dynamically change how your images are arranged, play a slideshow, view a thumbnail of all images, as well as tag/filter:
There are a lot of cool things you can do in DeepZoomPix, and you can learn more about DeepZoomPix by reading their FAQ as well watching a video interview with Rado and Matt on how the site was actually created. Janete will have a blog post with more information on DeepZoomPix in the near future.
Deep Zoom Composer and DeepZoomPix As many of you know, not too long ago, we added the ability for you to be able to publish your photos online to PhotoZoom. Based on a lot of requests and feedback many of you have provided about PhotoZoom and the integration with Deep Zoom Composer, we closely followed the evolution of PhotoZoom into DeepZoomPix and were excited to help make Deep Zoom Composer work better with the new service.
The biggest change is that Deep Zoom Composer will only allow you to upload to DeepZoomPix:
The workflow and the UI are largely the same, so if you have used the PhotoZoom functionality before, everything should look familiar to you with the exception of a few name changes.
Our primary motivation for moving to DeepZoomPix was to address the large amount of feedback many of you provided us about PhotoZoom. We hope you all find DeepZoomPix to be more reliable and more fun to use.
Do note that DeepZoomPix is just a technology demo. It is something that we are only planning on keeping until the end of the year (Dec 31st), and after that, we are not sure what will happen to the service. Please do not use this location as a permanent storage location for your photos.
Before I wrap up this post, a huge thanks to Matt (who you can see in the video interview above) for helping unwind some gnarly technical issues associated with changing Deep Zoom Composer to use DeepZoomPix.
As always, please send us your feedback by posting on the forums or commenting below. Cheers! Kirupa & Janete
Last October I described how to use the States pane in a WPF project with Blend 2 Service Pack 1. Things are even simpler with Expression Blend 3 so in this post I’ll remind you how to use the States pane with WPF controls.
As you may know, when you create a template for a Silverlight control, the States pane populates with States ready for you to select-and-design. This is because Silverlight controls are designed to work with States, and each Silverlight control advertises the States it works with. But WPF shipped before States did and consequently WPF controls know nothing about States. It’s actually the magic in the WPF Toolkit that makes WPF controls work with States. Blend 3 installs the WPF Toolkit for you automatically, so there is nothing extra you will need to do.
This means that when you create a new template for a WPF control, the States pane is empty initially. But it only takes a few moments to add the correctly-named States and from there you’re on par with the Silverlight experience and you’re ready to select-and-design as usual.
So, here’s a list of the WPF controls that work with States along with the state groups and states you’ll need to add.
Button, GridViewColumnHeader, RepeatButton
CommonStates: Normal, MouseOver, Pressed, Disabled FocusStates: Unfocused, Focused
Normal, MouseOver, Pressed, Disabled
CommonStates: Normal, MouseOver, Pressed, Disabled CheckStates: Unchecked, Checked, Indeterminate FocusStates: Unfocused, Focused
Unchecked, Checked, Indeterminate
CommonStates: Normal, MouseOver SelectionStates: Unselected, Selected
FocusStates: Unfocused, Focused
CommonStates: Determinate, Indeterminate FocusStates: Unfocused, Focused
CommonStates: Normal, MouseOver, Disabled, ReadOnly FocusStates: Unfocused, Focused
Normal, MouseOver, Disabled, ReadOnly
Hopefully this helps you to be more productive in WPF when working with states!
Hi everyone, Continuing the overview of all the new features we introduced in Expression Blend 3, this post wraps up our trilogy by looking at more features that fall under Workflow, Code Editing, and Extensibility. Of course, if you missed the earlier posts, be sure to catch up on Part I and Part II as well.
Workflow Improvements There is a large collection of improvements we made in Expression Blend 3 that can loosely be bucketed under a category called Workflow. Most of the items here are not new features necessarily. They are improvements we made to help make creating applications in Blend more efficient, and dare I say it, fun!
Revised, Customizable UI One of the immediate changes you will see when launching Blend is our more polished, fully customizable user interface where you can rearrange, hide, save/restore workspaces, and move various panels to your heart’s content! Christian Schormann puts this feature to good use when describing how to create a minimal user interface for working with SketchFlow projects: Creating a Minimal Workspace for SketchFlow
Updated Gradient Tool The classic gradient tool that many have used has gotten quite a revamp in Blend 3. You can read more about the changes in Joanna Mason’s blog post on this topic: Creating and Editing Gradients in Expression Blend 3
Layout Improvements Expression Blend 3 introduces several improvements to layout operations. Moving objects with direct manipulation on the artboard is now more consistent and predictable, alignment adorners are shown for more containers, layout properties and bindings are preserved when reparenting or grouping objects, and layout properties are no longer written to the XAML code-behind file unnecessarily.
Additionally, you can now use the property inspector to change the width and height of an object even when these properties are set to Auto:
Expression Blend 3 will automatically compute the appropriate margins needed to make sure that the object is the size that you specify.
Selection Improvements In Blend 3, we made some significant changes to the selection model. These changes make it easier to change your selection and draw new objects on the artboard. One such improvement is marquee selection of individual points on a path:
When you use the Direct Selection tool, you can now select individual points on a path by using marquee selection. Just drag to define the area that contains the points that you want to select.
Copy and paste images from the Clipboard Image data put on the Clipboard by other applications such as Windows Internet Explorer, Adobe Photoshop, and Microsoft Paint can now be pasted directly into Expression Blend 3.
Easier Access to Template Internals If a control includes templates that are applied in specific scenarios, such as when a control has to display a collection of data, those templates now appear in the Edit Other Templates category of the Edit Template item on the Object menu;
This allows you to access the internals of your controls from a single location more easily than you were able to before.
Improved UserControl Editing Experience When you modify the XAML that defines a UserControl control, you no longer have to rebuild the project to update all the UserControl objects on the artboard. Additionally, you can enter editing mode for a UserControl control by double-clicking one of the UserControl objects on the artboard.
Searching for files in the Projects Panel With Expression Blend 3, you can now search for items in the Projects panel:
This makes it very easy for you to find items in larger projects without having to manually browse through complicated folders!
Code Editing Improvements One area we received a lot of feedback from many of you was to make our support for editing XAML files better and to add support for editing C# and VB code behind files. In Blend 3 we acted on your feedback and added both a very (in my not so modest opinion) a slick XAML editor as well a C# and VB code-editor with intellisense and other good stuff.
Here is what our XAML editor looks like:
We also added very basic support for being able to open and edit text, html, and xml files as well using our new code editor.
More Extensibility Points If you are writing custom controls or providing additional functionality for creating assets for your project, you will find our addition of more extensibility features useful. You can read more about them at Unni’s blog: Blend 3 Extensibility, Writing a Design Time Experience for a Silverlight Control, A Sample that Shows the New Blend Design Surface Extensibility, AlternateContentProperty Attribute
A few weeks ago, a couple of Expression Blend team members presented at the TechEd conference held in New Orleans this year!
You can view those sessions given by Unni/Alan and Dave below:
You can browse through all of the sessions by clicking here.
Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expected including layout, databinding, controls and templating. On the Blend team we’re extremely excited about the features arriving in Silverlight 2.0 and are very busy building some excellent tooling for it. We don’t have too much information right now, but rest assured that we’re working on it.
Following from Danc’s earlier post about creating game graphics in Expression Design, a fun Silverlight game that we did together is Sprawl, you’ll see a very similar visual style there:
The game is all Silverlight 1.0 and took about a day of development time to make once the graphics were done. I hadn’t realized Danc was going to post his Planet Cute drawings, otherwise I would have polished up a sample Silverlight app built off of it :)
One thing that many people have been pestering me about (and rightly so!) is an update to the Snoop application used for debugging WPF applications. I just wanted to assure folks that I am working on updating it and hopefully will have a quality update in not too long.
In Expression Blend 2, when you choose to edit a code file or insert an event handler for an event, by default, Visual Studio will be launched. If you have multiple versions of Visual Studio (VS) installed, though, you may find that a different version of VS than the one you intended to open will get launched. The most common case is where you have both VS 2005 and VS 2008 installed, but VS 2005 gets launched by Blend instead of VS 2008.
The fix for this involves editing your registry. From the Run prompt (WinKey + R), type regedit and press enter:
With your Registry Editor now running, navigate to HKEY_CLASSES_ROOT\VisualStudio.DTE.9.0\CLSID. Copy the Value Data from this key:
With that value copied, go to HKEY_CLASSES_ROOT\VisualStudio.DTE\CLSID, and overwrite its existing value with the data you just copied a few seconds.
This change should let Expression Blend know to launch Visual Studio 2008 instead of Visual Studio 2005.
Thanks, Jeetendra “Jeetu” Kukreja
People have been wondering how to do this so I thought I’d write up an explanation.
The HyperBar sample which ships with Blend Beta 1 has a fixed set of eleven images in it. But what if you want to combine the HyperBar effects with the flexibility of binding to data – be it XML data or CLR object data? The solution is to draw out a ListBox and bind your data to that. Then you edit the ListBox’s control template and place a HyperGrid panel in there as the items host. It’s the HyperGrid panel that does all the magic in the HyperBar sample. Here are the steps you’ll need to follow to get this to work, and then links to some files so you can study/copy the code in there.
// Clear the ColumnDefinitions and re-add one per child.
foreach (UIElement uie in InternalChildren)
protected override void OnInitialized(EventArgs e)
Now you’re done. Build and run. If you have any problems then you can study the following files to see if they differ from what you have. One final point is that the image files are still embedded in the project and the data.xaml refers to them as embedded resources. An exercise for the reader is to store these in a folder which the .exe reads at runtime.
Hi everyone, When using Expression Blend, a common task you probably engage in is working with layout. Tasks I commonly associate with “working with layout” involve moving things around, rearranging the order of elements, ensuring everything flows when resized, changing your layout container, etc. For the most part, the changes you make to the layout of your application are pretty harmless…except when it involves DataContexts.
In a nutshell, data contexts allow you to specify the data that elements can inherit and work with. Seems pretty harmless so far. Data contexts can be set on pretty much anything, but because the data is inherited, data contexts are often placed on parent elements (such as a layout container) whose children will inherit the data:
What seemed harmless earlier now has the potential to cause trouble. Because data contexts are often placed on a layout container, and because data contexts primarily benefit any children listening in, you need to ensure that any layout changes you make do not cause your data context to break. The common ways your data context can break are:
Today, Blend does not let you know when you perform a layout operation that breaks data context. It is up to you to be vigilant, and you can see which element has a data context set on it by looking at its DataContext property:
If this property isn’t empty, it means that a data context has been set on it. While having a data context set should not imply that data is actually being used, it is a good gauge on whether a layout operation you perform will have any negative side effects on the children involved.
Cheers! Kirupa =)