Replace contents WPF grid control by grid in other XAML file

Question

Hello, I'm trying to replace the content of a WPF grid control by another WPF grid defined in a second XAML file in code (c#).

(simplified example) Window1.xaml:

<Window x:Class="Demo1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="_Set Grid" Click="MenuItem_Click" />
    </Menu>
    <StatusBar DockPanel.Dock="Bottom">
        <StatusBarItem Name="statusItem">Status</StatusBarItem>
    </StatusBar>
    <Grid Name="header" DockPanel.Dock="Top">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Name="txtHi" Grid.Row="0" Grid.Column="0">Hi</TextBlock>
        <TextBlock Name="txtName" Grid.Row="0" Grid.Column="1">X</TextBlock>
    </Grid>
    <Grid Name="gridContent">

    </Grid>
</DockPanel>

Windows2.xaml contains the grid that replaces gridContent

<Window x:Class="Demo1.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<Grid Name="grid2">
    <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="1" Grid.Row="1">Hello !!!</Label>
</Grid>

The MenuItem_Click event in the code behind Windows1.xaml.cs contains:

private void MenuItem_Click(object sender, RoutedEventArgs e)
    {
        Window2 win2 = new Window2();
        gridContent = win2.grid2;
        setStatus();
    }

    private void setStatus() {
        statusItem.Content = "gridContent has " + gridContent.RowDefinitions.Count + " rows and " + gridContent.ColumnDefinitions.Count + " columns.";
    }

Although the statusItem say the gridContent contains 2 rows and 2 columns after a click on the menu, the window is not changed and does not contain the text Hello!!!

Any ideas what I'm doing wrong? If there are better solutions to "embed" a grid from a second xaml file, please let me know.

Thanks, Robbie

Answer 1

Replacing the value of the gridContent variable cannot have an effect on the controls tree. You must first disconnect the grid2 from its parent and then add it to the children of gridContent, like this:

win2.Content = null;
gridContent.Children.Add(win2.grid2);

This works (I tried), but it is not the recommended way to create a Window, extract its content then place it in another window. You should use a UserControl in place of Window2 and then you can put it directly inside gridContent.