如何通过ModelItem.Properties类将项目添加到通用列表？

Question

I'm trying to add new item to generic list. In my XAML application I have 2 text boxes and I have bound to properties.

<TextBox Text="{Binding Path=ModelItem.ReplaceThis, Mode=TwoWay}"></TextBox>
<TextBox Text="{Binding Path=ModelItem.ReplaceWithThat, Mode=TwoWay}"></TextBox>

on button click I want to add values of two fields to generic list that will be displayed in ListBox that bound to Generic List Property

<Button Name ="btnReplaceAdd" Content="Add" Width="50" Click="btnReplaceAdd_Click"></Button>
<ListBox ItemsSource="{Binding Path=ModelItem.ReplaceItems, Mode=OneWay}"/>

in the code behind to access properties I have the following code.

private void btnReplaceAdd_Click(object sender, RoutedEventArgs e)
{
    var _with = this.ModelItem.Properties["ReplaceThis"].Value;
    var _what = this.ModelItem.Properties["ReplaceWithThat"].Value;

    var foo = new List<RenameReplace>();        
    var bar = new RenameReplace() { Rwht = _what.ToString(), Rwth = _with.ToString() };
    foo.Add(bar);

    this.ModelItem.Properties["ReplaceItems"].SetValue(foo);
    this.ModelItem.Properties["ReplaceThis"].SetValue("");
    this.ModelItem.Properties["ReplaceWithThat"].SetValue("");
}

once execution of method finishes instead of seeing the value of that I passed I see MyProject.RenameReplace inside list box.

Is my problem with the way I'm binding XAML ListBox to generic property or in the way that I'm adding items to generic list?

Answer 1

Was able to solve the issue thanks to comments from @fmunkert who pointed to using ItemTemplate

had to replace next 4 lines in the code behind

var foo = new List<RenameReplace>();        
var bar = new RenameReplace() { Rwht = _what.ToString(), Rwth = _with.ToString() };
foo.Add(bar);
this.ModelItem.Properties["ReplaceItems"].SetValue(foo);

with this

var bar = new RenameReplace() { Rwht = _what, Rwth = _with };
this.ModelItem.Properties["ReplaceItems"].Collection.Add(bar);

now on XAML had to change

<ListBox ItemsSource="{Binding Path=ModelItem.ReplaceItems, Mode=OneWay}"/>

to this in order to be able to display two items side by side.

<ListBox ItemsSource="{Binding Path=ModelItem.ReplaceItems, Mode=OneWay}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding Path=ModelItem.Rwht}" />
            <TextBlock Grid.Column="1" Text="{Binding Path=ModelItem.Rwth}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>