Silverlight Sample: Rotating Video Panel

Edit 2011-07-07: A wet floor effect has been added to the app. This includes a two-color background and an upside down reflection of the rotating video. You can check it out at the App Shop .

As an exercise in media handling and animation, I built a rotating video panel. This is not an original work, it is based on the rotating video panel by Sean Christman (CraftyMind), you can find it here (opens a new window or tab). Note that while rotating, texts are mirrored when we look at the rear site of the panel.

To me, it is of some relevance that when migrating someone else’s work to Silverlight, the stone is thrown a bit further. In this particular example the extra distance is small: the rotating panel scales with the size of the window if you change it.

Another nice feature, but that is typically Silverlight, is that you can install this panel on your pc as a small application, and run it offline also. Just right click the rotating panel, choose install from the menu, and follow the instructions. To uninstall it again, run the installed application, click it with your right mouse button, and choose uninstall.

An aspect that presents a nicety for me is that the Silverlight code is much shorter than the 145 lines of Html5 code that were required for the original work. The xaml below is all it takes to realize the rotating video panel, anything above “<Grid.Resources>” is generated code.

<UserControl x:Class="SpinningVideoPanel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="600">

    <Grid x:Name="LayoutRoot" Background="White" Margin="150,0,150,150" MinWidth="100" MinHeight="100">
        <Grid.Resources>
            <Storyboard x:Name="rotationStoryBoard1" RepeatBehavior="Forever"
                        Storyboard.TargetName="rotation1" Storyboard.TargetProperty="RotationY">
                <DoubleAnimation From="0" To="360" Duration="0:0:10"/>
            </Storyboard>
        </Grid.Resources>
        <Grid.CacheMode>
            <BitmapCache RenderAtScale="4" />
        </Grid.CacheMode>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="175*" />
            <RowDefinition Height="75*" />
        </Grid.RowDefinitions>
        <Grid.Projection>
            <PlaneProjection RotationY="360" x:Name="rotation1" />
        </Grid.Projection>
        <Border BorderThickness="5" BorderBrush="Salmon" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <TextBlock Name="textBlock1" Text="Watch the Video" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5" />
        </Border>
        <Border BorderThickness="1" BorderBrush="Black" Grid.Row="1">
            <MediaElement x:Name="mediaElement1" Source="Silverlight_540p20s.mp4" AutoPlay="True" Grid.Row="1"  Stretch="Fill" MediaEnded="mediaElement1_MediaEnded"/>
        </Border>
        <Rectangle Grid.Row="2" Name="rectangle2" Stroke="Black" StrokeThickness="1" VerticalAlignment="Bottom" Height="1" Margin="0,0,0,20">
            <Rectangle.Effect>
                <BlurEffect Radius="3"/>
            </Rectangle.Effect>
        </Rectangle>
    </Grid>
</UserControl>

The C# code below starts and repeats the video.

using System.Windows;
using System.Windows.Controls;

namespace SpinningVideoPanel
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.rotationStoryBoard1.Begin();
        }

        private void mediaElement1_MediaEnded(object sender, RoutedEventArgs e)
        {
            mediaElement1.Stop();
            mediaElement1.Play();
        }
    }
}

Configuration settings promote GPU utilization, in case a suitable graphics card is present in the client computer.

You can see the rotating video panel in action in my App Shop here.