Make a UserCOntrol on a Page the same size as the MainWindow in WPF

Question

I have a WPF application. It consists of:

1. A MainWindow which loads a Page which contains a UserControl.
2. The UserControl is simply a MediaElement with play/pause controls etc.

Here is the XAML for the UserControl:

<UserControl x:Class="InstallerToolkit.UserControls.UserControlVideoPlayer"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="464">
<Grid Margin="0,0,0,0" Background="Black">
    <StackPanel  Margin="0,0,0,0" VerticalAlignment="Bottom">
        <MediaElement Name="MediaElement" MediaOpened="Element_MediaOpened" LoadedBehavior="Manual" UnloadedBehavior="Stop"/>
        <StackPanel DockPanel.Dock="Bottom" Background="DarkGray"  HorizontalAlignment="Center" Orientation="Horizontal">
            <Image Source="/Images/control_play.png" MouseDown="OnMouseDownPlayMedia" Margin="5" />
            <Image Source="/images/control_pause.png" MouseDown="OnMouseDownPauseMedia" Margin="5" />
            <Image Source="/images/control_stop.png" MouseDown="OnMouseDownStopMedia" Margin="5" />
            <TextBlock Foreground="White" Margin="5"  VerticalAlignment="Center"><Run Text="Seek To"/></TextBlock>
            <Slider x:Name="timelineSlider" Thumb.DragStarted="DragStarted" Thumb.DragCompleted="DragCompleted" Margin="5" ValueChanged="SeekToMediaPosition"  Width="70"/>
            <TextBlock x:Name="lblProgressStatus" Margin="5"><Run Text="00:00"/></TextBlock>
            <TextBlock x:Name="lblSepatator" Margin="5"><Run Text="/"/></TextBlock>
            <TextBlock x:Name="lblTotalLength" Margin="5" RenderTransformOrigin="3.607,0.455"><Run Text="00:00"/></TextBlock>
            <Image Source="/images/control_stop.png" Margin="145,0,0,0" MouseLeftButtonDown="Image_MouseLeftButtonDown" />
        </StackPanel>
    </StackPanel>
</Grid>

Here is the positon of my UserControl normally:

I have added a button to the UserControl to try and make it go the full size of the MainWindow. WHen I click the fullscreen button I have an event on my page which does the following:

    private void VideoPlayer_FullScreenSelected(object sender, EventArgs e)
    {            
        var parentWindowWidth = ((System.Windows.Controls.Panel)(Application.Current.MainWindow.Content)).ActualWidth;
        var parentWindowHeight = ((System.Windows.Controls.Panel)(Application.Current.MainWindow.Content)).ActualHeight;

        Thickness margin = new Thickness(0,0,0,0);
        VideoPlayer.Margin = margin;
        VideoPlayer.Width = parentWindowWidth;
        VideoPlayer.Height = parentWindowHeight;

    }

When I do this I see the VideoPlayer appearing larger like so:

Note how it is the size of my Page but not the MainWindow which I want ot to be.

So then I have added an event to my Page which triggers a function in my MainWindow that tries to grab the MediaElement from my Page and make it fullscreen. But I dont know how to grab my UserCOntrol from here and make it the size I need.

How can I do this??

Answer 1

You are grabbing window content height and width which is page instead and not your window.

Instead of

var parentWindowWidth = ((System.Windows.Controls.Panel)
                   (Application.Current.MainWindow.Content)).ActualWidth;
var parentWindowHeight = ((System.Windows.Controls.Panel)
                   (Application.Current.MainWindow.Content)).ActualHeight;

you should use MainWindow height and width:

var parentWindowWidth = Application.Current.MainWindow.ActualWidth;
var parentWindowHeight = Application.Current.MainWindow.ActualHeight;

Answer 2

I found another way around this problem.

I created a new Window and made its size to be 1200x750. On this window I placed my VideoPlayer Usercontrol and made it full screen.

Thwn when I click the 'fullscreen' button I simply launch this new window and pass it the current position of my video to make it appear like its continuing playing. When this window is closed I pass the current video positon back again and continue from there.

    private void VideoPlayer_FullScreenSelected(object sender, EventArgs e)
    {
        VideoPlayer.Pause();

        //Get the current media position
        _currentMediaPosition = VideoPlayer.CurrentPosition;

        VideoFullScreenWindow fullScreenVideo = new VideoFullScreenWindow(_currentMediaPosition, _videoFile);

        fullScreenVideo.ShowDialog();

        TimeSpan pos = fullScreenVideo.Position;

        VideoPlayer.SeekToPosition(pos);
        VideoPlayer.Play();


    }