question

HaiderAli-8941 avatar image
0 Votes"
HaiderAli-8941 asked HuiLiu-MSFT commented

How to dynamically add rectangles in WPF C#?

Hello Guys!

I hope you all will be doing well. I just want to ask that I am working on a project in which I am trying to add rectangles to wrappanel. Although, Its drawing rectangles but I am drawing 5 rectangles and its showing only 3 rectangles. I know other two rectangles are going out of main window but this is the question how can I wrap all the rectangles that if window is ending then next rectangle should come to the next line. I mean to draw 3 rectangles on each line. HERE is the code:

for (int i = 0; i < 5; i++)
{
// Create the rectangle
Rectangle rec = new Rectangle();
rec.Width = 50;
rec.Height = 50;
rec.Fill = Brushes.Green;
rec.Stroke = Brushes.Red;
rec.StrokeThickness = 2;
rec.Name = "box" + i.ToString();
Thickness margin = rec.Margin;
margin.Left = 50;
rec.Margin = margin;
canvasWrapPanel.Children.Add(rec); //this is my wrappanel which is in xaml file
}

dotnet-csharpwindows-wpf
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hello, please can you provide the XAML code too?

0 Votes 0 ·

Hi,@HaiderAli-8941. Is there any update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.

0 Votes 0 ·

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered HuiLiu-MSFT commented

WrapPanel control is a panel that positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box.
You can explicitly set the width of the WrapPanel so that a maximum of three rectangles fit in a row.

Xaml:

 <StackPanel>
         <Button Content="click" Height="30" Width="100" Click="Button_Click" />
         <WrapPanel Name="canvasWrapPanel" Width="250" />
     </StackPanel>

Codebehind:

 private void Button_Click(object sender, RoutedEventArgs e)
     {
       for (var i = 0; i < 5; i++)
       {
         canvasWrapPanel.Children.Add(new Rectangle
         {
           Width = 50,
           Height = 50,
           StrokeThickness = 2,
           Name="box"+i.ToString(),
           Stroke = new SolidColorBrush(Colors.Black),
           Margin = new Thickness(15)
         });
       }
     }

Or you can use Canvas instead of WrapPanel.

  <Canvas x:Name="canvas" >
         </Canvas>

Codebehind:

 int width = 50;
       int height = 50;
       int top ;
       int left;
    
       for (int x = 0; x < 3; x++)
       {
         for(int y = 0; y < 3; y++)
         {
           Rectangle rec = new Rectangle()
           {
             Width = width,
             Height = height,
             Stroke = Brushes.Black,
             StrokeThickness = 2,
           };
           left=2*x*width+x;
           top=height*2 * y +y;
           canvas.Children.Add(rec);
           Canvas.SetTop(rec, top);
           Canvas.SetLeft(rec, left);
         }
       }

The result:
217275-image.png


If the response is helpful, please click "Accept Answer" and upvote it.
 Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. 




image.png (8.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.