Question

我想将窗口分成两部分，如下图所示。在每一方面，我都有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>

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中垂直拆分窗口

1 个答案: