Synchronize second window size to match main window size

Question

I have tried Export resource in the ResizeMode of the MainWindow properties thinking the data could be binding with my Window2 ResizeMode property, but it doesn't match the grab and drag location/value, it just matches the property value, in this case being 'CanResizeWithGrip' that I have assigned to the MainWindow. So I end up with a grip for both windows and Window2 doesn't match the resize of the MainWindow. I would like to automatically shrink / enlarge my Window2 when I click and drag the resize grip on the MainWindow. I wasn't able to really grasp the LocationChanged or SizeChanged handles and how they should be used in this case. My MainWindow has an video file feed with VLC plugin, and my Window2 has a transparent background and overlaying Toggle button and an Exit button. Any suggestions / definitive examples would be helpful if any one can help.

MainWindow:

namespace VLC_Test
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
  public partial class MainWindow : Window
  {
    AxAXVLC.AxVLCPlugin vlcPlayer = new AxAXVLC.AxVLCPlugin();

    public MainWindow()
    {
        InitializeComponent();
        WFH1.Child = vlcPlayer;           

    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        Window2 win2 = new Window2();
        win2.Show();

        string file1 = @"C:\Users\Username\Desktop\drop.avi";

        vlcPlayer.addTarget("file:///" + file1, null, AXVLC.VLCPlaylistMode.VLCPlayListReplaceAndGo, 0);
        vlcPlayer.play();
    }    
  }
}

XAML:

<Window x:Class="VLC_Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" SizeToContent="WidthAndHeight"
    WindowStartupLocation="Manual" 
    Top="0" Left="7" AllowsTransparency="False" WindowStyle="None" Loaded="Window_Loaded" Topmost="True" ShowInTaskbar="False" BorderThickness="0" ResizeMode="CanResizeWithGrip">


<Window.Background>
    <SolidColorBrush Opacity="0" Color="White"/>
</Window.Background>


  <Grid Width="Auto" Height="Auto">
    <WindowsFormsHost Height="495" Width="550" HorizontalAlignment="Left" Name="WFH1" VerticalAlignment="Top" Margin="-11,-24,0,0" ChildChanged="WFH1_ChildChanged" />                
  </Grid>
</Window>

Window2:

namespace VLC_Test
{
/// <summary>
/// Interaction logic for Window2.xaml
/// </summary>
  public partial class Window2 : Window
  {

    public Window2()
    {
        InitializeComponent();
    }



    private void Window_Loaded(object sender, RoutedEventArgs e)
    {

    }

    private void button2_Click(object sender, RoutedEventArgs e)
    {

       this.Close();
       App.Current.Shutdown();
    }

  }
}

XAML:

<Window x:Class="VLC_Test.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="495" Width="550"
    WindowStartupLocation="Manual" 
    Top="0" Left="7" AllowsTransparency="True" WindowStyle="None" Topmost="True" >

<Window.Background>
    <SolidColorBrush Opacity="0" />
</Window.Background>

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>

<Grid Width="Auto" Height="Auto">
    <ToggleButton Content="Crosshair" Height="39" HorizontalAlignment="Right" Margin="0,0,125,12" Name="Button1" VerticalAlignment="Bottom" Width="58" Click="button1_Click" IsChecked="False" DataContext="{Binding}"/>
    <Button Content="Exit" Height="39" HorizontalAlignment="Right" Margin="0,0,49,12" Name="button2" VerticalAlignment="Bottom" Width="58" Click="button2_Click" />

    <Canvas Background="Transparent" Height="200" Width="200" HorizontalAlignment="Center" Margin="0,0,0,0" Name="Canvas1" VerticalAlignment="Center" Visibility="{Binding IsChecked, ElementName=Button1, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Line X1="100" Y1="0" X2="100" Y2="75" Stroke="Red" StrokeThickness="0.95" />
        <!--Top long vertical line> /-->
        <Line X1="100" Y1="95" X2="100" Y2="105" Stroke="Red" StrokeThickness="0.95" />
        <!--Crosshair vertical line> /-->
        <Line X1="100" Y1="125" X2="100" Y2="200" Stroke="Red" StrokeThickness="0.95" />
        <!--Bottom long vertical line> /-->
        <Line X1="0" Y1="100" X2="75" Y2="100" Stroke="Red" StrokeThickness="0.75" />
        <!--Left long horizontal line> /-->
        <Line X1="95" Y1="100" X2="105" Y2="100" Stroke="Red" StrokeThickness="0.75" />
        <!--Crosshair horizontal line> /-->
        <Line X1="125" Y1="100" X2="200" Y2="100" Stroke="Red" StrokeThickness="0.75" />
    </Canvas>

  </Grid>

</Window>

Answer 1

I would simply use the SizeChanged event. Change your MainWindow XAML to include a call to the event handler. (Similarly, if you want to keep the two windows together when your MainWindow is moved, use the LocationChanged event, also shown.):

<Window x:Class="VLC_Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" SizeToContent="WidthAndHeight"
    WindowStartupLocation="Manual" 
    Top="0" Left="7" AllowsTransparency="False" WindowStyle="None" Loaded="Window_Loaded" Topmost="True" ShowInTaskbar="False" BorderThickness="0" ResizeMode="CanResizeWithGrip"
    SizeChanged="Window_Resize" LocationChanged="Window_Moved">

    <Window.Background>
        <SolidColorBrush Opacity="0" Color="White"/>
    </Window.Background>


    <Grid Width="Auto" Height="Auto">
        <WindowsFormsHost Height="495" Width="550" HorizontalAlignment="Left" Name="WFH1" VerticalAlignment="Top" Margin="-11,-24,0,0" ChildChanged="WFH1_ChildChanged" />                
    </Grid>
</Window>

Then in your cs file for MainWindow, implement the event. Notice that I kept a variable on the window to store your Window2 object so I could refer back to it after it had been loaded.

namespace VLC_Test
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
  public partial class MainWindow : Window
  {
    AxAXVLC.AxVLCPlugin vlcPlayer = new AxAXVLC.AxVLCPlugin();
    Window2 win2;

    public MainWindow()
    {
        InitializeComponent();
        WFH1.Child = vlcPlayer;           

    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        CreateWindow2Overlay();

        string file1 = @"C:\Users\Username\Desktop\drop.avi";

        vlcPlayer.addTarget("file:///" + file1, null,     AXVLC.VLCPlaylistMode.VLCPlayListReplaceAndGo, 0);
        vlcPlayer.play();
    }  

    private void CreateWindow2Overlay()
    {
        win2 = new Window2();
        win2.Left = Left;
        win2.Top = Top;
        win2.Width = Width;
        win2.Height = Height;
        win2.Owner = this;
        win2.Show();
    }  

    private void Window_Resize(object sender, SizeChangedEventArgs e)
    {
        if (win2 != null)
        {
            win2.Height = e.NewSize.Height;
            win2.Left = Left;
            win2.Width = e.NewSize.Width;
            win2.Top = Top;
        }
    }

    private void Window_Moved(object sender, EventArgs e)
    {
        if (win2 != null)
        {
            win2.Left = Left;
            win2.Top = Top;
        }
    }
  }
}

All changes made to the code for MainWindow. I did not change the cs or xaml for Window2.

This solution tested in Visual Studio 2010. Note that I added the CreateWindow2Overlay method which sets up the second window. It specifically sets the owner of Window2 to this (MainWindow) so as to put Window2 in front of MainWindow.

To be clear, the problems this change solves are: 1. Put Window2 object on top of MainWindow 2. Change Window2 size when MainWindow resized

If there is any part of your request which I am missing, please don't hesitate to point it out.

I hope that helps you.