动态文本框绑定

Question

I am trying to make a form of sorts where the user will have the option to press a button to dynamically add more text boxes, with each text box to contain the path of a directory to exclude from a search. This is relatively trivial using code-behind, but my problem is doing it in proper MVVM.

The general markup for the structure is:

<ScrollViewer >
    <StackPanel>
        <DockPanel LastChildFill="False">
            <TextBox DockPanel.Dock="Left"/>
            <Button DockPanel.Dock="Right"
                    Content="+"/>
        </DockPanel>
    </StackPanel>
</ScrollViewer>

Clicking the button will add a new DockPanel with a TextBox and Button to the StackPanel . All buttons but the bottom-most will change to a minus sign. How can I somehow bind to the text of all the text boxes?

As an aside, once/if I get this working, would it be better to make it into its own component?

Answer 1

Quick pseudo-code to get you started:

cs (view model):

// INotifyPropertyChanged if you need, as well as full-properties with notification
public class Item
{
    public string Text {get; set;}
}

public ObservableCollection<Item> Items { get; } = new ObservableCollection<Item>();

void OnCommandAdd() => Items.Add(new Item());

xaml (view):

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding Text}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The idea is to use control able to display list (eg ItemsControl ) and collection of items in view model. Adding new element to view is done by adding item to that collection.

All TextBox es will have Text bound to corresponding property of item.