Archive

Posts Tagged ‘WPF’

What’s new in Blend 4 Behaviors on Silverlight TV

June 1, 2010 2 comments

Right after landing in Seattle after the latest .toolbox events tour, I ran to the studio and filmed this episode on Behaviors of SilverlightTV. Not only are there 10 new Behaviors added in version 4 of the Expression Blend SDK, there is new functionality available in the Behaviors API. In this video, we use a few of the new Behaviors and demonstrate that their properties are now bindable and that once triggered an action can check against a specified condition to ensure that it should fire.

These new features result in more “simple drag and drop/property setting” power for the UI designer and developer.

Watch "Using Behaviors in Blend 4"

Advertisements

Expression Studio 4 Launch on Jun 7th in NYC!

May 26, 2010 11 comments

Expression Studio 4 will launch at the Internet Week conference in New York City on June 7th!

Bill Buxton will be there as our featured guest speaker and many of your other favorite Blenders will be there, too:

And I’ll be there as well, with a big smile on my face 🙂

We’ll show the products in action and showcase design agencies who have seen their businesses grow with Expression Studio.

Join us for the launch!

—-

And just a reminder Expression Studio includes Expression Blend, SketchFlow, Expression Web, Expression Design and Expression Web.  We’ve talked about a lot of the new features in Blend 4 (but not all of them!) and now its time to show the new features in all of the tools!

Design-time Resources in Expression Blend 4 RC

May 4, 2010 5 comments

When building Silverlight and WPF applications that are composited (e.g. using MEF) or written to support UI customization, resources are loaded dynamically at run-time. This is a great solution on the development side, but can be a challenge when working on design tasks.  If your design surface can’t find the resources at design-time you are presented with zero styling or worse, XAML parsing errors.

Expression Blend 4 RC provides a new feature to support loading resources at design-time.

When you open a project in Blend and the current document contains resources that cannot be resolved and your solution contains at least one ResourceDictionary file, the Add Design-time Resource Dictionary dialog will open.

Add Design-time Resource Dictionary dialog

Once selected, a reference to the dictionary will be added to a file named “DesignTimeResources.xaml” located under the Properties folder. Blend will now find the missing resources during design-time and be able to render the design surface properly.

This feature enables editing of dynamic applications to be much easier than before. No more hacks to get your resources loaded!

—–

As a side note, if you’ve added a ResourceDictionary as a design-time resource and you’d like to remove it; open the “DesignTimeResources.xaml” file.  In XAML view, remove the reference to your resource dictionary in the ResourceDictionary.MergedDictionaries node. Then after closing and reopening the file referencing the missing resources, the dialog will prompt you again to choose a dictionary.

—–

I’ve provided a sample solution below that will prompt you with the Add Design-time Resource Dictionary dialog, when you open the “MainPage.xaml” file.

Download the Design-time Resource Sample

Avatar Mosaic -Experimenting with the Artefact Animator

April 21, 2010 6 comments

Avatar Mosaic Screenshot

After finding out about the Artefact Animator,  written by Jesse Graupmann, I knew I wanted to try it out.

The Artefact Animator library is based on the same concept as Tweener for Flash, which provides an easy way to do procedural animations in WPF and Silverlight.

I found some time last night to put together this little Xbox Live avatar mosaic and was very pleased with the results.

Test the Avatar Mosaic Prototype

Download the Source

If you take a look at the prototype, you can see there’s a few things you can do:

  • Drag the grid splitter, resize the window or change the padding slider to cause the tiles to reposition.
  • Type a new Xbox Live Gamertag in the textbox and TAB out to cause the tiles to fade out and fade back in with a new image
  • Roll over a tile and it will scale down until you roll off of it

You can download the source to see the full code but I’ll just highlight the areas where the Artefact Animator is used below.

Download the Library

The first thing you need to do is download a copy of the library from the codeplex site. Jesse has also posted documentation which will help you understand how to use the library. Once you have the library downloaded make sure to add a reference to your project.

Position the Avatar Tiles

When the application loads, AvatarTile controls are dynamically added to the main Canvas called LayoutRoot. Once the SizeChanged event of the Canvas is fired the updateTileLayout method is called.  Calling the method at this point ensures the ActualWidth property of the Canvas is available and the tile layout will be repositioned if the browser window is resized or the grid splitter is moved.

Then we loop through the children of the Canvas and based on the index of the tile an easing function is added using the code below:

ArtefactAnimator.AddEase(element, AnimationTypes.X, curX, time, ease, delay);
ArtefactAnimator.AddEase(element, AnimationTypes.Y, curY, time, ease, delay);

The element parameter defines which AvatarTile to animate.

AnimationTypes is an enum tied to different properties you can choose to animate.

The curX and curY parameters define the new value of the animated property.

The time parameter defines how long the animation should take to get to the new value.

The delay parameter defines how long before the animation should begin.

The ease parameter is a PercentHandler class instance used to define the type of easing function.  The full list of Ease Functions is posted, along with how to create custom ease functions.

