Question

I have a popup that is a ChildWindow. Inside that popup I have a UserControl (MediaPreviewView) that has a MediaElement and some buttons to control the video. My requirements state that I need a fullscreen button and show the video fullscreen when the user clicks on the button.

I’m using MVVM, so I decided to try this with Messaging in the MVVM Light. I’m sending a message to my base View. Inside that View’s codebehind, I’m showing a Grid (hidden and at the bottom of the XAML, with a high zindex). My message contains the MediaPreviewControl and I’m setting the Grid.Children.Add( to the control. I’ve tried multiple things, and can get the ChildWindow to be invisible, but the buttons don’t work. It seems that the ChildWindow is still on top of the buttons, even though the width and height was 0.
Is there a better a workable approach to making my MediaPreviewView fullscreen?

public class MediaPreviewFullScreenMessage
{
    public MediaPreviewView PreviewView { get; set; }
    public ChildWindow ContainerChildWindow { get; set; }
    public bool ChangeToFullScreen { get; set; }
}

// Register for FullScreen media preview
Messenger.Default.Register<MediaPreviewFullScreenMessage>(this,
(fullScreenMessage) =>
{
  this.fullScreenHolderGrid.Visibility = fullScreenMessage.ChangeToFullScreen ? Visibility.Visible : Visibility.Collapsed;
  this.fullScreenHolderGrid.Children.Clear();
  if (fullScreenMessage.ChangeToFullScreen)
  {
// I've tried, Visibility, width and height = 0 on the fullScreenMessage.ContainerChildWindow, even a TranslateTransform
....
}
});

Answer 1

How about just simply maximising the ChildWindow? Behind your full screen Button you do,

    private void FullScreenButton_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        // get the explorer window size
        double height = App.Current.Host.Content.ActualHeight;
        double width = App.Current.Host.Content.ActualWidth;

        // need to make it a little bit smaller or it won't resize
        this.Height = height - 1;
        this.Width = width - 1;

        // need to update the layout here
        this.UpdateLayout();

        // the following code repositions the child window
        var root = VisualTreeHelper.GetChild(this, 0) as FrameworkElement;
        if (root == null)
        {
            return;
        }

        var contentRoot = root.FindName("ContentRoot") as FrameworkElement;
        if (contentRoot == null)
        {
            return;
        }

        var group = contentRoot.RenderTransform as TransformGroup;
        if (group == null)
        {
            return;
        }

        TranslateTransform translateTransform = null;
        foreach (var transform in group.Children.OfType<TranslateTransform>())
        {
            translateTransform = transform;
        }

        if (translateTransform == null)
        {
            return;
        }

        // reset transform
        translateTransform.X = 0.0;
        translateTransform.Y = 0.0;
    }

UPDATE

In the ChildWindow‘s default style, it has this Grid called ContentRoot which sets the position of the ChildWindow by RenderTransform. That’s why you need to reset the TranslateX and TranslateY to make it top left.

                        <Grid x:Name="ContentRoot" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Grid.RenderTransform>