Richard Griffin's Blog

Silverlight 3.0 - 3D Flip Action using Plane Projection

Richard.Griffin — Thu, 16 Apr 2009 16:58:43 GMT

After reading Jobi Joy’s post about a 3D Flip Control he had built. It gave me an idea about creating a Silverlight 3D Flip Action that can be applied to any UIElement. It also meant that I got to play with the new Plane Projection bits in SL 3.0. To do this sort of interaction in WPF I use a series of data templates that using template binding for the back and front controls, pretty much a standard mechanism that you see around. Fluid Kit also has a flip implementation which I suggest you take a look at if you have not already. Fluid Kit rocks BTW. The same code below is based on Jobi Joy’s 3D control just refactored into an Action.

The 3D Flip Action can be triggered using a standard Event Trigger such as MouseLeftButtonDown or an Event Trigger of your choice. There are some animation properties for you to supply; a point value for the Projection Y axis, (where you would like to move from, and where you would like to move to); and a duration period for the from and to Storyboard’s used to animate the front and back UIElements on the Y axis. There are also a couple of Flip properties, the Action needs to know about its container, the front and back Elements and also if the front control is visible on startup. The container is required so that we have a UIElement to apply the Plane Projection.

Using the 3D Flip Action is easy, simply create a Layout element like a Grid and then drop in your UIElements for the front and back, in my example I have used images. Once you have this Xaml created then select the Flip Action from the Behaviors tab and drop this onto the Layout element. As outlined earlier you can then tweak the animation and flip properties to provide the interaction that you want.

At the moment the Flip Action only works on the Y axis, but with some simple refactoring it should be straight forwards to support both the X and Z axis.

Behaviors, Actions and View Models in Silverlight

Richard.Griffin — Mon, 30 Mar 2009 10:38:06 GMT

Behaviors are new to Silverlight 3 and WPF.

The main reason we now have Behaviors in Silverlight was due to the lack of support in Silverlight of triggers. Triggers in WPF are incredibly useful as they provide the ability to change the look and feel of UI Elements dynamically based on the state of the application directly in the Xaml. In fact they are so useful we have 2 types Data Triggers and UI Triggers. Data Triggers can be used to respond to changes in the data that the UI Elements are bound to. UI Triggers can be used to respond to UI level events.

My current view of Behaviors is that of Triggers on steroids, in that they are an evolution from what we know in WPF and matured into a more componentised mechanism allowing designers the ability to drag and drop behaviors onto elements with out the need to create them manually. There are some standard behaviors that have been posted around on various blogs which i strongly suggest taking a look at and check out Pete Blois’s session at Mix09. Now, designers will still need to chat to a developer in order to create custom behaviors, however this is worth the investment as there is an opportunity to create a behaviors control library that can be used by your applications. Not only can we easily provide consistent experiences within our Silverlight applications but also in WPF and Surface applications, libraries will need to be recompiled to work with the specified deployment targets.

So what are behaviors and how can they be used to help out when building applications ??

Behaviors in general are best thought of in a metaphorical view, lets clear this up with an example. When going to a friends party we generally behave differently in comparison to when we go to dinner party at our CEO’s house. When we drive a car our behavior is to fasten the seat belt. Therefore, behaviors can be thought of as something that is intrinsic to us in that its in our nature to behave in a certain way under particular environments, when our environment changes this will also have an affect on our behavior. If we take this analogy and apply it to a UI Element in our application it makes thinking about what should be classified as a behavior. For example, if we want a UI Element that can be dragged around the screen we would provide the UI Element with the drag behavior, if we want to provide deep zoom capabilities to our application we would provide the Multi Scale Image with the deep zoom behavior.

What is slightly confusing at first is that we have 2 types of behaviors, behaviors and actions. When sub classing a behavior its my current belief that we are suggesting that this behavior is a UI behavior and an Action is performed in response to a state change. To prove this statement I have a couple of simple implementations that I wrote to test out this theory. At this stage you will need to download the code in order to follow the descriptions below.

Creating the behavior

First I started with the approach we have been using for a while, create your animation in Xaml using Blend then write some code behind to trigger the animation, if we were in WPF then we could use a Trigger in Xaml to do this but for the examples below I am targeting Silverlight. Fairly straight forwards apart from the fact we had to write some code behind, which is not great for the designer. I created 2 animations, Fade In and a Fade Out animation that can be applied to any Framework element. Now that we have these its time to create a behavior. The first task here is to ensure you have the right assembly referenced in your project Microsoft.Expression.Interactivity that provides the base classes that your behavior and actions will subclass. Once you have this in your project create a new class and derive it from Behavior<T>.

In my example I am using Behavior<FrameworkElement> and due to this I have added a local field which is also of the same type so that there is a reference wired up to the UI Element that we are attaching the behavior too. The behavior requires values to be setup so that the element in order to tweak the behavior to match our requirements this is done using dependency properties. In order to expose the properties in Blend add the Category attribute to you properties. The final step is to override the OnAttached and OnDetached methods. In my example I only override the OnAttached method and it in here where the Storyboard animations to FadeIn and Out the Framework Element live. Nothing to difficult about that. Now that we have created the behavior we need to attach it to the Framework Element we can do this in Blend very easily.

Open up the project in Blend and open up the asset library and there is a new tab called behaviors where there is a listing of available Behaviors and Action can be used in the project. To apply the FadeBehavior in our case to the image element, select the correct behavior and drag this onto the image element, this will wire up the behavior to the image. To change the granularity of the behavior Blend provides a UI in order to change the values which we provided.

Creating the action

In essence the process for building the action is identical to creating a behavior. The only change required is an obvious one which is the base class needs changing to TargetedTriggerAction<T>. Sweet… There are also a couple of other subtle changes. In the behavior I used a local variable to hold an instance of the element which the behavior was being applied to, this was done using a rather helpful method in the base class called AssociatedObject. The method is not provide by this particular Trigger class, an additional Dependency Property has been added in order for the action to know what it has been applied to. The other change is that although there are OnDetached and OnAttached method overrides in this example I chose to override the Invoke method.