When determining the curX and curY values in the updateTileLayout method, padding is also taken into consideration.  The slider sets the padding based on its position.  After the slider is moved, the updateTileLayout method is called to reflect the change in padding.

Fade Out, New Image, Fade In

After a new value is entered into the textbox and the LostFocus event is fired, the AvatarTiles are faded out to reset the brush. This was a test of the available Events of the EaseObject.

//fade out each tile incrementally
for (int i = 0; i < tileCount; i++)
{
   easeObject = ArtefactAnimator.AddEase(element, AnimationTypes.AutoAlpha, 0,
                                            time, ease, delay); 
   delay += .05;
}

//capture completed event of last "fade out" easing
easeObject.Complete += new EaseObjectHandler(easeObject_Complete);

After looping through the children and animating the Opacity of each element, a reference to the return value of the AddEase method is stored. This way we can add an event handler to the Completed event of the EaseObject instance. The event handler will then reset the image brush and animate the tiles back into view using the code below:

//set brush to new image based on textbox
ImageBrush ib = Application.Current.Resources["xboxTileBrush"] as ImageBrush;
ib.ImageSource = new BitmapImage(new Uri(string.Format("http://avatar.xboxlive.com/avatar/{0}/avatarpic-l.png", gamerTagTextBox.Text)));

//fade in each tile incrementally
for (int i = 0; i < tileCount; i++)
{
    ArtefactAnimator.AddEase(element, AnimationTypes.AutoAlpha, 1,
                                time, ease, delay);
    delay += .05;
}

Avatar Mosaic Screenshot

Mouse over action for the Tiles

And finally, taking advantage of some of the Shortcut functions built in, we’ll scale the AvatarTile based on the mouse over events.  In the AvatarTile class, the first step is to use the handy NormalizeTransformGroup method which ensures the needed Transform objects are in place.

Once the library is upgraded to Silverlight 4, this step could become obsolete by leveraging the new CompositeTransform class.

In the Loaded event:

LayoutRoot.NormalizeTransformGroup();
LayoutRoot.RenderTransformOrigin = new Point(.5, .5);

Then on Mouse Enter:

LayoutRoot.ScaleTo(.5, .5, .8, AnimationTransitions.ElasticEaseOut, 0);

And to remove the effect on Mouse Leave:

LayoutRoot.ScaleTo(1, 1, .8, AnimationTransitions.ElasticEaseIn, 0);

And that’s it! Everything is hooked up and ready to run.

Final Thoughts

I really like the direction Jesse is headed with the library by making procedural animations easier to write in Silverlight and WPF.  He’s mentioned the library is in its early stages and would love to see more people use it and provide feedback.

One of the things I found is that after changing the gamertag and fading out the tiles, the repositioning animations got very slow.  I’m not sure if that’s colliding easing objects or what, but there’s some performance work that could be done there.

The other issue is that due to the nature of procedural animations there is no design-time experience.  The best thing about Storyboards is that you can create them visually in Blend and preview them without having to run the application.  It’d be interesting to see if there was some way to tackle this problem. Not sure what to suggest yet.

Test the Avatar Mosaic Prototype

Download the Source

What do you think? Give the Artefact Animator a try and send your feedback to Jesse.

Expression Blend 4 Beta Feature Overview available for download

March 15, 2010 15 comments

Expression Blend 4 Beta Overview

Expression Blend 4 Beta is out in the wild and available for download! As a companion whitepaper, check out the Expression Blend 4 Beta Feature Overview which provides a walkthrough of the new features. Here’s where we begin:

Introduction

Expression Blend 4 Beta adds support for Silverlight 4 and Windows Presentation Foundation 4, while maintaining the ability to create and edit Silverlight 3 and WPF 3.5 with Service Pack 1(SP1) applications. Interoperability with Visual Studio 2010 has been added, maintaining the seamless workflow between the two tools.

In response to customers’ desires to do more without code, new features in SketchFlow enable more dynamic prototypes to be created and provide an enhanced player experience. Additionally, Expression Blend 4 Beta adds powerful new behaviors for all application types and makes them configurable with conditional statements.

Expression Blend 4 Beta introduces new features that support the Model-View-ViewModel (MVVM) pattern for business application development. New design-time data and resource features, along with behaviors such as CallMethodAction and InvokeCommandAction greatly increase the capability and experience for design tasks while building these applications.

Along with these three areas of focus, other additions include: new controls, such as the PathListBox, new pixel shader effects, transition effects and helpful tooling improvements.

Expression Blend 4 Beta is an exciting update that continues to revolutionize the speed and efficiency with which you can take your ideas from concept to completion on the Silverlight and .NET platforms.

 

The rest of the paper is divided into the following topics:

  • SketchFlow Improvements for Better Prototypes
  • Enabling Business Application Development with MVVM
  • New Controls and Effects for Dynamic Interfaces
  • More Interactivity and Less Code with New Behaviors
  • Editor and Tooling Improvements
  • and Expression Blend Resources

I hope you find the Expression Blend 4 Beta Feature Overview useful and that you share your feedback. We want to make sure the overview for the final release is even better!