将行换行到下一行

Question

我正在寻找一种将UltraGrid 行包装到下一行的方法，这样就不需要水平滚动条来查看整个网格。

在 HTML/CSS 中它看起来像这样：https://jsfiddle.net/zjbyE/205/

我在DisplayLayout 和Override 子对象中寻找任何可以做到这一点的属性，但没有成功。也许我错过了一些明显的东西？

Answer 1

如果这是您要查找的内容，则网格无法自动包装单元格。换句话说，网格不会根据可用宽度与实际带的宽度相比更改单元格的位置。

但是网格将允许您将单元格定位在数据行内的多个逻辑行上，理论上，您可以编写网格的 Resize 事件以在列不合适时重新定位它们。

有两种方法可以在单个数据行中创建多个逻辑行。一种是使用列组，另一种是使用 RowLayoutStyle.ColumnLayout。由于组需要组标题，而您没有提及这些，我将使用 ColumnLayout 方法，它有点复杂，但是当我在一个简单的单波段网格中尝试它时效果很好。

这是我编写的一些示例代码。它并不完美，但效果很好。

    private void Form1_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 100; i++)
        {
            this.ultraDataSource1.Rows.Add(new object[] { i, i, i, i, i, i, i, i, i, i, i });
        }

        // Hook the paint event so we can wrap the cells the first time the grid paints. 
        // We can't do it here directly, because until the grid paints, there are no UIElements
        // and the column measurements may be wrong. 
        this.ultraGrid1.Paint += UltraGrid1_Paint;

    }

    private void ultraGrid1_InitializeLayout(object sender, Infragistics.Win.UltraWinGrid.InitializeLayoutEventArgs e)
    {
        UltraGridLayout layout = e.Layout;
        UltraGridBand rootBand = layout.Bands[0];

        // ColumnLayout allows us to position the columns in a single data row on multiple
        // logical rows. 
        rootBand.RowLayoutStyle = RowLayoutStyle.ColumnLayout;

        // This code will be a lot more complex if we have to account for the possibility
        // that the vertical scrollbar may or may not be visible. So make it visible always
        // to spare us some headaches. 
        layout.Scrollbars = Scrollbars.Vertical;

        // This code doesn't account or multiple scroll regions to turn those off. 
        layout.MaxColScrollRegions = 1;
        layout.MaxRowScrollRegions = 1;
    }

    private void UltraGrid1_Paint(object sender, PaintEventArgs e)
    {
        // We only need to to this the first time, so unhook the Paint event. 
        this.ultraGrid1.Paint -= UltraGrid1_Paint;

        // Wrap the grid columns. 
        UltraGrid grid = (UltraGrid)sender;
        this.WrapGridRows(grid);
    }        

    private void ultraGrid1_Resize(object sender, EventArgs e)
    {
        // Wrap the grid columns. 
        UltraGrid grid = (UltraGrid)sender;
        this.WrapGridRows(grid);
    }

    private void WrapGridRows(UltraGrid grid)
    {
        UltraGridLayout layout = grid.DisplayLayout;

        // Determine the available Width of the grid.
        UIElement gridElement = layout.UIElement;
        UIElement rowColRegionIntersectionUIElement = gridElement.GetDescendant(typeof(RowColRegionIntersectionUIElement));
        int availableWidth = rowColRegionIntersectionUIElement.RectInsideBorders.Width;

        // X and y origins of each column in the ColumnLayout.
        int x = 0;
        int y = 0;

        // Keep track of the total width that has been used up on each row. 
        int totalUsedWidth = 0;

        // Loop through the columns.
        UltraGridBand band = layout.Bands[0];
        foreach (UltraGridColumn column in band.Columns)
        {
            // Get the width of the column. I added 2 here to account for borders. This doesn't seem
            // exactly right and I think there might be something else causing a slight shift here
            // but it's close enough.                 
            int cellWidth = column.CellSizeResolved.Width + 2;

            bool columnFitsOnCurrentLogicalRow = (totalUsedWidth + cellWidth) <= availableWidth;
            if (columnFitsOnCurrentLogicalRow)
            {
                // Position this column in the current row.                     
                column.RowLayoutColumnInfo.OriginX = x;
                column.RowLayoutColumnInfo.OriginY = y;     

                // Increment x to the next position.                
                x++;                    
            }
            else
            {
                // Reset x and y to the beginning of the next row. 
                x = 0;
                y++;

                // Position the column at the beginning of the next row. 
                column.RowLayoutColumnInfo.OriginX = x;
                column.RowLayoutColumnInfo.OriginY = y;

                // Increment x to the next position.
                x++;

                // Reset TotalUsedWidth since we are starting a new row. 
                totalUsedWidth = 0;
            }

            // The current column either got added to an existing row or a new row. 
            // Either way, we need to increase the total used width. 
            totalUsedWidth += cellWidth;

            // For reasons I won't go into here, the default Span is 2. Set it to 1 to 
            // make things simpler. 
            column.RowLayoutColumnInfo.SpanX = 1;
            column.RowLayoutColumnInfo.SpanY = 1;
        }
    }