快捷導(dǎo)航

WPF動態(tài)生成行列可變表格的實現(xiàn)方法詳解

更新時間：2026年02月11日 08:54:28 作者：小碼編匠

在做WPF開發(fā)的時候,經(jīng)常會遇到需要展示表格數(shù)據(jù)的場景,本文將為大家詳細介紹一下如何使用WPF動態(tài)生成行列可變表格,感興趣的小伙伴可以參考下

前言

項目背景是這樣的：我們需要展示一組寬度測量數(shù)據(jù)，每組數(shù)據(jù)包含多個邊緣的振幅值，而不同組的邊緣數(shù)量是不一樣的。如果用傳統(tǒng)的DataGrid，列數(shù)固定，很難靈活展示這種數(shù)據(jù)結(jié)構(gòu)。

于是，我決定放棄DataGrid，轉(zhuǎn)而使用Grid控件，通過代碼動態(tài)生成表格。

效果演示

從圖中可以看到，表格的列數(shù)是根據(jù)數(shù)據(jù)動態(tài)生成的，每組數(shù)據(jù)的邊緣數(shù)量不同，表格的列數(shù)也隨之變化，而且每組數(shù)據(jù)之間有明顯的分隔，整體效果清晰明了。

實現(xiàn)方法

先看前臺XAML部分：

<dxlc:LayoutControl>
   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"
     cal:Message.Attach="[Event Loaded]=[Grid_Loaded($source,$eventArgs)]" />
</dxlc:LayoutControl>

我把Grid放在了dxlc:LayoutControl中，這樣當(dāng)表格尺寸超出界面分配的長寬時，會自動出現(xiàn)滾動條，用戶體驗更好。

再來看后臺代碼。首先定義數(shù)據(jù)模型：

public class WidthMetrologyDTO
{
    public bool IsMeasureSuccess { get; set; }
    public double Degree { get; set; }
    public string ImageFilePath { get; set; }
    public double Width { get; set; }
    public double EdgeNum { get; set; }
    public List<EdgePosition> EdgePositions { get; set; }
}
public class EdgePosition
{
    public double EdgesAmplitude { get; set; }
}

然后在代碼中定義Grid和數(shù)據(jù)集合：

public Grid resultDisplayGrid;
public BindableCollection<WidthMetrologyDTO> WidthMetrologyData { get; set; }
= new BindableCollection<WidthMetrologyDTO>();

在Grid加載時獲取Grid對象：

public void Grid_Loaded(object sender, RoutedEventArgs e)
{
  resultDisplayGrid = (Grid)sender;
}

接著添加一些測試數(shù)據(jù)：

public void ResultDispaly()
{
    try
    {
        WidthMetrologyData.Clear();
        WidthMetrologyData.Add(new WidthMetrologyDTO
        {
            Width = 345.1,
            EdgeNum = 3,
            EdgePositions = new List<EdgePosition>
            {
                new EdgePosition(){EdgesAmplitude = 1.1},
                new EdgePosition(){EdgesAmplitude = 2.2},
                new EdgePosition(){EdgesAmplitude = 3.3},
            },
        });
        WidthMetrologyData.Add(new WidthMetrologyDTO
        {
            Width = 345.2,
            EdgeNum = 2,
            EdgePositions = new List<EdgePosition>
            {
                new EdgePosition(){EdgesAmplitude = 4.4},
                new EdgePosition(){EdgesAmplitude = 5.5},
            },
        });
        WidthMetrologyData.Add(new WidthMetrologyDTO
        {
            Width = 345.3,
            EdgeNum = 4,
            EdgePositions = new List<EdgePosition>
            {
                new EdgePosition(){EdgesAmplitude = 6.6},
                new EdgePosition(){EdgesAmplitude = 7.7},
                new EdgePosition(){EdgesAmplitude = 8.8},
                 new EdgePosition(){EdgesAmplitude = 9.9},
            },
        });
        WidthMetrologyData.Add(new WidthMetrologyDTO
        {
            Width = 345.0,
            EdgeNum = 1,
            EdgePositions = new List<EdgePosition>
            {
                new EdgePosition(){EdgesAmplitude = 0.66},
            },
        });
        AddResultGrid();
    }
    catch (Exception ex)
    {
        //logger.Debug($"ResultData add fail : {ex}");
    }
}

最后是生成表格的核心代碼：

