Split the window vertically in XAML - xaml

Question

I want to split my window in 2 parts side by side, like the picture below. On each side I have a SwapChainPanel and a StackPanel with a TextBlock, a TextBox and a Button.
Below that, I have a console (TextBlock) which takes up the entire width of the window.
How can I do that in XAML?
I have this but it does not split the window into 2 equal parts:
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" >
<TextBlock />
</StackPanel>
</StackPanel>

Answer 1

StackPanel are for stacking Items One after another or one below another. So you will not get exact split. For that you Need to use Grid.
I marked up a basic XAML based on your Screenshot.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="5,5,2.5,5" Grid.Row="0" Grid.Column="0" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_L" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 1: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Blue" BorderThickness="2.5,5,5,5" Grid.Row="0" Grid.Column="1" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_R" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 2: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Green" BorderThickness="5" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,5,0,0" Padding="5">
<TextBox Text="> Console" Foreground="Green" />
</Border>
</Grid>
Which Renders to