To apply the action follow the same steps but select the required action this time round and associate the action with a button. Here we want to trigger the Fade Action in response to a users interaction, in this case clicking on a button. Here is where the metaphoric use of behaviors and actions differ, the fading of the image in this case is required when a user interacts with a UI Element on screen, in the behavior scenario we wanted the fading to be intrinsic to the control.

Creating a View Model action

In the previous examples the we used the behavior pattern specifically in the Xaml. I wanted to try out what the code would look like when data binding a custom action to a property on the View Model. The idea came from previous projects where I would require a loading animation to fire up while the View Model went and got the required data from the data service. Once the data has started to come back the animation would fade out and the control displayed with data ready for the user. These animations were controlled using a Dependency Property declared in the User Control and then data bound to a property on the View Model, each View Model implements INotifyPropertyChanged. This seems like a prime candidate for a reusable action that the developer can write once and then allow the designer to apply in Blend. This method reminds me of those collections of extension methods or type converters that we build during the implementation of a UI, I am sure that the same approach can be used with behaviors. For this example I created a Visibility behavior which was then data bound to a property on the View Model called CurrentVisibility. Unfortunately this is where I found a couple of problems, I wanted to data bind the behaviors in the Xaml.

<Image x:Name="image_Copy1"
               Source="01.jpg"
               Stretch="Uniform"
               Height="Auto"
               Width="Auto"
               d:LayoutOverrides="Width, Height"
               Grid.Column="2">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Loaded">
                    <SilverlightApp_Behaviours:VisibilityBehavior CurrentVisibilityBehavior="{Binding Path=CurrentVisibility}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Image>

This was giving me runtime errors so i tried to do the data binding from the code behind like so.

this.AssociatedObject.SetBinding(UIElement.VisibilityProperty, new Binding("CurrentVisibility") { Mode = BindingMode.TwoWay });

But this did not seem to work out either. In the end i wired the behavior to the View Model’s property changed event handler and sniffed out the CurrentVisibility property, which is not all too nice. The data context of the behavior is right so there must be a reason for the binding not to work which I am yet to discover. However, the ability for the developer to create behaviors that can extend the View Model in such away that the designer now has the ability to apply these using Blend is a very powerful mechanism.

Behaviors are a powerful addition to Silverlight. What I have found to be most poignant is that I no longer have a reliance on Commands and the command binding pattern that I have been using in WPF and Silverlight. In the previous sample I would have used Commands to force separation between View and View Model in order for me to write code in the View Model which responded to a user interaction that would have required doing some processing on a data set. Now with behaviors data binding can be used. Personally I like Commands and they have served me extremely well in the past, however I do like the behavior metaphor as this makes the problem easier to visualise when talking about behaviors of the visual elements rather than using the Command terminology.

Designer Developer Workflow – The art of collaboration using Xaml PART III

Richard.Griffin — Mon, 26 Jan 2009 20:16:00 GMT

Last week Microsoft published the January issue of the Expression Newsletter. If you have not seen the newsletter its a great series of articles focused on using Silverlight and the Expression tools to create amazing rich interactive solutions. In this latest issue I talk about carving up the User Interface from the different prospectives of the individual roles involved in the workflow and also introduce the role of the Integrator. If you are designing and developing with Xaml sign up to the newsletter at http://www.microsoft.com/expression/news-press/newsletter/

Part I – Passive View, View Models and Silverlight Architectural best practices
Part II – A designers prospective on using Expression Blend
Part III – Carving up the UI

Felix and I have also setup a project on CodePlex called Del.icio.us Silverlight where you can download the source code and hopefully join us on our journey building an innovative browser for Del.icio.us.

Silverlight themes 101 - Resource Dictionary Visual Studio Item Template

Richard.Griffin — Wed, 05 Nov 2008 11:24:00 GMT

Thought that i would share this simple item template that I created for Silverlight. In a previous post about Silverlight themes I was getting a little frustrated that there is no Item template in VS for Silverlight Resource Dictionaries. So I created my own.

Download the zip file and stash it in your \Visual Studio 2008\Templates\ItemTemplates directory. Unfortunately you still have to change the build properties on the Resource Dictionary from Page to Content or Resource depending on your intentions; Content for Xaml; and Resource for codebehind. If you know how to change this so that the Build properties can be set automatically, then please let me know. You can pick up the item template from my skydrive.

Silverlight Themes 101

Richard.Griffin — Tue, 04 Nov 2008 14:41:00 GMT

With the recent public release of the Silverlight Toolkit one of the interesting features has to be the Theming. There has been a number of cool posts about theming and Jonas has a great post about how to leverage existing themes that have already be designed.

Theming in WPF is a great feature and something that was rather disappointingly not part or the Beta 2 Release, Nikhil came up with a good work around, however it was still rather developer focused in its implementation and not too designer friendly. My current project requires the ability for the controls to be themed for different implementations on startup and also the ability of a generic skin to be applied if certain parameters have been supplied. The new Themes provides all the functionality that I required to achieve the expectations of the client. However, it was not as simple as I had hoped. Once you know about a couple of little quirks then it all falls into place, so I thought that I would put together a simple project that highlights the gotchas and includes the 3 different ways of leveraging theming in your Silverlight application.

Before we dive in a little bit of background information on the project. The sample application is a Social Bookmarking control that has become common place on web pages and blogs. My goal is to have a large social bookmarking theme and a small social bookmarking theme that can be applied to the control. The requirement has come from the designer who has already built the 2 styles and templates for the social bookmarking control and needs them wired up. The Social bookmark control is a lookless control, in that it derives from Control and has declared TemplateParts for the UI elements that it needs in its tree. It also lives in its own project called Controls. The MyThemes project uses the Social bookmarker control and is where the themes will be declared. The final project is a web project to host the MyThemes Xap.

