wpf: MahApps.Metro.SimpleChildWindow as a new window - wpf

Question

I have an existing WPF MainWindow.xaml with a defined grid. In one of these grid-fields is a button which opens the following "ChildWindow":
<Controls:MetroWindow x:Class="RFM_data_analyzer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:oxy="http://oxyplot.org/wpf"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:simpleChildWindow="clr-namespace:MahApps.Metro.SimpleChildWindow;assembly=MahApps.Metro.SimpleChildWindow"
Title="RFM data analyzer (WPF)"
WindowStyle="ThreeDBorderWindow" ResizeMode="CanResize"
WindowStartupLocation="CenterScreen" WindowState="Maximized" Height="855" Width="1024">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<!-- Definition of Rows and Columns -->
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="250" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<!-- Here are some other, uninteresing code lines -->
<simpleChildWindow:ChildWindow x:Name="ChartControllings"
CloseByEscape="False"
ChildWindowWidth="400"
ChildWindowHeight="300"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
ChildWindowImage="Error"
Title="Chart Controllings">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Margin="20"
FontSize="36"
FontWeight="Thin"
Text="awesome!" />
<TextBox Grid.Row="1" />
<Button Grid.Row="2"
Margin="20"
IsDefault="True"
VerticalAlignment="Top"
FontSize="20"
FontWeight="Thin"
Content="Close Me"/>
</Grid>
</simpleChildWindow:ChildWindow>
</Grid>
</Controls:MetroWindow>
Source is here: MahApps.Metro.SimpleChildWindow
If I include the code within the grid area of the MainWindow.xaml as seen above, the window opens in Grid.Row="0" Grid.Column="0" by default instead of being a independent new window in the center of the screen exactly like the demo project. I have both projects side by side but cannot see the difference. Can anyone help me?
Thank you!

Answer 1

You defined rows and columns in your root grid, so you should say this to the child window with Grid.ColumnSpan and Grid.RowSpan:
<simpleChildWindow:ChildWindow x:Name="ChartControllings"
Grid.ColumnSpan="6"
Grid.RowSpan="6"
CloseByEscape="False"
ChildWindowWidth="400"
ChildWindowHeight="300"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
ChildWindowImage="Error"
Title="Chart Controllings">
or you insert another Grid and do it like so:
<Grid>
<Grid>
<!-- Definition of Rows and Columns -->
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="250" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<!-- Here are some other, uninteresing code lines -->
</Grid>
<simpleChildWindow:ChildWindow x:Name="ChartControllings"
CloseByEscape="False"
ChildWindowWidth="400"
ChildWindowHeight="300"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
ChildWindowImage="Error"
Title="Chart Controllings">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Margin="20"
FontSize="36"
FontWeight="Thin"
Text="awesome!" />
<TextBox Grid.Row="1" />
<Button Grid.Row="2"
Margin="20"
IsDefault="True"
VerticalAlignment="Top"
FontSize="20"
FontWeight="Thin"
Content="Close Me"/>
</Grid>
</simpleChildWindow:ChildWindow>
</Grid>
Hope that helps!