WPFXAML：如何為多行創建布局，每行不同的列布局

我正在努力獲得遵循約束的簡單布局：

1：一行中的控制元件不要垂直擴展占據整個視窗，而是保持整行的高度；這通常通過使用來補救VerticalAlignment="Top"

2：每一行可以有任意數量的固定寬度的專案；每個專案可以有不同的固定寬度

3：每一行可以有 1 個或多個用戶控制元件，它們應該水平擴展以適應剩余寬度，即使在視窗調整大小時也是如此

4：#3中的每個控制元件都可以指定均勻分布，或n *，寬度

5：每行可以有不同的柱狀線（不覆寫完美的網格）

6：我應該能夠在行之間有空行/間隔符

使用Grid似乎不起作用：

• 我無法預定義每一列
• Width不允許*在組件級別使用說明符

StackPanelDockPanel讓我在那里，但不是真的

總的來說，我最終得到的是組件堆疊在一起，控制元件不會擴展以填充剩余空間。

這是一個視覺幫助。請記住，根據#5，列不一定會排列（這張圖片只是使用 Excel 模擬它的副作用）

每個“操作方法”或“示例”都顯示 1 行，而不是多行，不涉及可變列定義，或跳過占用可變寬度/擴展的控制元件。我錯過了什么？

感謝您的幫助或指導。

uj5u.com熱心網友回復：

由于您不需要匹配列寬，而不是一個普通的 Grid，在我看來，您應該為每一行使用一個單獨的單行 Grid。

為了簡化標記，您可以創建自己的自定義網格，根據子項的數量添加列并從中接收列寬。

這是一個實作示例。
只是不要把它當作一個完整的解決方案。這只是一個可能選項的演示。
此實作中可能存在錯誤或錯誤。
我還沒有完全測驗這段代碼。

using System;
using System.Windows;
using System.Windows.Controls;

namespace Core2022.SO.Adam_L
{
    public partial class RowStackGrid : Grid
    {
        protected override Size ArrangeOverride(Size arrangeSize)
        {
            Dispatcher.BeginInvoke((Action)ReValidate);
            return base.ArrangeOverride(arrangeSize);
        }

        private void ReValidate()
        {
            var columns = ColumnDefinitions;
            int columnsCount = columns.Count;
            var children = Children;
            int childrenCount = children.Count;

            if (RowDefinitions.Count > 1)
            {
                RowDefinitions.Clear();
            }


            if (columnsCount > childrenCount)
            {
                for (int i = columnsCount; i > childrenCount; i--)
                {
                    ColumnDefinitions.RemoveAt(i);
                }
            }
            else if (columnsCount < childrenCount)
            {
                for (int i = childrenCount; i > columnsCount; i--)
                {
                    ColumnDefinitions.Add(new ColumnDefinition());
                }
            }


            for (int i = 0; i < childrenCount; i  )
            {
                GridLength columnWidth = GetColumnWidth(children[i]);
                if (columns[i].Width != columnWidth)
                {
                    columns[i].Width = columnWidth;
                }
                int column = GetColumn(children[i]);
                if (column != i)
                {
                    SetColumn(children[i], i);
                }
                if (children[i] is FrameworkElement fwElement &&
                    fwElement.ReadLocalValue(VerticalAlignmentProperty) == DependencyProperty.UnsetValue)
                {
                    fwElement.VerticalAlignment = VerticalAlignment.Top;
                }
            }
        }
    }

    public partial class RowStackGrid : Grid
    {
        public static GridLength GetColumnWidth(UIElement uIElement)
        {
            return (GridLength)uIElement.GetValue(ColumnWidthProperty);
        }

        public static void SetColumnWidth(UIElement uIElement, GridLength value)
        {
            uIElement.SetValue(ColumnWidthProperty, value);
        }

        // Using a DependencyProperty as the backing store for ColumnWidth.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ColumnWidthProperty =
            DependencyProperty.RegisterAttached("ColumnWidth", typeof(GridLength), typeof(RowStackGrid), new PropertyMetadata(new GridLength(0, GridUnitType.Auto)));
    }
}

    <StackPanel>
        <adam_l:RowStackGrid>
            <Button Content="Button" Padding="15" Margin="20"/>
            <TextBox adam_l:RowStackGrid.ColumnWidth="1*" Margin="5"/>
            <TextBox adam_l:RowStackGrid.ColumnWidth="3*" Margin="5"/>
        </adam_l:RowStackGrid>
        <adam_l:RowStackGrid>
            <Button Content="Button" adam_l:RowStackGrid.ColumnWidth="1*"/>
            <TextBox Margin="5" Width="20" Height="40"/>
            <TextBox adam_l:RowStackGrid.ColumnWidth="3*" Margin="5"/>
        </adam_l:RowStackGrid>
    </StackPanel>

標籤：wpf视窗xaml布局

上一篇：如何避免PowerShell命令無法識別的術語錯誤

下一篇：在Windows上使用帶有Flask的“真實Web服務器”來替換默認服務器的最簡單方法是什么？[復制]