In this Article I am going to create a custom media player in wpf .First we are setting the background color and a static resource for button background image. Here i am using a VisualBrush to fill UI elements. The following code uses a VisualBrush to fill a rectangle.I am using media element as visual. A Visual object usually hosts one container panel such as a Grid or StackPanel and on this container.Add 5 buttons for play,forward,backward,stop and open file functionality.. We have to set LoadedBehavior="Manual" in media element.
Here is the xaml code:
<Window x:Class="wpftheme.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Media Element" Height="350" Width="450" Initialized="Window_Initialized" WindowStartupLocation="CenterScreen"> <Window.Resources> <Style TargetType="Button"> <Setter Property="Margin" Value="2,4"/> <Setter Property="Background"> <Setter.Value> <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/> </Setter.Value> </Setter> </Style> <SolidColorBrush x:Key="WindowBrush" Color="Gray"/> </Window.Resources> <Window.Style> <Style TargetType="{x:Type Window}"> <Setter Property="Background" Value="{StaticResource WindowBrush}"/> </Style> </Window.Style> <Grid > <Rectangle Name="rectangleMedia" Margin="12,25,12,59" RadiusY="7.5" RadiusX="7.5" Stroke="GhostWhite" StrokeThickness="2" > <Rectangle.Fill> <VisualBrush TileMode="None"> <VisualBrush.Visual> <MediaElement Name="videoelement" LoadedBehavior="Manual"/> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> <Button Content="Play" HorizontalAlignment="Left" Margin="12,0,0,17" Name="button1" VerticalAlignment="Bottom" Width="75" Click="button1_Click" /> <Button Content="Stop" HorizontalAlignment="Left" Margin="93,0,0,17" Name="StopButton" VerticalAlignment="Bottom" Width="75" Click="StopButton_Click"/> <Button Content="Forward" HorizontalAlignment="Left" Margin="174,0,0,17" Name="ForwardButton" VerticalAlignment="Bottom" Width="75" Click="ForwardButton_Click"/> <Button Content="Backward" HorizontalAlignment="Left" Margin="255,0,0,17" Name="BackWard" VerticalAlignment="Bottom" Width="75" Click="BackWard_Click"/> <Button Content="Open" HorizontalAlignment="Left" Margin="340,0,0,17" Name="button2" VerticalAlignment="Bottom" Width="75" Click="button2_Click" /> </Grid> </Window> |
Here
is the C# code:
// code for play
and pause
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } // The Play method will begin the media if it is not currently active or // resume media if it is paused. This has no effect if the media is // already running. private void button1_Click(object sender, RoutedEventArgs e) { if (this.button1.Content.ToString() == "Play") { this.videoelement.Play(); this.button1.Content = "Pause"; } else { this.videoelement.Pause(); this.button1.Content = "Play"; } } // code for stop private void StopButton_Click(object sender, RoutedEventArgs e) { // The Stop method stops and resets the media to be played from // the beginning. this.videoelement.Stop(); this.button1.Content = "Play"; } // code for forward private void ForwardButton_Click(object sender, RoutedEventArgs e) { this.videoelement.Position = this.videoelement.Position + TimeSpan.FromSeconds(10); } // code bvackward private void BackWard_Click(object sender, RoutedEventArgs e) { this.videoelement.Position = this.videoelement.Position - TimeSpan.FromSeconds(10); } // code for open file private void button2_Click(object sender, RoutedEventArgs e) { System.Windows.Forms.OpenFileDialog opnDialogue = new System.Windows.Forms.OpenFileDialog(); opnDialogue.Filter = "Video Files(*.wmv)|*.wmv"; if (opnDialogue.ShowDialog() == System.Windows.Forms.DialogResult.OK) { this.videoelement.Source = new Uri(opnDialogue.FileName); } } } |