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

	xmlns:d="" xmlns:mc=""
	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"  />

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()

		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;

			double scrollPos = thumbs.ActualWidth;

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

Hey useful article. I am a newbie in Silverlight. Was looking for building a thumbnail collection with scroll.. This example helped me to develop ..


I really enyojed this brilliant blog. Please keep them coming. Greets!!!

Thanks, that is a very good article. I found it via Google and immediately incorporated into my feedreader. I am pleased to soon be back here to read again! greetings

Leave a comment