在 XAML 中垂直拆分 window

Question

我想将我的 window 并排分成两部分，如下图所示。在每一侧我都有一个 SwapChainPanel 和一个 StackPanel 以及一个 TextBlock、一个 TextBox 和一个 Button.

在此之下，我有一个控制台 (TextBlock)，它占据了 window.

的整个宽度

我如何在 XAML 中做到这一点？

我有这个，但它没有将 window 分成 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 用于一个接一个或一个接一个地堆叠物品。所以你不会得到精确的分割。为此，您需要使用 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>

渲染到

在 XAML 中垂直拆分 window

Split the window vertically in XAML

xaml

uwp

uwp-xaml