Is it possible to duplicate the XAML / WPF window in the second window, for example, in a picture in a picture?

Question

I have an application with two XAML / WPF windows (derived from NavigationWindow), each window contains one parent UserControl, which contains all the child controls. In one of the windows, I would like to show the second content of the window (really only the parent UserControl), thus, like picture in picture. Thus, the user can view the first window and see what happens in the second window at the same time. Note that I do not need two independent copies of this second UserControl window (that would be easy), but to reflect the contents of the second window in the first window.

This is a bit like a thumbnail preview in the Windows 7 taskbar, so I suppose this should be doable. Ideally, however, I would also like to be able to interact with this window in a window, just as if I could pull up the original window.

This is similar to this question , except that I would like only one window from the same application to be copied, and not the entire desktop. Also similar to this question , but I need to hold my hands a bit more since I'm not very familiar with C # / WPF. Some code snippets will be great.

Thank you in advance!

Answer 1

Use a visual brush. It will not be interactive, but it, in your opinion, meets your needs.

Paste this code in 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> 

Answer 2

Use the visual brush as a fill on the rectangle.

You won’t be able to interact with it, though ... but that’s how the preview thumbnails in the taskbar are executed.

 <Grid HorizontalAlignment="Left" Name="A" Height="100" Width="100"> <Grid.Background> <SolidColorBrush Opacity="0" Color="White"/> </Grid.Background> <!-- Contents --> </Grid> <Rectangle Name="RA" VerticalAlignment="Top" Width="100" Height="100" HorizontalAlignment="Left" Stroke="Black"> <Rectangle.Fill> <!-- Creates the reflection. --> <VisualBrush AutoLayoutContent="True" Visual="{Binding ElementName=A}" ViewboxUnits="RelativeToBoundingBox" ViewportUnits="RelativeToBoundingBox" Stretch="Fill" AlignmentX="Left" AlignmentY="Top" Viewport="0,0,1,1" Viewbox="0,0,1,1" TileMode="None"> </VisualBrush> </Rectangle.Fill> </Rectangle> 

To interact, you will have to bind all the properties to the same screen and use the layout transform to compress it.

 <StackPanel> <Grid> <TextBox Name="A"/> </Grid> <Grid> <Grid.LayoutTransform> <ScaleTransform CenterX=".5" CenterY=".5" ScaleX=".25" ScaleY=".25"/> </Grid.LayoutTransform> <TextBox Name="B" Text="{Binding ElementName=A, Path=Text, UpdateSourceTrigger=PropertyChanged}"/> </Grid> </StackPanel>