The first task is to remove all the x:Key properties from the App.xaml file, but only for the control that uses the style, the other styles that are referenced by the control templates in the App.xaml can stay as they are.

The next task is to create a new folder in the MyThemes project and to hold our custom themes, in this case I created 2 Silverlight User Controls called Large and Small. Remove the code behind for the User Controls as we won’t be needing them. Open up the Xaml and remove all the code, as we need to use ResourceDictionary for our themes. The final part here is to change the properties on the Large and Small Xaml files to be of type Content. It would be great to see a Silverlight Resource Dictionary template in VS which would do these manual steps. The file properties caused me the most trouble in this whole process which I will pick up later on in the post.

Move over to the App.Xaml and locate the style for the large social bookmarker control and cut and paste this into the large theme Xaml file we created in the previous step, do the same for the small. You will almost certainly have to fix references to assemblies so go and track them down and fix them up.

Taking a quick look back we have created our new themes for the application and reused the styles that were in our original App.xaml file that the designer built. Our next step is to wire up the Social bookmarker control to the themes. Now this is important, as we have set the properties on our theme files to be Content we have to load the themes up using Xaml in a declarative manner. So head over to MyTheme project and add a reference to the Theming assembly then open up Page.xaml so that we can wire up the control to the right theme. The Implicit Style Manager provides all the goo that we need for associating the control to the theme and we do this by calling the Resource Dictionary Uri and the ApplyMode dependency properties.

In my sample you can see that I am applying the Small theme to the control. Ok so we are done not too tricky hit F5 and make sure that you can see the control. My own experiences here is that the error messages that you get back are not particularly helpful, most of the time it will say that the Xaml line where you declared your Implicit Style Manager is broken, what it actually means to say is that you have a problem with the Xaml declared within the file you are referencing. Now this could be the case but it also could be that you have not changed the file to have the correct build properties. What I found out here is that if you are going down the declarative Xaml approach the file properties need to be set too Content, if you are going to load up the themes from code then you need to change the build properties of the file to a resource.

So let go ahead and add a button so that we hit the button and load up the Social bookmarker control with the large theme. In order to do this we need to write some code in the Page.xaml.cs file and more importantly we have to change the build properties on the LargeTheme Resource dictionary as we plan on applying the theme using code. So first go and change the build properties on the LargeTheme.xaml file to be Resources. Now jump back to the code behind for the Page.xaml.cs and here we need to wire up the theme to the Social bookmarker control. There are a couple of steps that we need to do here; Remove the control from the visual tree; new up another Social bookmarker and add this back into the tree; finally we need to tell the Implicit Style Manager which theme we want and then apply the theme to the Social bookmarker control.

Hit F5 and you will now be able to view the Control with the Small theme applied and then hit the button and the Social bookmarker control will change the theme and load up with the large theme applied. Cool.

The final part of the puzzle is to create a new Silverlight Class library to hold a compiled version of the themes, this is another option for how to use theming. Once you have created the project remove all the generated .cs files and copy over the Large theme from the previous project. Double check to make sure that the file still has the resource build properties selected and then build the project. We can now jump back to the Page.xaml.cs file and change the URI to point to our new baked in theme. Sweet hit F5.

So there are 3 different ways in which to use the new theming in your Silverlight application depending on what your needs are and how far you want to go with decoupling your themes from you main Silverlight application and controls library. You can grab the source from my skydrive.

tech-ed Barcelona 2008 Presentation overview

Richard.Griffin — Mon, 03 Nov 2008 17:41:00 GMT

So the count down begins for the kick off to tech-ed Barcelona 2008 and my third time at the event presenting so really excited about next week. Tech-ed is always one of the better organised events that I go to and the country drinks are always fun to meet new geeks. This year I am co-presenting with my partners in crime Felix Corke and Ian “WPF Jedi” Griffiths. After the great feedback Felix and I have had with the Mix Essentials speaker tour we did this year we have decided to refactor our “Beauty and the Geeks” talk so that rather than talk about the way in which we work we are going to show you live on stage by building a sample application. I will also be hanging out on the Silverlight and Live Services ATE stand during the week if you want to ask questions then this is a great place to whiteboard some problems.

So if you are attending and you would like to know more about Developer-Designer Workflow when using Blend and Visual Studio please come and check out our session. If you want to hook up for a beer or three drop me an email. I will be twittering throughout the event so you can follow my updates at http://twitter.com/RichGee

WUX310
Beauty and the Geeks: Developer-Designer Workflow
November 13 13:30 - 14:45
Room 114

Developer - designer workflow is one of the hottest topics talked and blogged about this year in the RIA space. If you are building or thinking about building RIA applications using Silverlight then this session is for you. Come and interact with a real life team that consists of a Designer, Integrator and Developer as they implement a Silverlight solution live on stage leveraging tools such as Adobe Photoshop and Illustrator, Expression Blend and Visual Studio using a workflow that allows them to build applications effectively in an agile environment. The session aims to provide a deeper insight into the building of RIA applications using not only Microsoft technologies but also the tools that designers have been using for the last 10 years

Del.icio.us Silverlight Library, Tag Clouds and Dependency Injection

Richard.Griffin — Thu, 07 Aug 2008 16:00:00 GMT

Last year I built a couple of WPF tag cloud applications that hooked up to my del.icio.us account and displayed the data using different visualisations which included a tag cloud in a variety of different flavours and I also used the Time Line Panel from the blendables control suite from Identity Mine. To access del.icio.us I used a .net library up on Source Forge originally developed for use in the del.icio.us Winforms client called Netlicious which was originally written for .net 2.0 by Nate Zobrist. After playing with Wordle I revisited the WPF applications and start to wonder how I build a similar application in Silverlight.

