How to: Embed Video into WPF Application
Here is a simple walkthrough on how to embed video into your WPF application.
I create a XAML browser application as a sample for this walkthrough.
First I need to add an image acts as the video preview photo and a video into my application.
Next, I define 2 rows. One row is going to put an image to show the video preview; the second row is going to put the controls that can be used to control the load behavior for my video.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
</Grid>
Now, I can go ahead to define the video preview image at the first row
<Image Name="VideoPreview" Source="Images/fish.jpg" Grid.Row="0"/>
and the controls buttons at the second row. I wrapped the buttons with <StackPanel> layout control and define the orientation for the buttons in horizontal style. I also use HorizontalAlignment property to align the buttons to center. I also put the event handler name in the Button element. So, when the user click at the button, it will call the method.
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Click="PlayVideo">Play</Button>
<Button Click="PauseVideo">Pause</Button>
<Button Click="StopVideo">Stop</Button>
</StackPanel>
Next, I can add the video into my application by just simple use the <MediaElement> to define the video. I need to define the value for the LoadedBehavior property as manual because I am going to control the behavior of the video manually.
<MediaElement Name="redangVideo" Source="redang.wmv" LoadedBehavior="Manual" Grid.Row="0"/>
After we have defined the video, image and button elements, what am I going to do next is that to write the event handler for the three buttons. By default, a Page.xaml.cs will be created for any XAML page.
VideoPreview and redangVideo are the names I gave for the image and video. I can actually refer it from the code behind.First, I make the VideoPreview collapsed before I display the video. Then, I make the collapsed video visible again and call the Play() to play the video.
public void PlayVideo(object sender, RoutedEventArgs e)
{
VideoPreview.Visibility = Visibility.Collapsed;
redangVideo.Visibility = Visibility.Visible;
redangVideo.Play();
}
Same code goes to the PauseVideo() and StopVideo() methods. Instead of using Play(), PauseVideo() uses Pause() and StopVideo() uses Stop().
Remember to change the video’s property:Copy to Output Directory to Always Copy
Congratulation, you have successful embed a video into your application. Click Run to test it out.
And you will see something like below:
The complete C# code:
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace XAMLBrowserApplication1
{
/// <summary>
/// Interaction logic for Page1.xaml
/// </summary>
public partial class Page1 : System.Windows.Controls.Page
{
public Page1()
{
InitializeComponent();
}
public void PlayVideo(object sender, RoutedEventArgs e)
{
VideoPreview.Visibility = Visibility.Collapsed;
redangVideo.Visibility = Visibility.Visible;
redangVideo.Play();
}
public void PauseVideo(object sender, RoutedEventArgs e)
{
VideoPreview.Visibility = Visibility.Collapsed;
redangVideo.Visibility = Visibility.Visible;
redangVideo.Pause();
}
public void StopVideo(object sender, RoutedEventArgs e)
{
VideoPreview.Visibility = Visibility.Collapsed;
redangVideo.Visibility = Visibility.Visible;
redangVideo.Stop();
}
}
}
The complete XAML code:
<Page x:Class="XAMLBrowserApplication1.Page1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Name="VideoPreview" Source="Images/fish.jpg" Grid.Row="0"/>
<MediaElement Name="redangVideo" Source="redang.wmv" LoadedBehavior="Manual" Grid.Row="0"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Click="PlayVideo">Play</Button>
<Button Click="PauseVideo">Pause</Button>
<Button Click="StopVideo">Stop</Button>
</StackPanel>
</Grid>
</Page>