Dynamic and Immutable UIElement Arrays

Question

I have a WrapPanel that contains multiple Canvas of the same size. Each Canvas has some UIElements (i.e. TextBox, TextBlock, Buttons etc) as children. The creation of each Canvas (including its UIElement children) and the number of Canvas to be created are all done in run-time code behind (no XAML).

Initially I did the following, which works:

// declare as class properties, so all function can access them
WrapPanel wp = new WrapPanel();
Canvas[] cv = new Canvas[500];
TextBox[] tb = new TextBox[500];

// A function (e.g. a Button_Click event) that generates multiple Canvas in a WrapPanel
for (int i = 0; i<myInt; i++)
{
cv[i] = new Canvas();
tb[i] = new TextBox();
cv[i].Children.Add(tb[i]);
wp.Children.Add(cv[i]);
}

The above code is straight forwards works OK - Until I implement add, minus and destroy buttons where I could

1. Add an additional `Canvas` on a click event
2. Remove the last `Canvas` on a click event
3. Destroy a specific `Canvas` in the `WrapPanel` on a click event (may ba a little cross icon in each `Canvas`)

If I process some combination of the above 3 actions, I could easily create UIElements of the same index or create Canvas that goes out of the range of what it had been declared initially.

I looked into List however, each Canvas have different properties (each also has UIElement Children with different properties) and I can't figure out how List would solve it. A way for me to go around that is to declare a super large Array size for Canvas (e.g. Canvas[] cv = new Canvas[99999] but I though that's not very efficient.

Also, if I use List, how could I change properties of a specific UIElement after the they are generated? E.g. If i add 10 Canvas and add to List, and after they are all generated, I need to select the 5th Canvas and change a TextBox.Text, how do I access it like I did in an Array (i.e. tb[5].Text = "Hello")?

Can anyone show me some approaches to this problem?

If you need an array that can shrink/grow then you're asking for a list. Can you elaborate on why a List wouldn't work in your case? — vanja., Apr 04 '11 at 02:46
@vanja, I edited my question which hope should clarify the problem. — KMC, Apr 04 '11 at 02:59
1. Don't use parallel lists. Make a type that represents each entry in full, and keep a single list of that type, not several lists where each only has part of the story. 2. You really should be looking into MVVM. — Joe White, Apr 04 '11 at 03:28

score 3 · Accepted Answer · edited Aug 21 '13 at 02:50

Just a direct translation on how to do this with a list instead below. Given your code I don't know why you want to keep track of the canvas and textbox'es in a list - you can just access the children collection of the WrapPanel directly instead - let's assume you do need these separate collections for now.

 WrapPanel wp = new WrapPanel();
 List<Canvas> cvList = new List<Canvas>();
 List<TextBox> tbList = new List<TextBox>();

 public void Init()
{

    int myInt = 500;
    // in a function (e.g. a Button_Click event) to generate the multiple Canvas in a WrapPanel
    for (int i = 0; i < myInt; i++)
    {
        Canvas cv = new Canvas();
        TextBox tb = new TextBox();
        cv.Children.Add(tb);
        wp.Children.Add(cv);

        cvList.Add(cv);
        tbList.Add(tb);
    }
}


public void AddCanvas()
{
    Canvas cv = new Canvas();
    TextBox tb = new TextBox();
    cv.Children.Add(tb);
    wp.Children.Add(cv);
    cvList.Add(cv);
    tbList.Add(tb);
}

public void RemoveCanvas()
{
        wp.Children.RemoveAt(wp.Children.Count-1);
        cvList.RemoveAt(cvList.Count - 1);
        tbList.RemoveAt(cvList.Count - 1);
}

Edit for added comment:

E.g. If i add 10 Canvas, and after they are all generated, I need to select the 5th Canvas and change a TextBox.Text, how do I access it like I did in an Array (i.e. tb[5].Text = "Hello")?

You can just access the children directly. You know you only added Canvas elements to your WrapPanel. So you could do (wp is the WrapPanel again):

TextBox textbox = (wp.Children[5] as Canvas).Children[0] as TextBox;
textbox.Text = "Hello";

I'm with @BrokenGlass - seems to make sense in this case that you just want to be able to manage children in the WrapPanel's collection. — dugas, Apr 04 '11 at 02:59
thanks. But then how could I change properties of a specific UIElement? E.g. If i add 10 Canvas, and after they are all generated, I need to select the 5th Canvas and change a TextBox.Text, how do I access it like I did in an Array (i.e. tb[5].Text = "Hello")? — KMC, Apr 04 '11 at 03:05
@KMC - Canvas c = (Canvas)wp.Children[4] would get the 5th canvas in the WrapPanel. TextBox t = (TextBox)c.Children[0] would get the textbox. — dugas, Apr 04 '11 at 03:11
a slight issue in your code. The index of the WrapPanel could be different that of the list. E.g. If I remove an item in a List, the List index would re-arrange, but WrapPanel would simply have an empty item where it is removed. How do I synchronize the two indexes? — KMC, Apr 04 '11 at 06:24

score 1 · Answer 2 · edited Aug 21 '13 at 02:50

Just operate directly on the WrapPanel's Children collection.

public partial class MainWindow : Window
{        

    public MainWindow()
    {
        InitializeComponent();
        AddCanvasToWrapPanel(this.TestWrapPanel);
        RemoveLastCanvasFromWrapPanel(this.TestWrapPanel);
        AddCanvasToWrapPanel(this.TestWrapPanel);
        DestroyCanvasAtWrapPanelIndex(this.TestWrapPanel, 0);

    }

    private void AddCanvasToWrapPanel(WrapPanel wp)
    {
        TextBox t = new TextBox();
        Canvas c = new Canvas();
        c.Children.Add(t);
        wp.Children.Add(c);
    }

    private void RemoveLastCanvasFromWrapPanel(WrapPanel wp)
    {
        wp.Children.RemoveAt(wp.Children.Count - 1);
    }

    private void DestroyCanvasAtWrapPanelIndex(WrapPanel wp, int index)
    {
        wp.Children.RemoveAt(index);
    }


}
}

Dynamic and Immutable UIElement Arrays

2 Answers2

Linked