Mark Gilbert's Blog

Science and technology, served light and fluffy.

WPF Animations (Part 1 of 3)

I’ve looked back at my posts for the last year, and came to the startling (and rather embarrassing) realization that I haven’t had a truly technical, code-heavy post in 10 months.  Well, that hiatus has now officially come to an end.

I’ve spent the last 3 months working on a WPF Media Player, and I’ll be spending the next several posts illustrating how various pieces of it work.  I’ll start with the animations, move on to the use of LINQ to XML, and then touch on a few miscellaneous points.  The full source code for the initial release (v0.1) can be found on it’s own page off of my blog – WPF Media Player.

I’ve found three main ways for animations to exist in a WPF application.  These might sound rather arbitrary, but I think the differences are significant enough to warrant placing them into separate buckets (significant in how they might be used in a full-blown development shop with designers and developers working side by side, but that is a post for another time).

We’ll start with what I think is the simplest type – animations that are both defined and fired in XAML.  In the Media Player, mousing over an album causes the album on the shelf to fade out slightly.

MouseOut   MouseOver

The effect was intended to allow the user’s eye to be drawn to the jacket that pops up below. To achieve this, I added two basic things to the JewelCase UserControl class that is used to define each object on the shelf.  First, I needed to define the animation itself in the JewelCase.xaml:

<UserControl.Resources>

        <Storyboard x:Key=”DimSelected”>

            <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”MainImage” Storyboard.TargetProperty=”(FrameworkElement.Opacity)”>

                <SplineDoubleKeyFrame KeyTime=”00:00:00.2000000″ Value=”.3″/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

 

        <Storyboard x:Key=”UnDimSelected”>

            <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”MainImage” Storyboard.TargetProperty=”(FrameworkElement.Opacity)”>

                <SplineDoubleKeyFrame KeyTime=”00:00:00.2000000″ Value=”1″/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

</UserControl.Resources>

 

The “DimSelected” animation modifies the image Opacity, and changes it from 1 (fully visible) to 0.3 (mostly dimmed out) over two-tenths of a second.  The UnDimSelected changes the Opacity back to fully visible in two-tenths of a second.

Next, I needed to wire these animations up to the JewelCase itself.  I did this by adding a UserControl.Triggers section to JewelCase.xaml:

<UserControl.Triggers>

    <EventTrigger RoutedEvent=”Mouse.MouseEnter”>

        <BeginStoryboard Storyboard=”{StaticResource DimSelected}”/>

    </EventTrigger>

    <EventTrigger RoutedEvent=”Mouse.MouseLeave”>

        <BeginStoryboard Storyboard=”{StaticResource UnDimSelected}”/>

    </EventTrigger>

</UserControl.Triggers>

 

The DimSelected animation is run when the user mouses over the image, and the UnDimSelected is run when they mouse away.

A slightly more complex example can be found in Main.xaml.  There, I’m animating two “flyout” menus that contain the Play Controls (upper right corner), and the Play List management controls (lower right corner).

Play Controls   Play List Controls

In this case, the animations ExpandToFullSize and ShrinkToHide are defined once in the Window.Resources section, but then are applied to both DockPanel controls containing these two sets of controls.

The other interesting thing to notice is that the ExpandToFullSize and ShrinkToHide storyboards contain multiple animations that are timed to run one after the other.  The EventTriggers in this case still only contain a reference to a single storyboard (Mouse.MouseEnter fires ExpandToFullSize and Mouse.MouseLeave fires ShrinkToHide), but it’s not hard to imagine the triggers themselves firing multiple storyboards.

Next we’ll look at defining animations in XAML, but firing them from the code-behind.

Advertisements

March 1, 2008 - Posted by | WPF/Silverlight

5 Comments

  1. […] Left Brain, Right Brain, and Music WPF Animations (2 of 3) March 4, 2008 In my last post on WPF Animations, I covered the basics of defining and using an animation purely in the XAML markup.  Today […]

    Pingback by WPF Animations (2 of 3) « Meta Writing | March 4, 2008

  2. […] Animations (2 of 3) March 4, 2008 Posted by markegilbert in Uncategorized. trackback In my last post on WPF Animations, I covered the basics of defining and using an animation purely in the XAML markup.  Today […]

    Pingback by WPF Animations (2 of 3) « Mark Gilbert’s Blog | March 4, 2008

  3. […] in WPF/Silverlight. trackback In my previous two posts in this series, I’ve gone through defining and triggering animations in markup, and defining animations in markup but triggering them in code.  Now, we’ll look at […]

    Pingback by WPF Animations (3 of 3) « Mark Gilbert’s Blog | March 7, 2008

  4. […] made was on WPF animations, and seeing as I just did a series on those last month (WPF Animations Part 1, Part 2, and Part 3) I think it’s good to put the two side by side.  Brian made the […]

    Pingback by Brian Noyes / WPF Update on .NET Rocks « Mark Gilbert’s Blog | April 2, 2008

  5. Super-Duper site! I am loving it!! Will come back again – taking your feeds too now, Thanks.

    I’m Out! 🙂

    Comment by online stock trading advice | January 10, 2010


Sorry, the comment form is closed at this time.

%d bloggers like this: