locked
How to play a video file in fullscreen in WPF project(not silverlight project)? RRS feed

  • Question

  •     Now I need write a program to play a video file using the mediaelement, when user double click the mediaelement control, it will play it in full screen, when user press the esc key, it will return the normal
    mode for playing the video. how to do it? or where I can find a simple sample for it? thanks.
    need keep the video ratio when play it in normal mode and full screen mode.

    PS: I already read the thread: Make Media element Full screen
    http://forums.msdn.microsoft.com/en-US/wpf/thread/946c4aae-0e94-4f62-b090-14e7fb9bbca5/

    but I try the source code, find it has some problems. they are:
    1. MediaElement haven't MouseDoubleClick event, but I think it can be solved by deal the single click
    event and deal the delay time. so it isn't a big problem.
    2. The big problem is that it will restart to play the video file when enter the full screen or exit the full screen mode, not continue to play it. It isn't very good to user. How to solve it?thanks.
    • Edited by tszzp Saturday, August 9, 2008 8:35 AM modify it
    Saturday, August 9, 2008 8:26 AM

Answers

  • Ok managed to figure it out, I've posted the code below in case it helps anyone else:

    <Rectangle Name="VideoDisplay" Width="320" Height="240">  
      <Rectangle.Fill>  
        <DrawingBrush>  
          <DrawingBrush.Drawing>  
            <VideoDrawing>  
              <VideoDrawing.Player>  
                <MediaPlayer x:Name="VideoPlayer" /> 
              </VideoDrawing.Player>  
              <VideoDrawing.Rect>  
                <Rect Width="320" Height="240" />  
              </VideoDrawing.Rect>  
            </VideoDrawing>  
          </DrawingBrush.Drawing>  
        </DrawingBrush>  
      </Rectangle.Fill>  
    </Rectangle>  

    //second monitor full screen  
    var area = System.Windows.Forms.Screen.AllScreens[1].WorkingArea; 
    var w = new Window();  
    var g = new Grid();  
    var r = new Rectangle();  
    var b = new DrawingBrush();  
    var d = new VideoDrawing();  
     
    this.Closed += (sender, e) => { w.Close(); };  
    w.ShowInTaskbar = false;  
    w.TopMost = true
    w.WindowStyle = WindowStyle.None;  
    w.Loaded += (sender, e) => { w.WindowState = WindowState.Maximized; };  
    w.Left = area.Left; 
    w.Top = area.Top; 
    w.Background = new SolidColorBrush(Color.FromRgb(0, 0, 0));  
    w.Content = g;  
    g.Children.Add(r);  
    r.Fill = b;  
    b.Drawing = d;  
    d.Player = VideoPlayer;  
    d.Rect = new System.Windows.Rect(0, 0, 640, 480);  
    w.Show();  
     
    VideoPlayer.Open(new Uri(@"c:\example.wmv", UriKind.Absolute));  
    VideoPlayer.MediaOpened += (sender, e) => { 
      //set aspect ratio 
      double ratio = Math.Min(240d / VideoPlayer.NaturalVideoHeight, 320d / VideoPlayer.NaturalVideoWidth); 
      VideoDisplay.Height = VideoPlayer.NaturalVideoHeight * ratio; 
      VideoDisplay.Width = VideoPlayer.NaturalVideoWidth * ratio; 
     
      ratio = Math.Min(w.ActualHeight / VideoPlayer.NaturalVideoHeight,
               w.ActualWidth / VideoPlayer.NaturalVideoWidth); 
      r.Height = VideoPlayer.NaturalVideoHeight * ratio; 
      r.Width = VideoPlayer.NaturalVideoWidth * ratio; 
    };
    VideoPlayer.Play(); 

    For the code to place a window onto a second monitor, thanks goes to:
    http://mostlytech.blogspot.com/2008/01/maximizing-wpf-window-to-second-monitor.html
    • Marked as answer by Marco Zhou Thursday, December 4, 2008 2:29 AM
    Wednesday, December 3, 2008 9:08 AM
  • Please try the following code:

    private void mediaElement1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (!fullScreen)
        {
            //layoutRoot.Children.Remove(mediaElement1);
            //this.Content = mediaElement1;
            this.WindowStyle = WindowStyle.None;
            this.WindowState = WindowState.Maximized;
        }
        else
        {
            //this.Content = layoutRoot;
            //layoutRoot.Children.Add(mediaElement1);
            this.WindowStyle = WindowStyle.SingleBorderWindow;
            this.WindowState = WindowState.Normal;
        }

        fullScreen = !fullScreen;
    }

    I comment the code of removing the MediaElement, since that piece of code is only used for illustration purpose in the original thread, and should be fixed up according to the specified requirement.

    Hope this helps
    • Marked as answer by Marco Zhou Friday, August 15, 2008 9:36 AM
    Wednesday, August 13, 2008 3:08 AM