The first challenge was to rebuild the del.icio.us library to provide a mechanism that would allow the Silverlight client to retrieve content from my account. It would be cool to see a LINQ to del.icio.us library at some point. After looking through the existing library I decided that to rewrite the library and take advantage of the 3.5 goodness which has been added since the 2.0 release. I also wanted to change the architecture slightly so that the library used Interfaces and roll in Ninject at the same time. Ninject is a very cool DI library from Nate Kohari which does exactly what it says on the tin with not a sniff of Xml configuration insight. Using the Netlicious as a reference point I rebuilt the library rather quickly, there are still some modifications to make, more unit tests to write and also the mocks to finish off but all the pieces are in place ready to be completed.

With the library now in place I started to build the Silverlight Client, when you use Ninject or unity in your Silverlight application you will start to create a Presenter View style pattern that takes advantage of a service locator class in your client and the results are all very impressive, Jonas has a great example and talks more about using Silverlight and Ninject here. The main advantage of this approach is the pure separation of concerns from the Xaml Views, all the work is done in the View Model classes which can be isolated and tested easily using the Silverlight Testing templates. Jeff Wilcox is the chap with his finger on the pulse so if your interested or want the latest templates head over to his blog.

After creating the views, view models and required bits for Ninject to work, I rolled in Dev Dave's Animated Wrap Panel to allow for a tag cloud look and feel to the application. In the original WPF applications I used a Converter to change the size of the font however this changed when I rolled in the Animated Wrap Panel, the converter is still part of the project just in case you want to try it out. With the Animated Wrap Panel in all that was left to do was create the web site and a WCF service call to deal the cross domain calls and also to provide credentials so that we can access the account on del.icio.us.

Future enhancements that I have in mind include; a richer client that takes advantage of Silverlight's persistence storage; adding the ability to search tags and posts; creating a Posts control so that the user can select a tag and view related posts; and also adding support for Bundles in the client. You can get the current drop of the del.icio.us Silverlight library and the current Silverlight application from my SkyDrive. If you are interested in helping out with building the del.icio.us client or you have some cool design ideas for the client please add a comment or drop me an email.

Wordle - text clouds

Richard.Griffin — Wed, 30 Jul 2008 08:35:00 GMT

If you have not been over to Wordle then it's definitely worth checking out. Personally I really like the tag cloud metaphor as the information that I am looking for seems to be more obvious than scrolling through a long list of information, it's especially handy when you want to quickly find some data without using search. Steve Poole creator of Wordle has built the application using Java and provides possibly the easiest way of creating text clouds I have found to date. You can either point Wordle at a blog or you can point it at a user on del.icio.us once you have selected the end point that you want Wordle to data visualise your a click away from creating your first text cloud. There is also a configuration area where you can change fonts and colours, you can also change the layout of the text as well.

My first Wordle I created was from my blog and its fair to say that there are some rather geek speak words, that I use when blogging. My more recent posts have all been around controls in Silverlight and the words such as control and template and heavily referenced when talking around these topics. So that was nice and simple to create and the results are cool. What I thought would be interesting is how this text cloud compares to the text cloud that represents what bookmarks and tags that I use on my del.icio.us account.

The results were interesting as the words that I have chosen for my tags are representative of the subject titles that encapsulate the technology areas that I write about on my blog.

I also tried out the Conchango blogs site and its corresponding del.icio.us tags which produced very similar results. All the Wordle links are posted at the bottom of the post if you want to view them or you can create your own in seconds.

Silverlight Tweening Adventures with Baby Smash!

Richard.Griffin — Wed, 23 Jul 2008 14:32:00 GMT

Before starting out on my tweening adventures I have to admit too being complete tweening newbie. On previous WPF and Silverlight projects animations were rolled from scratch to provide the desired responses to changes in the applications state. With regards to Designer and Developer workflow this stage of the process is usually where the 2 worlds collide. The developer adding animations in code behind hand cranking; Storyboards and animations; and dealing with event handlers. The designer is using Blend to create Timeline animations declared in Xaml. The other point to note is that Developers can't do animations, we may be able to code the equations and provide the necessary hooks for when event that happen when an animation finishes, but essentially the designer will have the last say in the matter with regards to the aesthetics of the animation created. My own experience is that we start with good intentions by putting all the animations in Xaml but this can become a little tricky when you have to deal with different states and trigger different animations. So this is when I fall back to putting all my animations together in a Resource Dictionary; and handling the state changes in code which fire the animations that the designer has created. The other problem that i have come across is when you have dynamic data data bound to an Items Control and you need to animate the different items based on their position in the Control, this simply can't all be done in Xaml and is a combination of Storyboards declared in Xaml and code behind to trigger the animations. In general animations can cause problems and I was also frustrated that these animations having to be hand rolled from scratch, this was evident when Felix asked if I would write some Silverlight animation code for him recently and while I was doing this all the memories of working with WPF and animations came flooding to mind at which point I thought that there must be a better way. I vaguely remembered reading an article on Silverlight Cream from Koen over at first floor solutions and further back a post from Adam Kinney. If like me you are new to Tweening this is a great place to start and is where my journey really begins. After reading the blog posts and looking over the other Tweening libraries from Cristian all of which are based on Robert Penner equations I was feeling confident that I could use this code and start to tackle my first problem. Animating Baby Smash! shapes.

After helping Scott with some other parts of Baby Smash! we started talking about how to animate the different shapes that Felix had created. We discussed the above and based on the outcome I decided to use tweening rather than hand cranking the animations from scratch, but I wanted to do something that would not only work in Silverlight but also in WPF, this is where Koens' Library solved my problem. I download his simple Silverlight application which shows off some of the basic features available in the Tweening Library and put in some additional tweaks to the UI allowing for more control over the different Transfroms which we can use in Xaml. We have a bunch of different transforms available in Silverlight, which include; RenderTransform; ScaleTransform; RotateTransform; and SkewTransform. Not only did I want to be able to play with tweens for each Transform type I also wanted to allow users to change the values for their selected transform, for example the Scale Transform supports Scaling on the X and Y axis so there are sliders which can be used to change the values from and to which the tween will use to animate the Scale tween selected.

Scott is building Baby Smash! mainly using code behind, and I can understand the attraction of heading for the code behind as this is what we feel comfortable cranking. From personal experience when building WPF applications burying goo in the code behind is not always that best thing especially when you are building interactions for the user. These interactions will have an impact on the designer and if they are not in the Xaml then they can't help that easily, but also they are more willing to change Xaml than code behind. Keon solution fits well, it allows me to add the animations in Xaml and event handlers in the code behind, allowing the designer to tweak the animations to produce the desired effect.

So now we have away to play around with the different tweens and how they effect the various Transforms, we can also hit the Xaml button and get the Xaml required to recreate the Storyboard. The next job is to get everything working in WPF. I created a new WPF assembly and stuck Keons' library in. Next up add a reference from Baby Smash! project to the tweener project. Find the User Control shape that I want to change and add this code into the Resources collection of the Grid we also need to add the RenderTransformOrigin and set the value. Finally I needed to add the Render, Rotate, Scale and Skew transform to the Transform group collection of the grid. Hit F5 and i get to see my shape and the tween animation that I created in the Silverlight app.

There are a couple of problems with my approach; first is that we are duplicating the tweening code in all the User Controls; and second problem is randomness, if I want to keep the equation applied to the shape but randomly change the from and to values this is currently not possible. I style may help here as Styles support animations, however I am referencing UI Elements that are in the Grid and this could cause some issues with regards to Scoping. My other choice is to add the animations into another Xaml file and use a Resource Dictionary. Keons' Library is best used inside a Control Template, however the Baby Smash! shapes are User Controls which contain a layout grid that hosts other UI Elements unfortunately these controls do not inherit from Control and thus I am unable to use the Control Template. As I could not make a decision I thought that I would attempt both the Style route and the Resource dictionary. I created an empty style for the layout root grid and moved the tweening Xaml into here, and that is about as far as it went, I got an exception at runtime complaining that it could not find the target. This is the scoping issue that mentioned earlier as the UI Element that we want to target is out of scope. So next up is the Resource Dictionary. I created the Resource Dictionary in Blend and moved the tweening Storyboard into the Resource Dictionary, final part in Xaml is to just add in a reference from within the User Controls Resources collection to the new Resource Dictionary. Using this mechanism means that I have to trigger the tween for each shape from code behind, but its only a couple of lines. In Baby Smash! the figure generator is where most of the action takes place so in there I added some code to kick off the animation for shape. I have now replaced the duplicate code with a single Storyboard that we have in the Resource Dictionary, cool, but what about Random changing of the tweening easing functions and input values ? To implement this part I iterate over all the Children which in this case are DoubleAnimationUsingKeyFrames and call on of the Utility methods in Baby Smash! to get two random numbers generated. To change the other values we can simply add the other static method calls to change the inputs on the tween. So I guess the next question really is "What would it have taken to do it all in code behind ?? " You can see that if we go with all the animation tweening in code behind then it looks like this, yeah that's all it takes to get the animation working. By creating the Storyboards in code behind we loose the Verbose qualities of Xaml but we also loose the designer. My current thoughts are that if you have a number of UI Elements that you want to animate and these animations are pre baked by the Designer, go for the Xaml route. However, if you are looking for a solution to either dynamic items in an Items Control or you are looking to do something which is similar to Baby Smash! go with the code behind.

While I was building this code Dev Dave and Scorbs put together the FlickrViewr using the Animating Wrap Panel and Robbie updated his site and also posted a great post on animating panels. So the next job is to take Dev Daves' AWP and change his interpolations with Penners' Equations. I have got pretty far with this but I have a performance tweak that I would like to make before posting the source. What I am hoping to build is a versatile AWP where you can easily say in Xaml what tweening easing equation you want to use along with the inputs. You can download all the source from my SkyDrive or you can load up the URL and have a play with the app here.

Silverlight Nuggets

Richard.Griffin — Tue, 15 Jul 2008 08:53:00 GMT

If like me you are following the Silverlight trail, you are more than likely to be reading Silverlight Cream and the Silverlight Show and their daily posts which provide a great way to stay on top of the daily Silverlight news. Not only do I subscribe to this sites via RSS but also their twitter feeds which I take advantage of as my RSS reader tends to get a little swamped with unread posts. I have yet to reach this stage with Twitter I am sure the time will come but for the moment the new entries appear in twhirl and its a joy to go and instantly have a read of the news. Recently, I have been posting about styles and control templates in Silverlight 2 Beta 2 and posting up the code for other people to take a look and comment on. Over the weekend Rajeev from Silverlight Nuggets contacted me asking if I would be interested in posting my source up onto the site, which I gladly agreed too.

Silverlight Nuggets is a great site built using Silverlight which hosts working demos of Silverlight controls and styles that you can find on the Internet. There is a complete listing of the controls that you can dig into with a brief overview of what each UI control does. Once you have found the control that you would like grok there are a range of different community built styles that have been built. You can select the individual styles and view live what they look like and more importantly interact with the controls. All this is great but Silverlight nuggets also pull apart the Visual tree for the styles and control templates use d in the sample so that you can get an in-depth view of the UI controls used to create the visual metaphor. Awesome..

If you are building styles and control templates in Silverlight 2 Beta 2, Silverlight Nuggets is a great place to share you code.

Skinning Controls in Silverlight 2 Beta 2 - Introducing the TabControl, TabPanel and TabItem

Richard.Griffin — Wed, 09 Jul 2008 17:09:00 GMT

