Question

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

<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有什么问题？哪些布局面板用于对齐多个组件？

enter image description here

Answer 1

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

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

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

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

为了获得理想的结果，可能还有很多其他方法可以做到这一点。

Answer 2

问题是Grid是一个可容纳多个元素的容器，默认情况下它们放在Grid = 0，Column = 0。

由于您尚未定义行或列，并且未使用Grid.Row和Grid.Column附加属性指定堆栈面板的放置位置，因此它们出现在同一位置。

在网格中，您可以看到同一单元格中的多个元素重叠。

你可以找到其他答案的例子，我想解释为什么这种情况。

Answer 3

试试这个...... 刚用stackpanel替换你的网格

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

或试试这个

<Grid>
 <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>
        <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" Grid.Row="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>

将堆叠面板并排放置

3 个答案: