CODEWITHSUNDEEP
c#wpfmvvm
Michael Brandon Morris
Michael Brandon Morris

Reputation: 498

Dynamic text boxes binding

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?

Upvotes: 1

Views: 303

Answers (1)

Sinatr
Sinatr

Reputation: 21999

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 (e.g. ItemsControl) and collection of items in view model. Adding new element to view is done by adding item to that collection.

All TextBoxes will have Text bound to corresponding property of item.

Upvotes: 3

Related Questions