With the new release of Silverlight 2 Beta 2 came a new drop of controls that allow the designer and developer to build tabbed content that we have become used to, the TabControl, TabPanel and TabItem don't reside in the standard Silverlight Controls assembly but live in the System.Windows.Controls.Extended assembly. After reading Tim Heuer's post about the TabControl and not having used the controls before I thought that it was about time I got to know these new controls.

To create a simple TabControl you can drag the TabControl from the toolbar in Blend and drop it on to your canvas and resize the control to your requirements, next select the TabItem control, making sure your TabControl is selected double click the TabItem on the toolbar and you can add in as many Tabs as you require, nice and easy. This is the simplest tabbed control you can build. But what happens if you want to change the style and template of the control to come in line with your applications skin ?? In a previous post I covered skinning a ListBox Control and its visual elements, in this post I will attempt to cover the tabbed controls that are available in Beta 2.

When we want a higher level of control of the TabControl and its items we need to create our own custom Style and Control Template for the TabControl and TabItem's. In Blend select your TabControl and from the Object menu option select edit style and select the create empty sub menu option, I called mine MyTabControlStyle, we then get to see our new style which is rather plain as it is empty, so lets move on and edit the UI elements of the TabControl template. Select the style in the object tab and right click and edit the control parts template, and select the Edit a copy option, I called mine MyTabControlTemplate calling the style and the associated control template is the standard naming convention that I use so that it it easy to keep track of what templates belong to what styles and vice versa. Now if you check out your TabControl you will find that what once looked like a TabControl now looks nothing like a TabControl, the reason behind this is because we have just changed the style of the control and its template both of which are empty. What need to do is workout what the UI elements we want to use so that we can create the required design. The first UI Element that we need to add is a grid to hold all the other UI Elements. Once we add the grid into the control we then also get the different common states that are supported by the control template. In this case the Common States are Normal and Disabled. Next UI control too add into the control template is the TabPanel control. The TabPanel control provides a container where the TabItem's will live, therefore the TabPanel plays host to our TabItem's. Next up is our Border UI element for the control. Next and most importantly is the ContentControl for the content that will be displayed by each TabItem added into the TabControl.

When you add the ContentControl to the control template it will automatically create the template bindings for you. You can change these settings in Blend when you have the ContentControl selected you will see that there are yellow squares next to the group that is bound. When you select the square you will get a popup where and at the bottom is a template binding option with a bunch of submenu options that you can choose based on what you want to bind up to. The TabPanel part of the control template can be used to change the size of the TabItems that are hosted inside so that you can easily change the height and placement of the TabPanel and this layout will effect the TabItems hosted inside.

The next step is to move on to the TabItem, follow the same steps again by creating a style and then the template. Once you have you empty control template ready its time to add the UI elements that we want to the template. First off add a Grid to host all the other visual elements we are going to add. Next add in a border for the outer part of the TabItem. Inside the outer border add a second border which we animate when the user mouse's over the TabItem. To this border we need to a grid that will host a rectangle for the selected background when the TabItem is selected we also need to add a Content Control that will host the Header content of the TabItem. Now we have the basic structure in place for the TabItem we can start to customise the tab and create the design required.

There is a gotcha here which caused me some pain for a while. The TabItem design that I wanted to build was a tab which has rounded corners and positioned slightly above the content rendered in the TabControl Content area very similar to the TabItem controls in Blend. After a number of attempts at building the TabItem control template I could not get the design that I wanted as the background of the control would not rendered correctly after it had been selected. So even though the UI element rendered correctly when the page loaded once you had selected the TabItem and selected another TabItem in the TabPanel the Look and Feel changed as the background had changed to the background of the TabItem's root element. This was very unexpected behaviour as you can see the TabBorder lives within a Grid and something somewhere was changing the background colour of the grid to be the background colour of the TabItem. What the problem turns out to be is the naming of the controls in the Control Template. I had named each of the Visual Elements the same as the default TabItem Control Template, based on the help that I found in the docs. It turns out that there is some code in Silverlight that deals with the TabItem which uses margins to move the TabItem and in here the code looks for the default names of the UI elements to perform these interactions. Therefore by changing the names of the UI elements this solved all my problems.

When building the TabItem you will want to set the UI elements width and height to Auto, however this is not great when your are trying to get the look and feel that you want for your TabItem, personally I make the control larger until I have a layout that is close to the design, then reset everything back to auto before building the solution. Once you have all the elements in place and the layout you want then next it's time to add in the interaction animations for the different states of the control. The TabItem has a number of different states that we can wire up to. The first state I am going to wire up to is the MouseOver. In Blend select the MouseOver State from the state tab and select the TabItemInnerBorder UI element, and change this to the colour of your choice. Then repeat the same steps for the other visual states that you want to change. I went for a different coloured background for each different state, to give hints to the user the image on the right screen shot of the final design where the first tab is in a selected state, second tab has a MouseOver state and the third tab is in a normal state.

You can download the styles and templates from my skydrive folder.

Skinning Controls in Silverlight 2 Beta 2

Richard.Griffin — Tue, 24 Jun 2008 12:22:28 GMT

With the new release of Beta 2 and Blend skinning of Silverlight controls has improved dramatically. Rather than hand cranking these due to no support at all in the previous version of Blend, you can now change templates and styles from within Blend rather than cranking the Xaml yourself. Not that I don't like cranking Xaml by hand but better tool support means that you are more productive and it also becomes more accessible to designers who are not interested in cranking pages of Xaml.

Recently I have been upgrading some of the work we have been doing in Beta 1 to Beta 2 and this time round I am concentrating on skinning and templating of controls. I will post soon about my experiences in doing this but in the meantime Corrina Barber is updating her skins for Beta 2 which is where I am sourcing my information. Tim Heuer has a great post on skinning controls in Beta 2, in the Tim's post he illustrates how we can edit templates of a Scroll Bar and then start to change the composite parts that make up the Scroll Bar. In this post I want to take Tim's example a little further and illustrate a couple of areas that are worth noting when skinning controls.

