Add variable number of control

Question

I am relatively new to WPF, can someone point me to the best methodology please?

I will be creating a block diagram with lines linking the blocks. The boxes will all be in a row so I was thinking of a horizontally aligned stack panel with rectangles and lines.

The rectangles are to fill a tab page, and be clickable.

The problem is I don't know until run-time how many rectangles there will be.

What would be the right way to do this, should it be in code-behind where i find out the number of rectangles and add and position them and the lines in code or can i do something in XAML with a bit more flexibility?

The number of rectangles would be be between 2 and 10, so if it was 2 i wouldn't want them filling up the whole width of the tab. So ideally i would like the rectangle to have a min and max width and be centered so it still looks quite nice.

Many thanks in advance

Andrey Shchekin · Accepted Answer · 2013-05-15 00:07:42Z

2

The right way to do something like that it to use <ItemsControl> and bind its ItemsSource to a part of your model that represents a collection of diagram blocks. Data binding is a pretty powerful part of WPF. Unfortunately, it is also too complex to quickly describe in an answer, so I recommend to read some articles/code samples to get up to speed with it.

If you use ObservableCollection<DiagramBlock> (or any other collection that implements INotifyCollectionChanged) for your blocks, adding or removing blocks in code will cause UI to change accordingly.

answered May 15, 2013 at 0:07

Andrey Shchekin

21.8k20 gold badges100 silver badges167 bronze badges

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

Comments

jacob aloysious · Accepted Answer · 2013-05-15 02:47:49Z

Here is a sample using databinding to add more than one control (button here) in run-time (code behind). Should be a good starting point.

And, If the data would changed after the form is loaded, you could implement INotifyPropertyChange and update accordingly

MainWindow.xaml:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" >
        <ItemsControl ItemsSource="{Binding YourCollection}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
</Window>

MainWindow.xaml.cs

    public MainWindow()
    {
        InitializeComponent();

        YourCollection = new List<Button>();


        //Dummy Data for Demo 
        YourCollection.Add(new Button() { Height = 25, Width = 25 });
        YourCollection.Add(new Button() { Height = 25, Width = 25 });

        this.DataContext = this;

    }

    public List<Button> YourCollection { get; set; }

Collectives™ on Stack Overflow

Add variable number of control

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related