Dynamically create Rectange in silverlight?

Question

I am trying to create Rectangle programmaticallyin silverlight as fallows.

C#

   private Boolean Working = false;
    const int scale = 4;
    const int size = 50;
    Int32[] data = new Int32[size];
    Rectangle[] lines = new Rectangle[size];

 private void button1_Click(object sender, RoutedEventArgs e)
        {
            canvas1.Children.Clear();
            for (int i = 0; i < data.Length; i++)
            {

                data[i] = i;
                lines[i] = new Rectangle()

                {

                    Height=i*scale,
                    Width = 10,
                    StrokeThickness=5,
                    Stroke = new SolidColorBrush(Colors.Red),
                    Name=i.ToString(),
                };

                canvas1.Children.Add(lines[i]);
            }
        }

Now the problem is that all the rectangle are created with the same height and width?.

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="500"  d:DesignWidth="500">

    <Canvas x:Name="canvas2" Background="White">
        <Canvas x:Name="canvas1" Background="White"></Canvas>
        <Button Content=" Generate"  Height="38"  Name="button1"  Width="75"  Click="button1_Click" Margin="0,352,245,24" HorizontalAlignment="Right" Canvas.Left="12" Canvas.Top="85" />
        <Button Content="Shuffle" Height="38" HorizontalAlignment="Left"  Name="button2" Margin="12,352,0,24" Click="button2_Click_1" Canvas.Left="81" Canvas.Top="85" Width="71" />
        <Button Canvas.Left="181" Canvas.Top="437" Content="Bubble Sort" Height="38" Name="button3" Width="109" Click="button3_Click" />
    </Canvas>

</UserControl>

Screenshot

enter image description here

well its strange as whatever scale is height should be different.. can you show us screen shot of what you are getting — Shekhar_Pro
– Shekhar_Pro, Commented Feb 28, 2011 at 12:09
@geek: definitely they are of different height.. not same height.. all rectangles are one on other — Shekhar_Pro
– Shekhar_Pro, Commented Feb 28, 2011 at 12:29

kyrylomyr · Accepted Answer · 2011-02-28 12:42:02Z

4

Actually, everything works fine. All rectangles have different height. But you forget to move them, so they start overlapping. Change a little code and you'll see:

lines[i] = new Rectangle()
{
    Height = i * scale,
    Width = 10,
    StrokeThickness = 5,
    Stroke = new SolidColorBrush(Colors.Red),
    Name = i.ToString(),
};
lines[i].Margin = new Thickness(11 * i, 0, 0, 0);

Result

Screenshot

edited Feb 28, 2011 at 12:42

answered Feb 28, 2011 at 12:36

kyrylomyr

12.7k9 gold badges57 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

santosh singh Over a year ago

Thank you very much.It's working fine.I have two question,Is it possible to change the upside down and add some content on rectangle.

kyrylomyr Over a year ago

To change direction try to play with Margin property. You can't add content to rectangle: you need to use any control (like Grid) for this purpose.

AnthonyWJones Over a year ago

@geek use a border instead of a rectangle if you want to include content.

Collectives™ on Stack Overflow

Dynamically create Rectange in silverlight?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related