Over the last number of posts I have looked at different kinds of animations available for use in a Silverlight Application.

Each of the previous examples used a type of animation where the values being changed are of the Double, or numerical, type.  Not all Silverlight elements attributes however have double type values but rather string literals such as "Left" or "Right".  Being string values you can’t use DoubleAnimations to change the attributes.  Instead you have use an ObjectAnimation.

For this example I am going to animate the Visibility attribute of a Silverlight element.

1.  Setting up the Project.

The project is going to be an extension of the project used for the post about DiscreteKeyframes.  What I want to do is place a Border, with a TextBlock, over where the images would show to show a brief description of the images for the person accessing the page to read while the images are loaded into the slideshow.  After a set amount of time the Visibility attribute of the border will be set to Collapsed so the user can see the show.

(Note:  Any animations other than the Object animation are outside the scope of this post and are not discussed.  If you want to learn about the other animations then you can refer to the post on DoubleAnimations using Keyframes or DiscreteKeyframes.)

The base project is housed in a 600x600 grid with a light gray background.

(Note:  The collapsed XAML is for the existing items in the project which is a carry over from the post on DiscreteKeyframes.)

2.  Adding the Border and TextBlock.

Since XAML is a declarative language the placement of the Border is important.  The border is to be shown on top of the images and progress indicator so it needs to be the last element declared in the base grid.

Inside the border a definition for a textblock is added to hold the slideshow description.

A few attributes need to be set for the border, the Name, RowSpan and set a colour for the Background so that the slideshow, and progress indicator is covered while the images load as well as making the text that will be in the textblock easier to read.

At this point if the project were to be run just the border would be visible.

Once the attributes and adding text to the textblock is completed the project will be ready to set up the animation.

Running the project at this point you can now see the description of the slideshow.

(Note:  Admittedly you would most likely put more of a description that I did, but it suits the purposes of this example.)

3.  Adding the Storyboard and Animation.

The XAML markup for the animation is going to be declared between the Resources tags of the usercontrol.

As you can see from the screen shot above, the storyboard has been given a Key, so it can be called later when we want the animation to run.

Between the tags for the storyboard an ObjectAnimationUsingKeyFrames is defined.  As part of the animation definition the TargetName and TargetProperty values are set.

Note:  Since this storyboard/animation is only controlling one element the TargetName and TargetProperty could have been set in the definition of the storyboard itself.  You would only have to set the two attributes as I have above if there are multiple animations, for multiple elements, in one storyboard.

A DiscreteObjectKeyFrames in added to the animation and a time is set for the attribute to change as well as a value for the attribute to change to.  In this instance the Visibility of the border is being set from visible to collapsed.

The keytime is set to 8 seconds which gives time for all the images to be downloaded from the server to the user’s computer ready for the slideshow to be viewed.  If you use this method then the time that you display a message may vary depending on the number of images being used in a slideshow.

It is worthy to note that object animation can only be done with keyframes and only the discrete type of keyframes can be used.

4.  Starting the Animation.

The storyboard is going to be started as soon as the page is opened in the browser, so there are a couple of places that you can inset the code to start the animations.  I am going to place the code in the Loaded event of the grid that is the base layout container.

The first step is to declare a variable that will hold the Storyboard then set the storyboard that was defined in the XMAL of the usercontrol as the value of the variable.

The next line of code calls the Begin method of the storyboard class.

Running the project you will see that the covering blurb is visible when the page opens and after 8 seconds the first image of the slideshow is displayed.

0 Seconds	8 Seconds