Question

I am adding rectangles on a Canvas using Random because I don’t know the width and height.

Code

  HProDataContext db = new HProDataContext();

        var RoomX = (from d in db.rooms select d.sizex).ToList();
        var RoomY = (from d in db.rooms select d.sizey).ToList();
        var random = new Random();
        for (int i = 0; i < RoomX.Count; i++)
        {

            RoomX[i] = (Convert.ToDouble(RoomX[i]) * 10).ToString();
            RoomY[i] = (Convert.ToDouble(RoomY[i]) * 10).ToString();

            var rectangle = new Rectangle()
            {
                Stroke = Brushes.Black,
                Fill = Brushes.SkyBlue,
                Width = Convert.ToDouble(RoomX[i]),
                Height = Convert.ToDouble(RoomY[i]),
                Margin = new Thickness(
                    left: random.NextDouble() * 300,
                    top: random.NextDouble() * 150,
                    right: 0,
                    bottom: 0),
                HorizontalAlignment = HorizontalAlignment.Left,
                VerticalAlignment = VerticalAlignment.Top
            };
            mainCanvas.Children.Add(rectangle);
        }
    }

It works good, but some rectangles are drawing over another rectangles.
How to draw rectangles there where is empty space?

Answer 1

You can calculate a Rect for each WPF Rectangle and use IntersectsWith method found in Rect to test if the code can a draw a new Rectangle without overlaps. I also recommend using rectangle properties Canvas.Left and Canvas.Top instead of adjusting the Margin.

I’ve included a simple example that you test to get you started.

Here is some XAML containing 4 Rectangles:

<Window x:Class="OverlapRectangeTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="60"/>
    </Grid.RowDefinitions>
    <Canvas x:Name="c" Grid.Row="0">
        <Rectangle x:Name="b1" Fill="Aqua" Canvas.Left="0" Canvas.Top="0" Width="100" Height="200"/>
        <Rectangle x:Name="b2" Fill="Bisque" Canvas.Left="0" Canvas.Top="0" Width="200" Height="100"/>
        <Rectangle x:Name="b3" Fill="BlueViolet"  Canvas.Left="250" Canvas.Top="0" Width="100" Height="200"/>
        <Rectangle x:Name="b4" Fill="Cornsilk"  Canvas.Left="111" Canvas.Top="0" Width="100" Height="200"/>
    </Canvas>
    <Button Grid.Row="1" Click="Button_Click"/>
  </Grid>
</Window>

Here is a button click event handler where I test the IntersectsWith method:

private void Button_Click(object sender, RoutedEventArgs e)
{
  double top1 = (double)b1.GetValue(Canvas.TopProperty);
  double left1 = (double)b1.GetValue(Canvas.LeftProperty);
  Rect rect1 = new Rect(left1, top1, b1.Width, b1.Height);

  double top2 = (double)b2.GetValue(Canvas.TopProperty);
  double left2 = (double)b2.GetValue(Canvas.LeftProperty);
  Rect rect2 = new Rect(left2, top2, b2.Width, b2.Height);

  double top3 = (double)b3.GetValue(Canvas.TopProperty);
  double left3 = (double)b3.GetValue(Canvas.LeftProperty);
  Rect rect3 = new Rect(left3, top3, b3.Width, b3.Height);

  double top4 = (double)b4.GetValue(Canvas.TopProperty);
  double left4 = (double)b4.GetValue(Canvas.LeftProperty);
  Rect rect4 = new Rect(left4, top4, b4.Width, b4.Height);

  bool rc0 = rect1.IntersectsWith(rect4);
  bool rc1 = rect1.IntersectsWith(rect2);
  bool rc2 = rect2.IntersectsWith(rect3);
  bool rc3 = rect3.IntersectsWith(rect1);
  bool rc4 = rect2.IntersectsWith(rect4);
}