So once you have decided to change the template of the Scroll Bar you may want to go back and make some further tweaks, the way in which you can do this is by selecting the Resources tab and selecting your style for the Scroll Bar, in this instance I have called mine TestScrollBarStyle (not very elaborate I know). Also listed in the Resources tab you will see all you other styles and templates that you have created specific to your application. By putting your resources into the App.xaml file this helps leverage the separation of concerns between the designer and the developer, allowing the developer to work on other controls and code behind, and freeing the designer to create skins for the controls that have a global effect on the UI elements used in the application. Once you have found the style or template that you want to edit we need to select this and start to work on tweaking the design. We edit these by double clicking on the icon at the far right hand side which will then display the Scroll Bar, which looks just like the standard Scroll Bar. You may now have noticed that as we are editing the style of Scroll Bar there are no other controls listed in the objects tab. So how do you edit the style ?? What we need to do here is ensure that the Style is selected and then right click on the selected style, then select the Edit Control Parts option and under this option select the Edit Template option. You will now see all the composite UI Control templates that are used to create a Scroll Bar. Also notice that we have moved from the editing a Style to editing a Template.

We now have the option of editing the templates to change the look and feel of the Scroll Bar. Lets follow Tim's example and change the skin of the Thumb template. Select the Horizontal Thumb template from the objects tab and edit the controls template. Blend now shows you all the UI Elements that make up the Thumb template, including animations and colours used on the UI elements required to deliver the behaviours of a Scroll Bar. So while we are here we can change the UI elements that we want for the Scroll Bar and change the animations and colours being used. We should now have a new visual design of the Scroll Bar, cool that was not too difficult for us to achieve.

What is happening in the Xaml ?? Well what we can see is that we have changed the Horizontal Thumb template that lives within our style for the Scroll Bar and when we view the ListBox that is using this particular style we can see our new visual design being used, however we are only seeing our new design on the template that we updated, more than likely this will be the Horizontal template. This is because we have only update the template for the Horizontal Thumb and we have not yet changed the Vertical Thumb. So we could, either copy and paste the contents of the Horizontal template into the Vertical template or we may want to have a completely different design for the Vertical Thumb. Personally I don't like either of those options, as a developer I like to read beautiful code and one of the tenants of beautiful code is based around DRY (Don't Repeat Yourself) and having 2 different skinned Scroll Bars I think would be confusing. So how do we resolve this issue ?? In our application we are likely to have many controls that derive from Items Control and we want a consistent look and feel to the Scroll Bar and in this particular case the Horizontal and Vertical Thumb.

The solution to the problem is to create a Style that we can apply to many different Thumb Templates. So how do we do this ??

In the previous steps we changed the template associated with the Thumb, what we actually want to do is change the style and to do this there is an option which is not all that intuitive to find. Select the Horizontal Thumb template and then move up onto the main menu options where you will see an option called Object, select this option and towards the bottom you will see called Edit Style, select this option and then select the Edit Style option from the sub menu listing. You will then be prompted to create a new Thumb Style. We now see our new style, to edit the style we need to change the template and we do this by selecting the style in the objects tab, right click and edit the template associated with the style. We now see the UI elements associated with the template that we can change to be the visual design we want.

Once you have modified the layout controls, colours and animations that you want we need to associate this new style with the Horizontal and Vertical Thumb control templates that we edited earlier in the Scroll Bar style. In the resources tab select your Scroll Bar style and edit the template so that we move down to the composite control templates that are used to create the Scroll Bar. Select the Horizontal Thumb template and right click, rather than selecting the edit template select the apply resource option, in the sub menu options will be the new Thumb style that we created previous select the resource and this will apply your new Thumb style to the Horizontal Thumb. Repeat the same steps to associate the Vertical Thumb Control template with your new style.

The final part is to ensure that you are no longer using the Horizontal Thumb control template but using your new style, so you may not see your new Thumb Style, we need to modify some Xaml to do this. The highlighted line below is what we need to change.

As we can see from the Xaml the Thumb has been wired up to the Style that we created, but it is also wired up to the template that we created earlier on. We need to remove the reference to the Template and let the style do its job. Once this is done we will then see our new Thumb.

We can do the same to all the other Templates that constitute the Scroll Bar style and reuse them across the application, allowing the design to build a consistent theme for the application in complete separation to the developer. If there is enough demand from readers then I would be happy to do a screen cast if this makes it easier.

Upgrading from Silverlight Beta 1 to Beta 2

Richard.Griffin — Fri, 13 Jun 2008 13:42:00 GMT

Felix and I have been presenting around Europe at the Remix Essentials events giving away a white labelled Silverlight mashup. Being on the Silverlight TAP I have been trying to keep the project up to date with the latest drops but fell behind. So while in Mexico on the Friday evening I thought that I would try and do a simple upgrade to Beta 2.

So for those of you out there that have not seen the presentation I have put the complete deck up on my public SkyDrive area so you can take a look at the deck. However, I will give you a little more background about the application. Felix and myself wanted to build a simple Silverlight mashup so that we could gain a better understanding of Beta 1 and how we could bend it. My other goals were to try out a simple testable pattern based on an MVP approach; and make the entire app a white labelled application so that people who have not done Silverlight before can easily change the endpoints and change the skin of the application so that they could get up to speed quickly with Silverlight. The idea was that this would be attractive to developers and designers so that it would act as a stepping stone to try out the technology and the workflow required to build an application.

So lets open the Beta 1 solution and see what happens. Visual Studio works out that my copy is using the older Beta 1 version and politely asks me if I wish to upgrade the solution to Beta 2. The solution loads up with all the correct bindings in place so I hit F5 and watch the output window for errors.

The only compilation issue was about the multi scale image control. Checking the documentation you will find a section on breaking changes for Deep Zoom and the multi scale image control.

and

After making these changes build the app. Green light cool.

