Expanding grid (or similar) in WPF for a modeling program

Question

I am pretty new to WPF, and in order to get some knowledge I decided to make a very simple UML modeling program, that basically offers the possibility to put some classes onto a canvas, connect them and move them around.

Now to the question: I have been thinking about letting the classes I put on the canvas being a userControl I design. In my mind it would be something like a Grid, with some textboxes to represent properties, attributes and so on. The actual question is then, is my idea possible, or should I go with something completely different? My concern right now is how to implement the grid such that it can expand (add a row) under the right heading (Attribute/property..) when I want it to, and not be expanded to a maximum from the beginning.

I hope you can understand my question, and give me an idea to whether I should continue to implement it how I thought about, or do it using some other method.

You may want to check [My Example](http://stackoverflow.com/questions/15819318/how-to-create-and-connect-custom-user-buttons-controls-with-lines-using-windows/15821573#15821573) of a similar thing. — Federico Berasategui, Sep 29 '13 at 15:53
I like your example, and I start to think that I should use a Combobox, and then with some listViews in it, that contains the necessary attributes, properties and so on.. :) — Jesper Plantener, Sep 30 '13 at 08:29

Dweeberly · Answer 1 · 2013-09-30T20:12:51.723

You may wish to consider a ListView control, perhaps with an Expander, something like this:

<Canvas>
    <Expander Header="Stuff"
              MaxHeight="900"
              Canvas.Left="202" 
              Canvas.Top="110">
        <ListView Name="MyListView">
            <ListView.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Add new thing"
                              Click="MenuItem_Click" />
                </ContextMenu>
            </ListView.ContextMenu>
            <ListViewItem>
                <StackPanel Orientation="Horizontal">
                    <Label>Name</Label>
                    <TextBox Text="Value" />
                </StackPanel>
            </ListViewItem>
            <ListViewItem>Item two</ListViewItem>
            <ListViewItem>Item three</ListViewItem>
        </ListView>
    </Expander>
</Canvas>

This will size as needed up to the max given. The list view items could contain any sort of content (not just text) as you can see above. You will want to learn a bit about Style and Control templates. WPF has IMHO a rather steep learning curve but there are a lot of learning resources on the web. Good luck.

In response to your comment, I'm adding additional information.

Anything you can do in XAML you can do in code behind (mostly XAML just calls framework objects). In this case I've added a context menu to the ListView control. This menu contains one item "Add new thing". There is a Click event for this item which is bound to the MenuItem_Click method in the code behind. I then added this method to the code:

    void MenuItem_Click(object sender, RoutedEventArgs e) {
        var lvi = new ListViewItem();
        lvi.Content = String.Format("New thing {0}", DateTime.Now);
        MyListView.Items.Add(lvi);
        }

Now if you right click in the ListView you will see the "Add new thing" menu selection, left clicking it adds a new ListViewItem into the ListView (programmatically).

Alright this could work. However I think there is a problem. I want to dynamically assign how many ListViewItems there are.. I mean when I draw the box in the canvas, it should be empty, and then when I press a button, an item should be added under the right heading.. I don't see how that would work with the setup above. — Jesper Plantener, Sep 29 '13 at 14:02

Expanding grid (or similar) in WPF for a modeling program

1 Answers1