WPF Uniform Grid Layout

Question

I have a requirement with layout in Uniform grid. Below is the layout

In Uniform grid the second row layout items should start from Right_to_Left (Not using Flow direction). Currently it is starting from Left_to_Right

When i Collapse "Button1" then the layout should be like below

Can any one help me please

Answer 1

Guess you can do this by tweaking the ArrangeOverride(...) in a UniformGrid

If you're just looking for a sample, You can download a demo -> Here

Firstly I did find an example of laying out elements in a vertical orientation(column wise) from Here

Thus with that solution I could just update ArrangeOverride(...) to something like:

protected override Size ArrangeOverride(Size arrangeSize) {
  var finalRect = new Rect(0.0, 0.0, arrangeSize.Width / _columns, arrangeSize.Height / _rows);
  Double width = finalRect.Width;
  Double maxWidth = arrangeSize.Width;
  finalRect.X += finalRect.Width * FirstColumn;
  int currentRow = 1;
  foreach (UIElement element in InternalChildren) {
    element.Arrange(finalRect);
    if (element.Visibility == Visibility.Collapsed)
      continue;
    if (currentRow % 2 == 0) {
      finalRect.X -= width;
      if (finalRect.X <= -width) {
        ++currentRow;
        finalRect.Y += finalRect.Height;
        finalRect.X = 0;
      }
    } else {
      finalRect.X += width;
      if (finalRect.X >= maxWidth) {
        ++currentRow;
        finalRect.Y += finalRect.Height;
        finalRect.X = maxWidth - width;
      }
    }
  }
  return arrangeSize;
}

Logic: We pretty much inside the foreach(...) check the element's current row and every alternate row, switch it's horizontal orientation by modifying it's X offset accordingly.

This gets the behavior you're looking for.

Here's the full derived class code in-case the msdn link goes away in the future:

public class MyUniformGrid : UniformGrid {
  private int _columns;
  private int _rows;

  protected override Size MeasureOverride(Size constraint) {
    UpdateComputedValues();
    var availableSize = new Size(constraint.Width / (_columns), constraint.Height / (_rows));
    double width = 0.0;
    double height = 0.0;
    int num3 = 0;
    int count = base.InternalChildren.Count;
    while (num3 < count) {
      UIElement element = base.InternalChildren[num3];
      element.Measure(availableSize);
      Size desiredSize = element.DesiredSize;
      if (width < desiredSize.Width) {
        width = desiredSize.Width;
      }
      if (height < desiredSize.Height) {
        height = desiredSize.Height;
      }
      num3++;
    }
    return new Size(width * _columns, height * _rows);
  }

  private void UpdateComputedValues() {
    _columns = Columns;
    _rows = Rows;
    if (FirstColumn >= _columns) {
      FirstColumn = 0;
    }

    if (FirstColumn > 0)
      throw new NotImplementedException("There is no support for seting the FirstColumn (nor the FirstRow).");
    if ((_rows == 0) || (_columns == 0)) {
      int num = 0; // Visible children  
      int num2 = 0;
      int count = base.InternalChildren.Count;
      while (num2 < count) {
        UIElement element = base.InternalChildren[num2];
        if (element.Visibility != Visibility.Collapsed) {
          num++;
        }
        num2++;
      }
      if (num == 0) {
        num = 1;
      }
      if (_rows == 0) {
        if (_columns > 0) {
          _rows = ((num + FirstColumn) + (_columns - 1)) / _columns;
        } else {
          _rows = (int)Math.Sqrt(num);
          if ((_rows * _rows) < num) {
            _rows++;
          }
          _columns = _rows;
        }
      } else if (_columns == 0) {
        _columns = (num + (_rows - 1)) / _rows;
      }
    }
  }

  protected override Size ArrangeOverride(Size arrangeSize) {
    var finalRect = new Rect(0.0, 0.0, arrangeSize.Width / _columns, arrangeSize.Height / _rows);
    Double width = finalRect.Width;
    Double maxWidth = arrangeSize.Width;
    finalRect.X += finalRect.Width * FirstColumn;
    int currentRow = 1;
    foreach (UIElement element in InternalChildren) {
      element.Arrange(finalRect);
      if (element.Visibility == Visibility.Collapsed)
        continue;
      if (currentRow % 2 == 0) {
        finalRect.X -= width;
        if (finalRect.X <= -width) {
          ++currentRow;
          finalRect.Y += finalRect.Height;
          finalRect.X = 0;
        }
      } else {
        finalRect.X += width;
        if (finalRect.X >= maxWidth) {
          ++currentRow;
          finalRect.Y += finalRect.Height;
          finalRect.X = maxWidth - width;
        }
      }
    }
    return arrangeSize;
  }
}

Note:

This implementation does not work with the UniformGrid.FirstColumn property currently. You can tweak the over-ride's to accommodate for that if you need to ofc.