Can I duplicate a XAML/WPF window into a second window, like a picture-in-picture TV?

Question

I've got an application with two XAML/WPF windows (derived from NavigationWindow), each window contains one parent UserControl, in which all child controls are placed. In one of the windows, I'd like to show the second window's content (really just the parent UserControl), in the manner like a picture-in-picture TV. In this way the user could view the first window, and see what is happening in the second window at the same time. Note, that I do not want two independent copies of this second window's UserControl (that would be easy), but to mirror the content of the second window in the first window.

This is vaguely similar to the Windows 7 Taskbar thumbnail previews, so I figure that it must be doable. Ideally, however, I'd also like to be able to interact with that window-in-a-window, in the same way as I would if I were to pull up the original window.

This is similar to this question, except that I'd like just a single window from the same application to be copied, instead of the whole desktop. Also similar to this question, but I need a bit more hand-holding, as I'm not super-familiar with C#/WPF. Some code snippets would be great.

Thank you in advance!

Answer 1

Use a visual brush. It will not be interactive, but that seems to suit your needs.

Paste this code into Kaxaml to see it in action.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="sampleAnimation" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(RotateTransform.Angle)">
                        <DoubleAnimation Duration="00:00:10" RepeatBehavior="Forever" To="-360">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Page.Triggers>
    <Page.Resources>
        <VisualBrush x:Key="contentBrush" Stretch="None" Visual="{Binding ElementName=content}"/>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock FontSize="25" Text="Content to mirror:"/>
        <Grid
            x:Name="content"
            Grid.Row="1"
            Margin="5"
            Background="#11000000"
            ClipToBounds="True">
            <TextBox
                x:Name="sampleAnimation"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="60"
                FontWeight="Light"
                Foreground="Red"
                RenderTransformOrigin="0.5,0.5"
                Text="Hello!">
                <TextBox.RenderTransform>
                    <RotateTransform Angle="0"/>
                </TextBox.RenderTransform>
            </TextBox>
        </Grid>
        <TextBlock Grid.Row="2" FontSize="25" Text="Mirrored content using VisualBrush:"/>
        <Grid Grid.Row="3" Background="{StaticResource contentBrush}">
        </Grid>
    </Grid>
</Page>