并排放置堆叠面板 [英] Putting Stack Panels side by side

问题描述

我需要将控件分组并将它们并排放置.我想出了这个代码来使用多个 StackPanel 来做到这一点.

I need to put controls grouped and put them side by side. And I came up with this code to use multiple StackPanel to do that.

<Window x:Class="xamlTests.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="310" Width="525">
    <Grid>

        <StackPanel x:Name="_ribbonRadioButtonPanel" Orientation="Vertical">
            <CheckBox Content="Signed" Height="16" Name="Signed" Checked="Signed_Checked" Margin="10,5"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockWordLength" Text="Word Length" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxIntegerWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockIntegerWordLength" Text="Integer Word Length" Width="120"/>
            </StackPanel>
        </StackPanel>

        <StackPanel x:Name="_ribbonRadioButtonPanel2">
            <StackPanel x:Name="_max" Orientation="Horizontal">
                <TextBox Height="18" Name="maxTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="maxTextBlock" Text="Max" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_min" Orientation="Horizontal">
                <TextBox Height="18" Name="minTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="minTextBlock" Text="Min" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_delta" Orientation="Horizontal">
                <TextBox Height="18" Name="deltaTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="delatTextBlock" Text="Delta" Width="120"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

然而，我得到了 StackPanels 的过度应用.XAML 有什么问题?哪些布局面板用于对齐多个组件?

However, I got StackPanels overapped. What's wrong with the XAML? What layout panels are used for aligning multiple components?

推荐答案

您可以执行以下操作...

You could do the following...

        <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="_ribbonRadioButtonPanel" Orientation="Vertical" Grid.Column="0">
            <CheckBox Content="Signed" Height="16" Name="Signed" Checked="Signed_Checked" Margin="10,5"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockWordLength" Text="Word Length" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxIntegerWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockIntegerWordLength" Text="Integer Word Length" Width="120"/>
            </StackPanel>
        </StackPanel>
        <StackPanel x:Name="_ribbonRadioButtonPanel2" Grid.Column="1">
            <StackPanel x:Name="_max" Orientation="Horizontal">
                <TextBox Height="18" Name="maxTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="maxTextBlock" Text="Max" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_min" Orientation="Horizontal">
                <TextBox Height="18" Name="minTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="minTextBlock" Text="Min" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_delta" Orientation="Horizontal">
                <TextBox Height="18" Name="deltaTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="delatTextBlock" Text="Delta" Width="120"/>
            </StackPanel>
        </StackPanel>
    </Grid>

这会将控件放入单独的列中，以便它们不会重叠.另一种方法是将堆栈面板放入其方向设置为水平的堆栈面板中，如下所示...

This will put the controls into separate columns so that they do not overlap. Another approach is to put the stack panels into a stackpanel that has its orientation set to horizontal like the following...

        <StackPanel Orientation="Horizontal">
        <StackPanel x:Name="_ribbonRadioButtonPanel" Orientation="Vertical" Grid.Column="0">
            <CheckBox Content="Signed" Height="16" Name="Signed" Checked="Signed_Checked" Margin="10,5"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockWordLength" Text="Word Length" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal">
                <TextBox Height="18" Name="textBoxIntegerWordLength" Width="30" Margin="10,5"/>
                <TextBlock Height="20" Name="textBlockIntegerWordLength" Text="Integer Word Length" Width="120"/>
            </StackPanel>
        </StackPanel>
        <StackPanel x:Name="_ribbonRadioButtonPanel2" Grid.Column="1">
            <StackPanel x:Name="_max" Orientation="Horizontal">
                <TextBox Height="18" Name="maxTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="maxTextBlock" Text="Max" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_min" Orientation="Horizontal">
                <TextBox Height="18" Name="minTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="minTextBlock" Text="Min" Width="120"/>
            </StackPanel>
            <StackPanel x:Name="_delta" Orientation="Horizontal">
                <TextBox Height="18" Name="deltaTextBox" Width="100" Margin="10,5"/>
                <TextBlock Height="20" Name="delatTextBlock" Text="Delta" Width="120"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>

可能还有许多其他方法可以做到这一点，以获得所需的结果.

There are probably numerous other ways of doing this as well to get the desired result.

这篇关于并排放置堆叠面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！