How to Rearrange rectangles on canvas after modifying height of any rectangle in wpf?

Question

I am adding Rectangle from grid cell values that is being entered by user directly in grid rows. When i modify value of specific column say Thickness i.e Height then then it increases Height of selected row rectangle but it doesnt rearrange all rectangle below it exactly after the selected row rectangle.

In xaml.cs

public class MyLayer : INotifyPropertyChanged 
{

    public string Thickness { get; set; }
    public string OffsetRight { get; set; }
    public string OffsetLeft { get; set; }
    public string Material { get; set; }
    public string MaterialPopup { get; set; }
    public Rectangle rectangle { get; set; }

    public GlassRectangle GlassRectangle { get; set; }
    public MaterialLayer()
    {
        GlassRectangle = new GlassRectangle();

    }
    event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged
    {
        add { }
        remove {  }
    }
}

public class GlassRectangle
{

    public Rectangle Rectangle { get; set; }
    public double Top = 0;
    public GlassRectangle()
    {
        Rectangle = new Rectangle();

    }
}

private void gridInner_CellValueChanged(object sender, DevExpress.Xpf.Grid.CellValueChangedEventArgs e)
        {
            string cellValue = string.Empty;
            MyLayer currentLayer = ((MyLayer)(e.Row));

            if (e.Column.HeaderCaption.ToString() == "Thickness")
            {

                cellValue =(e.Value.ToString());
                //there is alredy a rectangle - means this is edit mode
                if (currentLayer.rectangle != null)
                {
                    currentLayer.rectangle.Height = Convert.ToDouble(cellValue);
                    currentLayer.rectangle.Stroke = new SolidColorBrush(Color.FromRgb(0, 255, 0));

                }
                //else this is insert mode
                else
                {

                    currentLayer.rectangle = CreateRectangle(cellValue);
                }

            }

        }

 protected Rectangle  CreateRectangle(string cellval)
        {
            Rectangle newrect = new Rectangle();
            newrect.Stroke = Brushes.Red;
            newrect.StrokeThickness = 1;
            if (cellval.ToString().Contains("."))
            {
                newrect.Height = Convert.ToDouble(cellval) * 100;
            }
            else
            {
                newrect.Height = Convert.ToDouble(cellval);
            }
            newrect.Width = width;
            Canvas.SetLeft(newrect, 100);
            double canvasTop = 0.0;
            if (canvasboard.Children.Count > 0)
            {
                var lastChildIndex = canvasboard.Children.Count - 1;
                var lastChild = canvasboard.Children[lastChildIndex] as FrameworkElement;
                if (lastChild != null)
                    //lastChild.Height-1: so that it come extactly on existing if set to +1 it comes below first rectangle
                    canvasTop = Canvas.GetTop(lastChild) + lastChild.Height - 1;
            }

            Canvas.SetTop(newrect, canvasTop);
            val = val + 1;
            newrect.Tag = val;
            canvasboard.Children.Add(newrect);
            //rectangle = rect;

            foreach (UIElement ui in canvasboard.Children)
            {
                if (ui.GetType() == typeof(Rectangle))
                {
                    itemstoremove.Add(ui);
                }
            }

            return newrect;
        }

NEW EVENT Method:

private void gridMaterialInner_CellValueChanged(object sender, DevExpress.Xpf.Grid.CellValueChangedEventArgs e)
        {
            string cellValue = string.Empty;
            string cellOldValue = string.Empty;
            MyLayer currentLayer = ((MyLayer)(e.Row));
            if (e.Column.HeaderCaption.ToString() == "Thickness")
            {
                //current cell value
                cellValue =(e.Value.ToString());// GetRowCellValue(e.RowHandle, gridMaterialInner.Columns["LastName"]).ToString();
                //there is alredy a rectangle - means this is edit mode
                double currentheight = 0.0;
                double oldht = 0.0;
                // old cell value
                if (e.OldValue != null)
                {
                    cellOldValue = (e.OldValue.ToString());
                }
                if (currentLayer.rectangle != null)
                {
                    if (cellValue.ToString().Contains("."))
                    {
                        currentheight = Convert.ToDouble(cellValue) * 100;
                    }
                    else
                    {
                        currentheight = Convert.ToDouble(cellValue) * 100;
                    }
                    if (cellOldValue.ToString().Contains("."))
                    {
                        oldht = Convert.ToDouble(cellOldValue) * 100;
                    }
                    else if(cellOldValue!=string.Empty)
                    {
                        oldht = Convert.ToDouble(cellOldValue) * 100;
                    }

                    currentLayer.rectangle.Height = currentheight;
                    currentLayer.rectangle.Stroke = new SolidColorBrush(Color.FromRgb(0, 255, 0));

                    //Refresh();
                    //Get the index of selected row
                    int layerIndex = materialBindlist.IndexOf(currentLayer);
                    for(int i = layerIndex; i < materialBindlist.Count-1; i++)
                    {
                        //set the top position of all other rectangles that are below selected rectangle/row
                        //(Current-Old)+Top
                        Canvas.SetTop(materialBindlist[i + 1].rectangle, (currentheight - oldht) + materialBindlist[i + 1].GlassRectangle.Top);
                        //Canvas.SetTop(materialBindlist[i].rectangle, (currentheight - oldht) + materialBindlist[i + 1].GlassRectangle.Top);

                    }
                }
                //else this is insert mode
                else
                {
                    //MaterialLayer object
                    currentLayer.rectangle = CreateRectangle(cellValue);
                    //store Top & Rectangle object in GlassRectangle class which is referenced in MaterialLayer class
                    currentLayer.GlassRectangle.Rectangle = currentLayer.rectangle;
                    currentLayer.GlassRectangle.Top = canvasTop;
                }

            }

        }

This create rectangle one after other like Stacked item on canvas. But when i modify the value of Thickness column which is Height of Rectangle it reflects on canvas but the Other Rectangle below must appear after the Changed Height of current rectangle.

Note: I cant use WrapPanel in my application. Just to modify existing code using Canvas.

Help Appreciated!

Modified For Loop in CellChange Event:

int layerIndex = materialBindlist.IndexOf(currentLayer);
                    for(int i = layerIndex; i < materialBindlist.Count-1; i++)
                    {
                        //set the top position of all other rectangles that are below selected rectangle/row
                        //(Current-Old)+Top
                        double top=Convert.ToDouble((currentHeight - oldHeight) + materialBindlist[i + 1].GlassRectangle.Top);
                        Canvas.SetTop(materialBindlist[i + 1].rectangle,top);

                        materialBindlist[i + 1].GlassRectangle.Top = top;



                    }

Answer 1

What you're looking for can be done even with a Canvas however you should really consider using something like an ItemsControl for this.

Solution when forced to use Canvas:

private void Refresh() {
  for (int i = 1; i < canvasboard.Children.Count; ++i) {
    var currentElement = canvasboard.Children[i] as FrameworkElement;
    var previousElement = canvasboard.Children[i - 1] as FrameworkElement;
    if (currentElement == null || previousElement == null)
      return;
    var requiredTop = Canvas.GetTop(previousElement) + previousElement.Height - 1;
    if (Math.Abs(Canvas.GetTop(currentElement) - requiredTop) > 0.0)
      Canvas.SetTop(currentElement, requiredTop);
  }
}

Now call this function "after" you change the size of an existing element in the Canvas and it will re-position the elements accordingly to suit the new dimension. In your code, it would be called from the gridInner_CellValueChanged(...) function after you set the new height in "edit" mode.

What you should try to do:

If your able to persuade whoever you need to and get to use something like an ItemsControl, this will be so much simpler.

say a rough example:

xaml could be:

<ItemsControl ItemsSource="{Binding Items}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <VirtualizingStackPanel Orientation="Vertical" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

with Items declared as public ObservableCollection<Rectangle> Items { get; set; } in code.

Now your Add() function could just be:

private void Add() {
  var rect = new Rectangle {
    Stroke = Brushes.Red,
    StrokeThickness = 1,
    Height = Convert.ToDouble(txtheight.Text),
    Width = 100
  };
  Items.Add(rect);
}

and as for updates when your editing existing control's that would be automatic in this case. There is no hard-coded positioning as the Layout container takes care of all that mess for you.

You can ofcourse switch the Items collection type to your own custom control type MyLayer and with it implementing INPC, changes would still continue to be automatic. You'd have to define a DataTemplate now to get your Item to be rendered but that's like 3 lines of work in just xaml.

You can also just work of the Items property directly when needing to tweak an exisiting control than having to reference the ItemsControl in code-behind. Binding's should take care of the updates to the view automatically.

Answer 2

Modified for loop in Cell Change Event:

int layerIndex = materialBindlist.IndexOf(currentLayer);
                    for(int i = layerIndex; i < materialBindlist.Count-1; i++)
                    {
                        //set the top position of all other rectangles that are below selected rectangle/row
                        //(Current-Old)+Top
                        double top=Convert.ToDouble((currentHeight - oldHeight) + materialBindlist[i + 1].GlassRectangle.Top);
                        Canvas.SetTop(materialBindlist[i + 1].rectangle,top);

                        materialBindlist[i + 1].GlassRectangle.Top = top;



                    }

it works now..!Thanks to all!