Search code examples
c#wpfmedia-player

VideoDrawing on XAML main window?


I have the following simple example in WPF to play a video file using a VideoDrawing object - here is the code behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        MediaTimeline timeline = new MediaTimeline(new Uri(@"c:\test\RedRock-uhd-h264.mp4", UriKind.Absolute));
        timeline.RepeatBehavior = RepeatBehavior.Forever;
        MediaClock clock = timeline.CreateClock();
        MediaPlayer player = new MediaPlayer();
        player.Clock = clock;
        VideoDrawing drawing = new VideoDrawing();

        drawing.Rect = new Rect(0, 0, 820, 600);    //<--video size is 620 x 400 same as XAML MainWindow size
        drawing.Rect = new Rect(0, 0, 420, 280);    //<--video size is 620 x 400 same as XAML MainWindow size
        drawing.Rect = new Rect(0, 0, 220, 80);     //<--video size is 620 x 400 same as XAML MainWindow size
        drawing.Rect = new Rect(0, 0, 1, 1);        //<--video size is 620 x 400 same as XAML MainWindow size
        drawing.Rect = new Rect(0, 0, 0, 0);        //<--video does not show
        //drawing.Rect = new Rect(0, 0, 0, 0);      //<--video does not show

        drawing.Player = player;

        DrawingBrush brush = new DrawingBrush(drawing);
        this.Background = brush;            
    }
}

and here is the XAML:

<Window x:Class="MyMediaPlayer.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MediaPlayer in WPF" Width="620" Height="400" 
    WindowStyle="None"
    ShowInTaskbar="True"
    AllowsTransparency="True"
    Background="Transparent"
    WindowStartupLocation="Manual"
    Left="0"
    Top="0">

</Window>

look at the lines "drawing.Rect = new Rect(…) above and note the comments - no matter what size I set the Rect to - the video always plays at the size of the XAML MainWindow size (620, 400), however I have to set at least some Rect size I can't set it to 0 or comment it out. It seems like the video ought to play at the Rect size set, unless it is larger than the XAML MainWindow? What is it I don't understand about what I am doing and why doesn't the video play to the size of the Rect?


Solution

  • Set the stretch mode to None:

    brush.Stretch = Stretch.None;
    

    The problem with this of course is that you now don't have a way to set the color of the area around the player. If you want control of that then you'll have to switch to a VisualBrush and use a MediaElement instead:

    // create a grid and bind it to the parent window's size
    var grid = new Grid { Background = Brushes.CornflowerBlue };    // <- sets background color
    grid.SetBinding(WidthProperty, new Binding
    {
        RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(Window), 1),
        Path = new PropertyPath("ActualWidth"),
        Mode = BindingMode.OneWay,
        UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
    });
    grid.SetBinding(HeightProperty, new Binding
    {
        RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(Window), 1),
        Path = new PropertyPath("ActualHeight"),
        Mode = BindingMode.OneWay,
        UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
    });
    
    // add the media player
    grid.Children.Add(new MediaElement
    {
        Source = new Uri("yourvideo.mp4", UriKind.RelativeOrAbsolute),
        LoadedBehavior = MediaState.Play,
        Stretch = Stretch.Fill,
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Center,
        Width = 640,    // <-- video size
        Height = 480
    });
    
    // wrap it all up in a visual brush
    this.Background = new VisualBrush { Visual = grid };