c# - 在 WPF 中，有没有办法让 StackPanel 像网格一样对齐列？

Question

例如我可以做这样的事情：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Width="Auto">
        <RowDefinition Width="Auto">
        <RowDefinition Width="Auto">
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0">Header 1</TextBlock>
    <TextBox Grid.Row="0" Grid.Column="1" MaxLines="1" />
    <Button Grid.Row="0" Grid.Column="2">Send</Button>
    <Button Grid.Row="0" Grid.Column="3">Save</Button>
    <TextBlock Grid.Row="1" Grid.Column="0">Header 2</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="1" MaxLines="1" />
    <Button Grid.Row="1" Grid.Column="2">Send</Button>
    <Button Grid.Row="1" Grid.Column="3">Save</Button>
    <TextBlock Grid.Row="2" Grid.Column="0">Header 3</TextBlock>
    <TextBox Grid.Row="2" Grid.Column="1" MaxLines="1" />
    <Button Grid.Row="2" Grid.Column="2">Send</Button>
    <Button Grid.Row="2" Grid.Column="3">Save</Button>
</Grid>

或者我可以这样做：

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock>Header 1</TextBlock>
        <TextBox MaxLines="1" />
        <Button>Send</Button>
        <Button>Save</Button>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock>Header 2</TextBlock>
        <TextBox MaxLines="1" />
        <Button>Send</Button>
        <Button>Save</Button>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock>Header 3</TextBlock>
        <TextBox MaxLines="1" />
        <Button>Send</Button>
        <Button>Save</Button>
    </StackPanel>
<StackPanel>

除了我希望能够像在 StackPanel 中一样轻松地操作行（添加新行、移动行等），同时像在 Grid 中一样保持列正确对齐。

score 4 · Accepted Answer

您可以在列上使用许多Grids具有大小共享的单行。在没有任何控件的情况下完成时会变得冗长，因此您可以将一些逻辑（如创建列和分配Grid.Column）封装在派生属性ItemsControl或附加属性中。

score 4 · Accepted Answer

这是我为了大致相同的目的而组合在一起的一个类 - 本质上，我希望能够在左列中放置一堆标签，在右侧放置不同类型的值（文本框、下拉列表等）。

它只有两列，但可以适应不同的数字。

public class LabelValueGrid : Grid
{
    public LabelValueGrid()
        : base()
    {
        ColumnDefinitions.Add(new ColumnDefinition());
        ColumnDefinitions.Add(new ColumnDefinition());
        ColumnDefinitions[0].Width = new System.Windows.GridLength(1, System.Windows.GridUnitType.Auto);
        ColumnDefinitions[1].Width = new System.Windows.GridLength(1, System.Windows.GridUnitType.Star);
    }

    protected override void OnVisualChildrenChanged(System.Windows.DependencyObject visualAdded, System.Windows.DependencyObject visualRemoved)
    {
        base.OnVisualChildrenChanged(visualAdded, visualRemoved);

        int curRow = -1;
        int curCol = 1;

        RowDefinitions.Clear();

        if (Children != null)
            foreach (System.Windows.UIElement curChild in Children)
            {
                if (curCol == 0)
                    curCol = 1;
                else
                {
                    curCol = 0;
                    curRow++;
                    RowDefinitions.Add(new RowDefinition() {Height = new System.Windows.GridLength(1, System.Windows.GridUnitType.Auto)});
                }

                Grid.SetRow(curChild, curRow);
                Grid.SetColumn(curChild, curCol);
            }

        RowDefinitions.Add(new RowDefinition() {Height = new System.Windows.GridLength(1, System.Windows.GridUnitType.Star)});
    }
}

我可以像网格一样使用它，除了我只列出控件，然后它会自动交替列：

<local:LabelValueGrid>
    <TextBlock Text="Label1"/>
    <TextBox Name="value1"/>
    <TextBlock Text="Label2"/>
    <TextBox Name="value2"/>
</local:LabelValueGrid>

score 0 · Accepted Answer

这是垂直 StackPanel 的一些可重现代码，该代码具有使用 SharedSizeGroups 的对齐列，正如其他答案所暗示的那样。它不需要任何代码隐藏，但如果您希望动态创建面板，您可以添加它：

<Grid Grid.IsSharedSizeScope="True">

<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" Grid.ColumnSpan="1">

    <!-- ROW 0 -->

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="FirstRow"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstColumn" />
            <ColumnDefinition SharedSizeGroup="SecondColumn" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0">
            0-0 With extra width 
        </TextBlock>
        <TextBox Grid.Column="1">
            0,1
        </TextBox>
    </Grid>

    <!-- ROW 1 -->

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="FirstRow"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstColumn"  />
            <ColumnDefinition SharedSizeGroup="SecondColumn"  />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" HorizontalAlignment="Left">
            1-0
        </TextBlock>
        <TextBox Grid.Column="1">
            1,1 With extra width
        </TextBox>
    </Grid>

</StackPanel>

请注意SharedSizeGroup每列的标签和启用此类逻辑的最顶部网格Grid.IsSharedSizeScope="True"。创建以下图像：

c# - 在 WPF 中，有没有办法让 StackPanel 像网格一样对齐列？

3 回答 3

Related

Reference