How to create second window that shows part of main window

Question

I have application with WPF Ribbon and Grid. And I need to show this Grid not only in main application window but also on second window. This Grid contain a lot of elements like ToggleButtons, TextBoxes, Images. Scheme of my application code looks like that:

<ribbon:RibbonWindow
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        [...]
        xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        Title="MainWindow"
        x:Name="RibbonWindow"
        Height="870" Width="1000">

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ribbon:Ribbon x:Name="Ribbon">
        [...]
        </ribbon:Ribbon>

        <Grid Background="#FF5C5C5C" Height="765" Width="986" Grid.Row="1" Margin="0,0,-2,-70" x:Name="MainGrid">
            <ToggleButton/>
            <TextBlock />
            <ToggleButton/>
            <Rectangle />
            [...]
         </Grid>

    </Grid>
</ribbon:RibbonWindow>

MainGrid is the Grid that I want to show in second window. It can even be only view of this Grid. But when I change something in first window, like write something in TextBox or click on ToggleButton, I need to have it visible on second screen too.

Answer 1

Umm this is going to be tricky. What I would do is create a UserControl with the Grid and then put one UserControl in Window1 and another in Window2. But to synchronize the state of the Window1-Grid and the Window2-Grid you will have to bind them to the same object.

Edit: Here, cooked up an example for you

Step 1: Put the Grid into a UserControl so it can be reused.

Notice I set the UpdateSourceTrigger property on the binding to PropertyChanged, this updates the source object as the user is typing, so we will see changes in Window2 as they are happening in Window1.

CommonGrid.xaml

<UserControl x:Class="WindowSync.CommonGrid"
             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">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"  />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="5">
            <TextBlock Text="Name: " />
            <TextBox Width="200" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" />
        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="5">
            <CheckBox IsChecked="{Binding IsAdmin, UpdateSourceTrigger=PropertyChanged}" />
            <TextBlock Text=" Is Admin" />
        </StackPanel>
    </Grid>
</UserControl>

Step 2: Put the UserControl into the desired windows.

Note: you have to reference the namespace that UserControl is in, in this case the namespace is WindowSync, this line lets us user the namespace xmlns:app="clr-namespace:WindowSync".

Window1.xaml

<Window x:Class="WindowSync.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:app="clr-namespace:WindowSync"
        Title="Window 1" Height="200" Width="400">
    <app:CommonGrid x:Name="Window1Grid" />
</Window>

Windo1.xaml.cs

    public Window1()
    {
        InitializeComponent();
        Window1Grid.DataContext = Person.User; // bind the UserControl in Window1 to the an object
        new Window2().Show(); // create an instance of window 2 and show it
    }

Window2.xaml

<Window x:Class="WindowSync.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:app="clr-namespace:WindowSync"
        Title="Window 2" Height="200" Width="400">
    <app:CommonGrid x:Name="Window2Grid" />
</Window>

Window2.xaml.cs

    public Window2()
    {
        InitializeComponent();
        Window2Grid.DataContext = Person.User; // bind the UserControl in Window2 to the same object
    }

Person.cs

I just created a random object called person for the demonstration.

Note: you have to implement the INotifyPropertyChanged interface on your object, and raise the appropriate PropertyChanged event whenever something is changed, this is what let's us synchronize the two grids. Window1 changes something, the PropertyChanged event gets fired, Window2 picks it up and makes the changes.

public class Person : INotifyPropertyChanged
{
    public static Person User = new Person();

    #region Name
    private string _Name;
    public string Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            OnPropertyChanged("Name");
        }
    }
    #endregion

    #region IsAdmin
    private bool _IsAdmin;
    public bool IsAdmin
    {
        get { return _IsAdmin; }
        set
        {
            _IsAdmin = value;
            OnPropertyChanged("IsAdmin");
        }
    }
    #endregion

    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string property)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(property));
    }
    #endregion
}

Anywyas, I hope this helps you out. I uploaded a zipped version of the project if you get stuck. http://www.mediafire.com/?yv84xbben6tjdy7

Good luck.