Contents
I used a MediaElement some time ago in one my first WPF articles, and thought it may be time to re-visit it and make a simple video player control. That is what this article is all about really. There's nothing ground breaking here, as Josh Smith is the one to watch for amazing WPF tricks; he's crazy, man believe me, he know what's what in WPF. I am a mere underling, showing simpler subjects to beginners of WPF. So that's what we are going to do, build a simple media player control that will have the following features:
- Play videos
- Control media playback (pause / stop / play)
- Control media volume
- Control media position
- Scale media
- Rate each media item
So those were my basic ideas. What I will do is talk about each item in turn as the article progresses.
OK, first of all, I will just mention what files are involved; these are as follows:
- Resources/Styles.xaml: All the WPF
Styles
- Resources/Templates.xaml: All the WPF
Templates
- Utility Classes/GridLengthAnimation.cs: GridLength animator, by Christian Graus, Nishant Sivakumar, available here
- Utility Classes/MediaItem.cs: A simple media item to be used to bind a
ItemsControl (ListBox)
- Utility Classes/XmlHandler.cs: A simple XML read/writer to load/save media item lists
- ucMediaPlayer.xaml: The main media player control
That's it. Shall we carry on and see how each part was done? I won't explain it all as a lot of it is standard WPF stuff like Styles/Templates/Binding, but sometimes, there will even be something there that needs to be mentioned. So let's carry on, shall we?
Play Videos
As the WPF MediaElement relies on the Windows Media Player, I simply only allow files that are supported by the WMP to be played in the attached control. This is a fairly simple thing to do. I firstly allow the user to drag and drop files on to the control, and then check what type the files are. The associated code is shown below:
private void Media_Drop(object sender, DragEventArgs e)
{
string[] fileNames = e.Data.GetData(DataFormats.FileDrop, true)
as string[];
foreach (string f in fileNames)
{
if (IsValidMediaItem(f))
mediaItems.Add(f.Substring(f.LastIndexOf(@"\")+1),
new MediaItem(@f,0));
}
foreach (MediaItem mi in mediaItems.Values)
lstMediaItems.Items.Add(mi);
e.Handled = true;
}
private bool IsValidMediaItem(string filename)
{
bool isValid = false;
string fileExtesion = filename.Substring(filename.LastIndexOf("."));
foreach (string s in MediaItem.allowableMediaTypes)
{
if (s.Equals(fileExtesion,
StringComparison.CurrentCultureIgnoreCase))
isValid = true;
}
return isValid;
}
That's all there is to that.
Control Media Playback (Pause / Stop / Play)
When dealing with the WPF MediaElement, you can either use Media StoryBoards or use code. To use code, you must ensure MediaElement.LoadedBehavior="Manual", and if you have that, it simply is a question of using the following methods on the MediaElement:
mediaPlayerMain.Play()mediaPlayerMain.Pause()mediaPlayerMain.Stop()
Control Media Volume
All I do here is use a Slider WPF control to alter the MediaElement's Volume property.
Control Media Position
All I do here is use a Slider WPF control to alter the MediaElement's Position property.
Scale Media
I wanted to be able to make the MediaElement take up the total available screen real estate. To this end, when you click on the main MediaElement, it will animate to take up the available screen area by hiding the media list. This uses the excellent article by Christian Graus, Nishant Sivakumar, which is available here.
Rate Each Media Item
I wanted to be able to rate the media items. So I created a special rating button Style which is applied to some ToggleButtons.
The Style code for this is as follows, where the stars are actually drawn using the Data property.
<!---->
<Style x:Key="StarToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Canvas Width="12" Height="12">
<Path Name="star" Fill="Gray"
Data="M 5,0 L 4,4 L 0,4 L 3,7 L 2,11 L 5,9 L 6,9 L 9,11 L 8,
7 L 11,4 L 7,4 L 6,0"/>
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="star" Property="Fill" Value="Gold"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This results in the following control:
Some other nice bits are that I use some 3D buttons (taken straight out of Adam Nathan's WPF Unleashed book). As the 3D buttons are achieved by using a standard WPF style, they can also show content, as I do here where I have a video playing on the 3D buttons.
The style to do all this is shown below. But as I say, I stole this from Adam Nathan's WPF Unleashed book.
<!---->
<Style x:Key="btn3DStyle" TargetType="{x:Type Button}">
<Style.Resources>
<Storyboard x:Key="Spin">
<DoubleAnimation
Storyboard.TargetName="CubeRotation"
Storyboard.TargetProperty="Angle" BeginTime="0:0:0"
Duration="0:0:1" From="0" To="360"
DecelerationRatio="0.5"
AccelerationRatio="0.5" />
<DoubleAnimation
Storyboard.TargetName="CubeRotation"
Storyboard.TargetProperty="Angle" BeginTime="0:0:1"
Duration="0:0:1" From="360"
To="0" DecelerationRatio="0.5"
AccelerationRatio="0.5" />
<DoubleAnimation
Storyboard.TargetName="CubeScale"
Storyboard.TargetProperty="ScaleX"
BeginTime="0:0:0"
Duration="0:0:1" From="0.5" To="0.75" />
<DoubleAnimation
Storyboard.TargetName="CubeScale"
Storyboard.TargetProperty="ScaleX"
BeginTime="0:0:1"
Duration="0:0:1" From="0.75" To="1.0" />
<DoubleAnimation
Storyboard.TargetName="CubeScale"
Storyboard.TargetProperty="ScaleY"
BeginTime="0:0:0"
Duration="0:0:1" From="0.5" To="0.75" />
<DoubleAnimation
Storyboard.TargetName="CubeScale"
Storyboard.TargetProperty="ScaleY"
BeginTime="0:0:1"
Duration="0:0:1" From="0.75" To="1.0" />
<DoubleAnimation
Storyboard.TargetName="CubeScale"
Storyboard.TargetProperty="ScaleZ"
BeginTime="0:0:0"
Duration="0:0:1" From="0.5" To="0.75" />
<DoubleAnimation
Storyboard.TargetName="CubeScale"
Storyboard.TargetProperty="ScaleZ"
BeginTime="0:0:1"
Duration="0:0:1" From="0.75" To="1.0" />
</Storyboard>
</Style.Resources>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Spin}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="4,4,4" LookDirection="-1,-1,-1" />
</Viewport3D.Camera>
<Viewport3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Direction="-0.3,-0.4,-0.5" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D x:Name="Cube">
<ModelVisual3D.Transform>
<Transform3DGroup>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="CubeRotation"
Axis="1,2,3" Angle="0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
<ScaleTransform3D x:Name="CubeScale" ScaleX="1"
ScaleY="1" ScaleZ="1" CenterX="0"
CenterY="0" CenterZ="0" />
</Transform3DGroup>
</ModelVisual3D.Transform>
<ModelVisual3D.Content>
<GeometryModel3D x:Name="OB_Cube">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush ViewportUnits="Absolute" Transform="1,0,0,-1,0,1">
<VisualBrush.Visual>
<Border
Background="{Binding Path=Background,
RelativeSource='{RelativeSource TemplatedParent}'}">
<Label Content="{Binding Path=Content,
RelativeSource='{RelativeSource TemplatedParent}'}" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Geometry>
<MeshGeometry3D x:Name="ME_Cube"
Positions="1,1,-1 1,-1,-1 -1,-1,-1 -1,1,-1 1,1,
1 -1,1,1 -1,-1,1 1,-1,1 1,1,
-1 1,1,1 1,-1,1 1,-1,-1 1,-1,-1 1,-1,1 -1,
-1,1 -1,-1,-1 -1,-1,-1 -1,-1,1 -1,1,1 -1,1,
-1 1,1,1 1,1,-1 -1,1,-1 -1,1,1"
TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7 8 9 10 8
10 11 12 13 14 12 14 15 16 17
18 16 18 19 20 21 22 20 22 23"
TextureCoordinates="0,1 0,0 1,0 1,1 1,1 -0,1 0,
-0 1,0 1,1 -0,1 0,-0 1,0 1,0 1,
1 -0,1 0,-0 -0,0 1,-0 1,1 0,
1 1,-0 1,1 0,1 -0,0"/>
</GeometryModel3D.Geometry>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
</Viewport3D>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I also apply some animations to rotate and size these buttons, nice huh? Oh, the media item styles can also be swapped to a more conventional button by using the last button in the media items area. In both the 3D buttons' and the standard buttons' cases, I also created a nicer tooltip.
It's pretty easy actually (I hope); either drag and drop some media items to the left hand side list box area, or load a previously saved XML media list. When the media items are loaded, just click one and it will start to play in the main window, where you may control it using the controls provided.
Although there is not that much code in this article, I had fun doing this one, and hope that it will be useful to someone out there.
I would just like to ask, if you liked the article, please vote for it, and leave some comments, as it lets me know if the article was at the right level or not, and whether it contained what people need to know.
There is not too much to mention here as I think the rest of the article pretty much covers it.
- v1.0 - 13/09/07: Initial issue.
