Welcome to EMC Consulting Blogs Sign in | Join | Help

Richard Griffin's Blog

  • Silverlight 3.0 - 3D Flip Action using Plane Projection

    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 2009-04-16_1719Projection 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

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

    Expression_Blend_Behavior0In 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 Expression_Blend_Behavior1Element we can do this in Blend very easily.

    Expression_Blend_BehaviorOpen 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

    Expression_Blend_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. Expression_Blend_Action2

    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

    Expression_Blend_Action3 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

    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/

    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

    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

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

    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 imageon 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 imagebe 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. image

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

    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

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

    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 wordle my bloglooking 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.wordle my delicious tags

    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!

    BabySmashScreenBefore 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 Tweening code Xamlnot 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. 

    FigureGeneratorThere 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 ?? "Tweeing code only 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

    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 Silverlightnuggetsdo 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 tabcontroland 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 viewing the visual tree of the controlsample 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.

Powered by Community Server (Personal Edition), by Telligent Systems