In this video I demonstrate the Transition Preview within Microsoft Expression Blend. This will save lots of time when creating states and not having to run the project.

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

XAML code

		<MediaElement x:Name="mp" Source="http://www.paulyanez.com/interactive/blog/HD/darkknight.wmv" DownloadProgressChanged="downloadProgressHandler" Margin="0,0,-1,-1" AutoPlay="True" IsMuted="{Binding IsChecked, ElementName=volumeControl, Mode=OneWay}" />

XAML code

<Image x:Name="img" Height="640" Width="426" Source="Image2.png" Stretch="Fill" Drop="OnDropEvent" AllowDrop="True"/>

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

namespace SilverlightApplication14
{
	public partial class IPhoneMain : UserControl
	{
		public IPhoneMain()
		{
			InitializeComponent();
		}

		private void OnDropEvent(object sender, DragEventArgs e)
		{
			FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

			foreach (FileInfo fileInfo in files)
			{
				FileStream fs = fileInfo.OpenRead();
				BitmapImage bi = new BitmapImage();
				bi.SetSource(fs);
				img.Source = bi;
				fs.Close();
			}
		}
	}
}

In the following video I will show how to Databind a progressbar’s width to the position of a video. The Databinding feature in Microsoft Expression Blend 3 allows this interaction without the need to write one of code.

You can view my article on Databinding here