How to: Embed Video into WPF Application

  • Article

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

step3

Congratulation, you have successful embed a video into your application. Click Run to test it out.
And you will see something like below:

step 4

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>