All replies

  • -> 2. The big problem is that it will restart to play the video file when enter the full screen or exit the full screen mode, not continue to play it. It isn't very good to user. How to solve it?thanks.

    I cannot reproduce this problem, could you please provide a small, complete and ready-to-run example to demonstrate the issue you are encountering?

    Thanks
    Tuesday, August 12, 2008 9:12 AM
  • My write a simple sample for it. the sample can repro the problem in my machine.
    the window1.xaml as follow:
    <Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication1"
        Title="Window1">
     
        <Grid x:Name="layoutRoot">
          
            <MediaElement Margin="0,0,0,0" Name="mediaElement1" VerticalAlignment="Bottom" />
        </Grid>
    </Window>

    The window1.xaml.cs as follow:

    namespace WpfApplication1
    {
        /// <summary>
        /// Interaction logic for Window1.xaml
        /// </summary>
        public partial class Window1 : Window
        {
            private bool fullScreen = false;
            public Window1()
            {
                InitializeComponent();
                mediaElement1.LoadedBehavior = MediaState.Manual;
                mediaElement1.Source = new Uri("D:\\Videos\\test.wmv");
                mediaElement1.Play();

                mediaElement1.MouseLeftButtonUp += new MouseButtonEventHandler(mediaElement1_MouseLeftButtonUp);
                
            }

            void mediaElement1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                if (!fullScreen)
                {
                    layoutRoot.Children.Remove(mediaElement1);
                    this.Content = mediaElement1;
                    this.WindowStyle = WindowStyle.None;
                    this.WindowState = WindowState.Maximized;
                }
                else
                {
                    this.Content = layoutRoot;
                    layoutRoot.Children.Add(mediaElement1);
                    this.WindowStyle = WindowStyle.SingleBorderWindow;
                    this.WindowState = WindowState.Normal;
                }
                fullScreen = !fullScreen;

            }
      
        }
    }

    Tuesday, August 12, 2008 9:47 AM
  • Please try the following code:

    private void mediaElement1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (!fullScreen)
        {
            //layoutRoot.Children.Remove(mediaElement1);
            //this.Content = mediaElement1;
            this.WindowStyle = WindowStyle.None;
            this.WindowState = WindowState.Maximized;
        }
        else
        {
            //this.Content = layoutRoot;
            //layoutRoot.Children.Add(mediaElement1);
            this.WindowStyle = WindowStyle.SingleBorderWindow;
            this.WindowState = WindowState.Normal;
        }

        fullScreen = !fullScreen;
    }

    I comment the code of removing the MediaElement, since that piece of code is only used for illustration purpose in the original thread, and should be fixed up according to the specified requirement.

    Hope this helps
    • Marked as answer by Marco Zhou Friday, August 15, 2008 9:36 AM
    Wednesday, August 13, 2008 3:08 AM
  • Now I must write a program for play the video file. in normal mode, in the window have the mediaelement and other control. when play the video in normal file, user double click the mediaelement, the video file will show in full screen and keep ratio. So remove the source code doesn't help in my project.

    Now I think a method, maybe it can solve the problem. I want to use the video brush. but I read the msdn sample, but it only use the media player, not with the mediaelement. Can you tell me how to use the video brush with mediaelement? thanks.
    Wednesday, August 13, 2008 3:27 AM
  • My guess is that you are trying to take the MediaElement out of your current window and put it into a special full screen window. That's a typical pattern that I have seen elsewhere.

    When disconnecting the MediaElement, it starts the movie from the beginning. To suppress that, set the UnloadedBehavior to manual. You may have to change the loaded behavior as well.

    MediaElement.UnloadedBehavior="Manual"
    • Proposed as answer by Cyrille Colin Thursday, February 17, 2011 9:42 AM
    Wednesday, October 8, 2008 1:32 AM
  •  No, My method is in the same window, only scale the mediaelement to full screen mode and set the top window include the mediaelement control's style to none,set the window state to maximize. I already implement it, but the scale animation's effect is not good.

    Can you tell me where I can find the sample(with source code) make the media element full screen use WPF? Use the method you said is also ok. thanks.
    Tuesday, October 14, 2008 9:44 AM
  • I already implement the full screen feature in a special window as you said. but I met the another problem. I post it in here:
    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/3132b1c4-4e7d-4e72-bf82-45709cd06341
    Thursday, October 16, 2008 7:09 AM
  • I have a slightly different requirement, basically I want the video that is playing in the window of the application to also be displayed on a second monitor except in full screen a bit like nVidia's video mirror feature or ATI's theatre mode feature.

    Basically the second monitor is a projector and can potentially not be viewable from where the PC is located so I want to show on the PC what is being displayed on the projector.

    Wednesday, December 3, 2008 6:58 AM
  • Ok managed to figure it out, I've posted the code below in case it helps anyone else:

    <Rectangle Name="VideoDisplay" Width="320" Height="240">  
      <Rectangle.Fill>  
        <DrawingBrush>  
          <DrawingBrush.Drawing>  
            <VideoDrawing>  
              <VideoDrawing.Player>  
                <MediaPlayer x:Name="VideoPlayer" /> 
              </VideoDrawing.Player>  
              <VideoDrawing.Rect>  
                <Rect Width="320" Height="240" />  
              </VideoDrawing.Rect>  
            </VideoDrawing>  
          </DrawingBrush.Drawing>  
        </DrawingBrush>  
      </Rectangle.Fill>  
    </Rectangle>  

    //second monitor full screen  
    var area = System.Windows.Forms.Screen.AllScreens[1].WorkingArea; 
    var w = new Window();  
    var g = new Grid();  
    var r = new Rectangle();  
    var b = new DrawingBrush();  
    var d = new VideoDrawing();  
     
    this.Closed += (sender, e) => { w.Close(); };  
    w.ShowInTaskbar = false;  
    w.TopMost = true
    w.WindowStyle = WindowStyle.None;  
    w.Loaded += (sender, e) => { w.WindowState = WindowState.Maximized; };  
    w.Left = area.Left; 
    w.Top = area.Top; 
    w.Background = new SolidColorBrush(Color.FromRgb(0, 0, 0));  
    w.Content = g;  
    g.Children.Add(r);  
    r.Fill = b;  
    b.Drawing = d;  
    d.Player = VideoPlayer;  
    d.Rect = new System.Windows.Rect(0, 0, 640, 480);  
    w.Show();  
     
    VideoPlayer.Open(new Uri(@"c:\example.wmv", UriKind.Absolute));  
    VideoPlayer.MediaOpened += (sender, e) => { 
      //set aspect ratio 
      double ratio = Math.Min(240d / VideoPlayer.NaturalVideoHeight, 320d / VideoPlayer.NaturalVideoWidth); 
      VideoDisplay.Height = VideoPlayer.NaturalVideoHeight * ratio; 
      VideoDisplay.Width = VideoPlayer.NaturalVideoWidth * ratio; 
     
      ratio = Math.Min(w.ActualHeight / VideoPlayer.NaturalVideoHeight,
               w.ActualWidth / VideoPlayer.NaturalVideoWidth); 
      r.Height = VideoPlayer.NaturalVideoHeight * ratio; 
      r.Width = VideoPlayer.NaturalVideoWidth * ratio; 
    };
    VideoPlayer.Play(); 

    For the code to place a window onto a second monitor, thanks goes to:
    http://mostlytech.blogspot.com/2008/01/maximizing-wpf-window-to-second-monitor.html
    • Marked as answer by Marco Zhou Thursday, December 4, 2008 2:29 AM
    Wednesday, December 3, 2008 9:08 AM
  • Please try the following code:

    private void mediaElement1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (!fullScreen)
        {
            //layoutRoot.Children.Remove(mediaElement1);
            //this.Content = mediaElement1;
            this.WindowStyle = WindowStyle.None;
            this.WindowState = WindowState.Maximized;
        }
        else
        {
            //this.Content = layoutRoot;
            //layoutRoot.Children.Add(mediaElement1);
            this.WindowStyle = WindowStyle.SingleBorderWindow;
            this.WindowState = WindowState.Normal;
        }

        fullScreen = !fullScreen;
    }

    I comment the code of removing the MediaElement, since that piece of code is only used for illustration purpose in the original thread, and should be fixed up according to the specified requirement.

    Hope this helps

    It doesn't work! It only pushes the window to the top left corner :(
    Monday, April 12, 2010 7:07 AM
  • > It doesn't work! It only pushes the window to the top left corner :(

    Try having a look at "System.Windows.Forms.Screen.AllScreens" since it gives you the x and y offset and height and width of all your screens. It sounds like the height and width of your monitor is being reported wrong, so could try upgrading graphics drivers or playing around with desktop resolution to see if that makes any difference.

    Friday, April 16, 2010 11:48 PM