Next its time to change the Deep Zoom Compositions which I created for Denmark and Austria, forgot my camera in Dublin and Mexico :-(

So open up the old files and simply make sure that the composition option and output as files options as selected, then hit the export. Once this was done copy over the goo and drop them into the ClientBin. To get a definitive list of new stuff check out the Expression team blog. Once that's done the final part is to update the code.

Beta 1

case Model.RemixEvents.Denmark:
{
this.DeepZoom.Source = new Uri(this.remixDenmarkSource);
break;
}

Beta 2

case Model.RemixEvents.Denmark:
{
     this.DeepZoom.Source =
   new DeepZoomImageTileSource(new System.Uri(this.remixDenmarkSource));
   break;
}

So far so good, no real pain to be had.

The mashup contains a simple User Control to wrap up all the functionality of a deep zoom view and the corresponding View Model that contains all the logic for the view, such as filtering of images and working out which image in the collection has been selected. Curious of the new Deep Zoom Composer and wanting to interact with the new UI and its features, I decided to create a dummy project and see what happens. I find that with new technology it best to start real simple and then layer on the complexity so I created a new simple project with 2 images and left all the defaults in place. View the collection using the in browser option and the collection appeared ready for action. Cool...

Then select the open in Blend option ready to create the filtering GUI to test out the filter as this code needs to change to come inline with the new metadata.xml file that the DZC auto gens for us.

Unfortunately, I was getting an error as the project file which opens is incorrect.

If you use the default values you will get something like DeepZoomOutput.sln that DZC has asked it to open. However, it should be DeepZoomProject.sln. Not a biggie but a little frustrating when you want the process to be a seamless one. Ok I thought open everything up in VS08 just in case there is a problem with the new version and VS will usually give you better debug information at Runtime. So I open the project with no errors and hit F5. I get a Xaml error in the browser.

My next stop is to right click on the html file and select the view in browser option, the Browser starts up and loads up my Silverlight goo with no errors. On closer inspection the clue is in the URL which is given to the browser hitting F5 it was :-

C:\Projects\ConchangoLabs\DeepZoomFilter\FitlerExample\Collection\ascollection\DeepZoomProject\Bin\Debug\TestPage.html

However if you right click and say view in browser it references the webdev server instance :-

http://localhost:56724/DeepZoomProjectWeb/ClientBin/DeepZoomProjectTestPage.html

The way around this is to make the web site your startup app and make the .html page your start page and say yes to debugging support for Silverlight and all is well again.

The video plays and the Deep Zoom Collections are loaded into the User Control and my interactions still work. However I am still not getting any data. Strange after checking all my bindings and everything is looking good. So debugging the page around the where I bind up my data and find that Silverlight is barfin' with an UnauthorizedAccessException, due to cross-threaded access. The threading model in Beta 2 has changed, and the Invalid cross-threading exception is due to the code trying to update the UI while still on the background thread. So we need to marshal back on to the UI thread and update the control with the new data from the response stream. After a bit more digging I found a couple of recent posts by Scorbs on WebClient and HttpWebRequest changes in Beta 2 here. So my next job is to change the way in which I update the UI from within the ModelView for that View. The original code looked like this.

In WPF we have something called the Dispatcher, which allows us to do a BeginInvoke and add the UI work we want to do into the queue for the UI thread to process depending on the priority that we sent, if you are not familiar then Dr WPF has a good article or check out msdn. However, the Silverlight Beta threading model is not the same and the call to the Dispatcher's Begin Invoke takes only a delegate, so you can't set the priority of the work put into the queue. But doing the BeginInvoke is only part of the story and you don't actually need to do it in this particular case, what is important is to use the SynchronizationContext and call its Post method which takes a delegate and an Object. Cool however, there is a little gotcha we need to look out for. Although you can call the Current property on the SynchronizationContext it is not guaranteed to return you the context of the UI thread, so SynchronizationContext.Current.Post(delegate, object) is not going to do the job. To get around this you need to grab the Context in the constructor of the main page. For example my start page looks like this.

Page.xaml.cs and in the constructor I am getting hold of the context and passing this into the constructor of my ViewModel, the ViewModel then will retain this reference so that all my other calls to add items to the UI queue will use this reference. It ends up looking like this.

The last bit of work to be done is to add the call to the BeginIvoke on the Dispatcher to update the UI now that we have a hold on the UI thread. Notice that as we are on the background thread it feels right to process all the data sent here rather than doing this work on the UI and blocking something that could be reducing the experience which the user is having.

That was quite a lot to get through so you may want to go and grok this code a little before you crank your own, however before you do read on.

Everything is building so I fire my app and sit back to wait and see my data in the control.... However nothing gets displayed. Strange... Well not really as there have been schema changes in Beta 2 the styles associated with my control nolonger work. So its time to jump into the Xaml and remove the associated styles from the ListBox. Build and run.... Whoa I see data in the ListBox.

After changing each of the ViewModel's to use the same pattern as above it's time to start changing the controls styles which I will attempt in the next post about upgrading from Silverlight Beta 1 to 2.

If you have come across any other gotcha's then I would like to hear about them.

Getting ready for Mix07

Richard.Griffin — Fri, 27 Apr 2007 08:33:00 GMT

Less than 24 hours to go and I will be on my way to Vegas for Mix07 . Last year Mix06 was a great success and after watching the channel 9 video "Mixin' it up with Beth and Ray" this year is going to be bigger and better. Unlike other Microsoft conferences...(read more)

Converting Dashboard Widgets to Sidebar Gadgets

Richard.Griffin — Tue, 20 Mar 2007 10:40:00 GMT

Jamie and I were chatting yesterday morning about Vista Sidebar Gadgets when he sent me a link to the Sidebar Gadget Development MSDN Forum where chemgirl had posted a new thread " Can someone make a gadget for us chemistry students ". I read the post...(read more)