Question

I do not know what the container/control im looking for would be called, so I cannot really search for it.

Add More of Same Usercontrol Usercontrol

• Clicking on + would add a new instance of My Usercontrol to the right of the existing ones
• Clicking on X would dispose the usercontrol that was clicked
• I’m not really looking for a tab control that would put each new instance on a new tab, but if there is nothing else then it might do.
• The design is not to be as shown in the image obviously, the image just illustrates the basic idea

Any keyword/name suggestions or links to existing implementations?

e.g. Maybe there is a style that turns a ListBox into something suitable?

Answer 1

I would use an ItemsControl and customize it’s ItemsPanelTemplate to be whatever you want.

ItemsControls are meant for iterating through a collection of objects, and displaying them in whatever form you want. I wrote some simple code samples of them here if you’re interested, or here’s another quick example:

<DockPanel x:Name="RootPanel">
    <Button Style="{StaticResource AddButtonStyle}"
            DockPanel.Dock="Right" VerticalAlignment="Center"
            Command="{Binding AddItemCommand" />

    <ScrollViewer>
        <ItemsControl ItemsSource="{Binding MyCollection}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <local:MyUserControl />

                        <Button Style="{StaticResource RemoveButtonStyle}"
                            Command="{Binding ElementName=RootPanel, Path=DataContext.RemoveItemCommand}"
                            CommandParameter="{Binding }"
                            HorizontalAlignment="Left" VerticalAlignment="Top" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</DockPanel>

Your ItemsControl would be bound to an ObservableCollection of objects, and your Add/Remove buttons would simply add/remove items from that collection. Since it is an ObservableCollection, it will notify the UI when the collection gets changed and automatically update.