public void AddResultGrid()
{
    try
    {
        resultDisplayGrid.Children.Clear();
        var gridColumns = 2 + WidthMetrologyData.OrderByDescending(index => index.EdgePositions.Count).FirstOrDefault().EdgePositions.Count;
        var gridRows = 16;

        //添加grid行
        for (int i = 0; i < gridColumns; i++)
        {
            var columnDefinition = new ColumnDefinition();
            resultDisplayGrid.ColumnDefinitions.Add(columnDefinition);
            if (i == 1)
            {
                columnDefinition.Width = new GridLength(2, GridUnitType.Star);//相對尺寸
            }
            else
            {
                columnDefinition.Width = new GridLength(1, GridUnitType.Star);
            }
            //columnDefinition.Width = GridLength.Auto;
        }
        //添加grid列
        for (int i = 0; i < gridRows; i++)
        {
            var rowDefinition = new RowDefinition();
            resultDisplayGrid.RowDefinitions.Add(rowDefinition);
            rowDefinition.Height = new GridLength(30, GridUnitType.Pixel);//絕對尺寸
        }

        //添加數(shù)據(jù)
        //var controlWidth = 100;
        //var controlHeight = 30;
        for (int degreeIndex = 0; degreeIndex < WidthMetrologyData.Count; degreeIndex++)
        {
            var rowsCount = 3;
            var columnsCount = WidthMetrologyData[degreeIndex].EdgePositions.Count;

            for (int row = 0; row < rowsCount; row++)
                for (int column = 0; column < columnsCount + 2; column++)
                {
                    TextBlock tb = new TextBlock();
                    //tb.Width = controlWidth;
                    //tb.Height = controlHeight;
                    //tb.HorizontalAlignment = HorizontalAlignment.Left;
                    //tb.VerticalAlignment = VerticalAlignment.Center;


                    Border border = new Border();
                    border.BorderBrush = System.Windows.Media.Brushes.BlueViolet;
                    border.BorderThickness = new Thickness(1);

                    border.Child = tb;
                    border.SetValue(Grid.RowProperty, row + degreeIndex * 4);
                    border.SetValue(Grid.ColumnProperty, column);
                    resultDisplayGrid.Children.Add(border);

                    if (row == 0 && column >= 2)
                    {
                        tb.Text = (column - 1).ToString();
                    }
                    else if (row == 1 && column >= 2)
                    {
                        tb.Text = WidthMetrologyData[degreeIndex].EdgePositions[column - 2].EdgesAmplitude.ToString();
                    }
                    else if (row == 2 && column >= 2)
                    {
                        if (column == 2)
                        {
                            tb.Text = WidthMetrologyData[degreeIndex].Width.ToString();
                            //tb.Width = columnsCount * controlWidth;
                            tb.SetValue(Grid.ColumnSpanProperty, columnsCount);
                        }
                        else
                        {
                            continue;
                        }
                    }

                    if (column == 0)
                    {
                        if (row == 0)
                        {
                            switch (degreeIndex)
                            {
                                case 0:
                                    tb.Text = "第一組"; break;
                                case 1:
                                    tb.Text = "第二組"; break;
                                case 2:
                                    tb.Text = "第三組"; break;
                                case 3:
                                    tb.Text = "第四組"; break;
                                default: break;
                            }
                            //tb.Height = 3 * controlHeight;
                            tb.SetValue(Grid.RowSpanProperty, 3);
                        }
                        else
                        {
                            continue;
                        }
                    }

                    if (column == 1)
                    {
                        switch (row)
                        {
                            case 0:
                                tb.Text = "ID"; break;
                            case 1:
                                tb.Text = "Value"; break;
                            case 2:
                                tb.Text = "Fraction"; break;
                            default:
                                tb.Text = string.Empty; break;
                        }
                        //tb.Width = controlWidth;
                    }

                }
        }
        resultDisplayGrid.Width = (gridColumns + 1)* 40;
        //resultDisplayGrid.Height = gridRows * controlHeight;
    }
    catch (Exception ex)
    {
        //logger.Error($"Add result  grid fail,{ex}");
    }
}

總結(jié)

通過這次實踐，我發(fā)現(xiàn)用Grid控件從后臺代碼生成表格，雖然代碼量比用DataGrid多一些，但靈活性大大增強。特別是當(dāng)表格結(jié)構(gòu)需要根據(jù)數(shù)據(jù)動態(tài)變化時，這種方法顯得尤為實用。關(guān)鍵是要理清數(shù)據(jù)結(jié)構(gòu)，合理規(guī)劃Grid的行列布局，再通過代碼動態(tài)生成控件并設(shè)置其位置。雖然過程有點繁瑣，但最終的效果讓人滿意。

到此這篇關(guān)于WPF動態(tài)生成行列可變表格的實現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)WPF生成行列可變表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: