XAMLでウィンドウを垂直に分割する

Question

下の図のようにウィンドウを2つに分割したいと思っています。それぞれの側に私は、TextBoxとButtonを持つSwapChainPanelとStackPanelを持っています。

以下では、ウィンドウの幅全体を占めるコンソール（TextBlock）があります。

私はXAMLでそれをどのように行うことができますか？

私はこれを持っているが、それは2等分にウィンドウを分割しません：

<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はアイテム次々または別の下の1を積み重ねるためのものです。だから、あなたは正確に分割されません。そのためには、Gridを使用する必要があります。

スクリーンショットに基づいて基本的なXAMLをマークアップしました。

にレンダリングし

<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>