Animated background control in WPF?

Question

In my WPF application, I want to have an ambient animated background similar to Media Center's background. Is there a free control that offers this?

Solution 1

I would prefer to animate the background of a border via storyboard. It's pretty easy and you can build a animation as complex as you like. Here is a short example:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard AutoReverse="True" BeginTime="0" >
                    <DoubleAnimation Storyboard.TargetName="Foo"
                                     Storyboard.TargetProperty="Offset"
                                     From="0.2" To="0.8" Duration="0:0:10"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Border>
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Yellow" Offset="0"/>
                    <GradientStop Color="Orange" Offset="0.2"  x:Name="Foo"/>
                    <GradientStop Color="Red" Offset="1"/>               
            </LinearGradientBrush>
        </Border.Background>
    <!-- put your windowcontent(grid etc.) here -->
    </Border>
</Window>

You should also see the MSDN article Animation Overview.

Solution 2

A way to animate the background is:

It is also possible to set the TargetProperty to "(Background).(SolidColorBrush.Color)" as in this example:

<ColorAnimation
    Storyboard.TargetName = "lblSubGroup" 
    Storyboard.TargetProperty = "(Background).(SolidColorBrush.Color)"
    From = "White"
    To = "Navy"
    Duration = "0:0:3"
    AutoReverse = "True"/>

Solution 3

You can use a Grid and put a video element in last z order, and let its width and height be auto and you can have a video played in it and put your container in front of it.

In Grid you can put objects in specified z order, you can create your custom animation control and let it run as first control added in grid.

Currently there is no Background property offering any animation, they can only load pictures.

Solution 4

I'd try and use vector animations if possible, playing a video (that has to automatically scale) is not optimal (in terms of processing, image scaling etc).

Using vector shapes/brushes (even 3D?) would be much better in my view.

View more solutions