Can I remove a ChildWindow from the VisualTree and put it back in to achieve FullScreen?

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
....
}
});

Justin XL · Accepted Answer · 2011-11-22T21:38:51.800

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>

When I tried this, the group is always null. It looked like it was set to the MatrixTransform. I tried using the CompositeTransform (which is similar to TransformGroup) and set the ScaleX, ScaleY, TranslateX, and TranslateY. This does move the ChildWindow, but I didn't figure out the correct calculations to get it scaled Fullscreen and to the top left. — AlignedDev, Nov 22 '11 at 16:27
Do you have a custom style for your ChildWindow? If you do, can you also post it? You don't need to scale it I guess, you need to somehow reset the TranslateX and Y. The first couple of lines have already done the resizing. — Justin XL, Nov 22 '11 at 20:38
In my live app I have a custom style, but I did not in my test app where I was testing this out. I had misread that it was already re-sizing the window (I was testing in a slightly different context). I think your right, if I can just get it to the top left, then it should be a pretty good solution. — AlignedDev, Nov 22 '11 at 21:19
I was using 'this' in the wrong context, I'll try it again in the codebehind of my childwindow, then try to abstract it out from there. — AlignedDev, Nov 22 '11 at 21:31
I see. :) I updated with the reason that why you need to reset the TranslateX and Y. Hope it helps. — Justin XL, Nov 22 '11 at 21:39
I thought you got them when I marked it as answer. I guess have to click the +50 button as well. Thanks for checking on it and for your help. — AlignedDev, Nov 28 '11 at 21:12

Can I remove a ChildWindow from the VisualTree and put it back in to achieve FullScreen?

1 Answers1