Multimedia In WPF

Introduction

 

We all are surrounded by media, and use it on a daily basis. Whether it be listening to Spotify or watching youtube or reading on Amazon kindle. This all are media types carrying some information. The media needs some kind of UI to control them. WPF has media control which used to Play, Pause, Stop, Volume, and Speed up or down media. let's play video of my cat. His name is Tango, if case you were wondering.

 

So, we will manual controls in our video, 3 buttons, one is for play, another for pause, and the last one is a toggle button for mute & unmute. The buttons must be rounded to have the feel of media control buttons, so let's create a ControlTemplate for them:

<ControlTemplate  x:Key="MediaButtons" TargetType="Button">
            <Grid>
                <Ellipse Stroke="Transparent" StrokeThickness="0">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Offset="0"  Color="LightGray" />
                            <GradientStop Offset="1"  Color="DarkGray" />
                            <GradientStop Offset="1"  Color="Gray" />
                            <RadialGradientBrush.Transform>
                                <TransformGroup>
                                    <ScaleTransform ScaleY="0.65" />
                                </TransformGroup>
                            </RadialGradientBrush.Transform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>

Now our MediaElement and our 3 buttons are lined up, one after another.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <MediaElement x:Name="TangosVideo"
                      Height="200"
                      Width="200"
                      Source="C:\Users\Rikam\Videos\Tango.mp4"
                      LoadedBehavior="Manual"
                      />
        <StackPanel
            Orientation = "Horizontal"
            HorizontalAlignment="Center"
            Margin = "0,10,0,0"
            Grid.Row="1">
            <Button x:Name="PlayButton"
                Background="Transparent"
                Margin = "0,0,10,0"
                Padding = "5"
                Click = "PlayVideo"
                Content="Play"
                Height="40"
                Width="40"
                Template="{StaticResource MediaButtons}">
            </Button>
            <Button x:Name="PauseButton"
                Content = "Pause"
                Background="Transparent"
                Margin = "0,0,10,0"
                Padding = "5"
                Click = "PauseVideo"
                Height="40"
                Width="40"
                Template="{StaticResource MediaButtons}"/>
            <Button x:Name = "MuteButton"
                Background="Transparent"
                Content = "Mute"
                Padding = "5"
                Click = "MuteVideo"
                Height="40"
                Width="40"
                Template="{StaticResource MediaButtons}"/>
        </StackPanel>
</Grid>

At compile time you can see than Clickbait has is loaded already.

 

 

Now time to add some brain to our UI, which is the behavior of these controls.

 

Jump to the code behind and update it as follows:

using System;
using System.Threading;
using System.Windows;

namespace A
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //setting up 80% volume
            TangosVideo.Volume = 100;

            //starts playing as soo as page loads
            TangosVideo.Play();
        }
        void PlayVideo(Object sender, EventArgs e)
        {
            TangosVideo.Play();
        }

        void PauseVideo(Object sender, EventArgs e)
        {
            TangosVideo.Pause();
        }
        void MuteVideo(Object sender, EventArgs e)
        {

            if (TangosVideo.Volume == 100)
            {
                TangosVideo.Volume = 0;
                MuteButton.Content = "UnMute";
            }
            else
            {
                TangosVideo.Volume = 100;
                MuteButton.Content = "Mute";
            }
        }
    }
}

Pretty simple to understand, so no need to explain.

Now run this app and see that the video running.

I am uploading the GIF so I can't really play music but believe me sound mutes and unmutes.

 

 

It works with audio as well, just replace the source.

<MediaElement x:Name="TangosVideo"
                      Height="200"
                      Width="200"
                      Source="C:\Users\Rikam\Music\Sing For The Moment.mp3"
                      LoadedBehavior="Manual">
</MediaElement>

And that's how you roll. You can do a lot of cool stuff with MediaElements.

 

I hope this article has helped you to gain some useful knowledge.

 

If you wish to connect, feel free to meet me @

• LinkedIn
• Twitter
  
• GitHub

And as always, Happy Coding!