Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3

Click on video to create thumbnails
The following example shows how to create thumbnails by using the WriteableBitmap class.

XAML code

<UserControl
	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"
	x:Class="ImageSnapshot.MainPage"
	Width="605" Height="610" mc:Ignorable="d" Background="Black">

	<StackPanel  Orientation="Vertical" HorizontalAlignment="Stretch" Margin="10">
		<MediaElement x:Name="myMediaElement" Source="/Movie.wmv" MouseLeftButtonDown="takeSnapShot" Height="416" d:LayoutOverrides="HorizontalMargin" Cursor="Hand"/>
		<ScrollViewer x:Name="scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Height="160" BorderBrush="{x:Null}" Margin="8,0">
			<StackPanel x:Name="thumbs" Orientation="Horizontal" Margin="0,5,0,10"  />
		</ScrollViewer>
	</StackPanel>
</UserControl>

C# code

using System;
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;
using System.Windows.Media.Imaging;

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

		private void takeSnapShot(object sender, MouseButtonEventArgs e)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}
	}
}