Tag: WPF

I like to have my animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. It’s better to edit them separately.

The animations in Silverlight have to be started using Event Handlers in a Code Behind file in Silverlight instead of the Triggers used in WPF. The Triggers were able to connect to the target object for an animation. The Event Handlers won’t do that for you.

You’ll have to find the Animation Resource, assign it to a Storyboard object in the Code Behind file of your page and set the Target element for that Storyboard before starting the animation.

Michel Heijman helped me out with this. This is his solution:

Create a helper class that can find Resources for you (like in WPF). Save this in the root of your project and name it ResourceLocator.cs.

[sourcecode language=”C#”]
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace AnimationsAsApplicationResources
{
    public static class ResourceLocator
    {
        ///

        ///         ///
        public static object FindResource(string name)
        {
            if (App.Current.Resources.Contains(name))
            {
                return App.Current.Resources[name];
            }
            else
            {
                FrameworkElement root = App.Current.RootVisual as FrameworkElement;
                return root.FindName(name);
            }
        }
    }
}
[/sourcecode]

In the Code Behind of your page, add the following to access the Animation Resource, set the TargetName for it and to run the Animation:

[sourcecode language=”C#”]
        private void startStoryboard1(object sender, RoutedEventArgs e)
        {
            // find the storyboard with helper class:
            Storyboard Storyboard1Resource = ResourceLocator.FindResource(“Storyboard1” ) as Storyboard;
            if (Storyboard1Resource != null)
            {
                // Set target for storyboard:
                Storyboard.SetTarget(Storyboard1Resource, Rectangle1);
                // Begin storyboard:
                Storyboard1Resource.Begin();
            }
        }
[/sourcecode]

Don’t forget to place your animation in app.xaml now 🙂 No need to change the app.xaml.cs file for this…

Njoy!

I’ve been asked by a client if it was possible to make color versions of a design. I told him that that was actually very easy. And it is. It is just that you have to treat your colors a little different: you’ll have to create color palettes using Color Resources. Because that worked a little different in Silverlight 2 Beta 1 than in WPF I was on the wrong foot for a long time. Finally I worked it out and here it is:

There’s only one way to specify a Color in Silverlight:

[sourcecode language=”XML”]#FF800000[/sourcecode]

and this gets underlined in Visual Studio indicating that Color cannot have direct content (meaning the color code between the <Color> and </Color> tags). You’ll have to ignore that 🙂

All other ways to specify color won’t work in Silverlight:

[sourcecode language=”XML”]
  
       
       
       
       
       
[/sourcecode]

Note that at least the second and the fourth are valid in WPF. The third seems to go well in Blend, but gives an error in the browser and won’t show anything: the screen remains white.

Still, this allows you to create palettes of color. Here’s one with two colors:

[sourcecode language=”XML”]#FF800000[/sourcecode]
[sourcecode language=”XML”]#FFFF0000[/sourcecode]

You can use these in SolidColorBrushes and LinearGradienBrushes like these:

[sourcecode language=”XML”]
       
       
       

       
       
           
           
       
[/sourcecode]

Place all this in app.xaml between de <Application.Resources> tags and you’ll be ready to apply them in some normal XAML:

[sourcecode language=”XML”]
 
  
   
  
  
  
   
 
[/sourcecode]

What makes it easy to make color versions of a design is the fact that you can easily replace the two color codes in the Palette to change the look of the entire application! This would do the trick:

[sourcecode language=”XML”]
  #FF008000
  #FF00FF00
[/sourcecode]

Be aware of the use of a Color Resource (colBright) in a LinearGradientBrush, but a Brush Resource (brBright) when you use it for a Fill or a Stroke.

So with about 10 colors as resource in app.xaml, you can actually create a basis for skinning your application. It’s just that now I still have to replace all the separated colors in my project with StaticResources and that will take some time… So now it is easy, but it will take a while 🙂 If you remember to work like this from scratch, you’ll be fine when a client ask you if color versions are possible…

Njoy!