在 XAML 中垂直拆分窗口答案

【问题标题】：Split the window vertically in XAML在 XAML 中垂直拆分窗口
【发布时间】：2017-09-30 04:36:00
【问题描述】：

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

在它下面，我有一个控制台 (TextBlock)，它占据了窗口的整个宽度。

如何在 XAML 中做到这一点？

我有这个，但它不会将窗口分成两等份：

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

【问题讨论】：

标签： xaml uwp uwp-xaml

【解决方案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>

呈现给哪个

【讨论】：