How to embed WPF Window into another Window and adjust its size via XAML or code

Question

First of all it's my first day using Xaml so this question might be dummy for you, but i totally got lost.

Overview

My technique is that i have MainWindow.xaml and it's split into three areas (using grid columns) the columns width being set automatically.

Based on some actions in the right column, the middle column with show a page let's say Page.xaml that exists in different namespace.

What i'm seeking for

The problem is i need to set the width and height for this page to be equal the middle column width and height as it will fit this area.

Notes

I have very small experience with xaml and binding techniques.

MainWindow.Xaml

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 
    WindowState="Maximized"
    ResizeMode="NoResize"
    WindowStartupLocation="CenterScreen"
    Title="MainWindow" d:DesignWidth="1366" d:DesignHeight="768">

<Grid x:Name="MainGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1.2*" x:Name="LeftColoumn" />
        <ColumnDefinition Width="3*" x:Name="CenterColoumn" />
        <ColumnDefinition Width=".8*" x:Name="RightColoumn" />
    </Grid.ColumnDefinitions>

    <ScrollViewer Grid.Column="2">
        <StackPanel Orientation="Vertical" x:Name="RightStackPanel" Background="LightGray" >
            <Border BorderBrush="{x:Null}" Height="50" >
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontWeight="SemiBold" FontStyle="Normal" Margin="3" FontSize="20" >Others</TextBlock>
            </Border>
            <Expander x:Name="Expander1" Header="Others" Margin="0,0,10,0">
                <Button  Margin="0,0,0,0"  Width="{Binding ActualWidth, ElementName=RightStackPanel}" Background="White" Content="Add" Height="50" Click="Button_Click" ></Button>
            </Expander>

        </StackPanel>
    </ScrollViewer>

    <Frame  Grid.Column="0" x:Name="LeftFrame" Background="LightGray"  ></Frame>
    <Frame  Grid.Column="1" x:Name="CenterFrame" Background="DarkGray" ></Frame>

</Grid></Window>

Other Xaml file

<Page
  x:Name="Page"
  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" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d"
  Title="Any" d:DesignWidth="1364" d:DesignHeight="868"
  >

<Grid>
    <Frame   Background="DarkGray" />

</Grid></Page>

MainWindow.xaml.cs

private void Button_Click(object sender, RoutedEventArgs e)
    {
        Frame middleFrame=CenterColumn;
        Otherxaml other=new Otherxaml();
        middleFrame.Source = new Uri("OtherxamlPage.xaml", UriKind.RelativeOrAbsolute);
    }

Answer 1

Pertinent to your code snippet, you may place the OtherxamlPage.xaml inside the central frame and set the properties of that frame like shown below:

<Frame  Grid.Column="1" x:Name="CenterFrame" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch"  HorizontalContentAlignment="Center" Source="OtherxamlPage.xaml" Background="DarkGray" />

You can set the Source="OtherxamlPage.xaml" dynamically in event handler, e.g. Button.Click as per your example.

Alternatively, consider the creation of WPF UserControl (re: https://msdn.microsoft.com/en-us/library/cc294992.aspx) instead of that other XAML Window (or Page) and place it directly into the grid cell. In both cases set the content "Stretch" property in order to adjust its size automatically, thus you won't need to specify it in the code.

Hope this may help.