How to add selected item from AutoCompleteBox to ListBox or Datagrid?

I am trying to build the scenario where I can pick any item from a collection of items and being able to add this text string to a listbox or datagrid by clicking ‘Add’ button. I also need to be able to remove the item from listbox or datagrid by clicking 'Remove' button. I started this but have problem to make it work. I am wondering what the problem is. Any ideas are highly appreciated. Thank 开发者_高级运维you!

XAML:

<UserControl 
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  
x:Class="AutoCompleteBoxSimpleTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
mc:Ignorable="d" >

<StackPanel x:Name="LayoutRoot" Background="White" Width="150">
    <TextBlock Text="{Binding ElementName=MyAutoCompleteBox, Path=SelectedItem, TargetNullValue='No item selected', StringFormat='Selected Item: {0}'}" />      
    <sdk:AutoCompleteBox x:Name="MyAutoCompleteBox" IsTextCompletionEnabled="True" ItemsSource="{Binding Items}" />
    <Button x:Name="AddButton" Click="AddButton_Click" Content="AddButton" />
    <Button x:Name="RemoveButton" Click="RemoveButton_Click" Content="RemoveButton" />
    <ListBox x:Name="ListBox" BorderThickness="0" SelectionMode="Multiple" />

    <sdk:DataGrid x:Name="dgEditPackageProperties_ADEntities">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTemplateColumn x:Name="dgtcEditPackageProperties_Icon"/>
            <sdk:DataGridTextColumn x:Name="dgtcEditPackageProperties_Entities" Header="AD Entities with Access" /> 
        </sdk:DataGrid.Columns> 
    </sdk:DataGrid>
</StackPanel>

Code Behind:

public partial class MainPage : UserControl
{
    private IList<string> myDataList = null;
    string currentItemText;
    public IList<string> Items
    {
        get;
        private set;
    }

    public MainPage()
    {
        InitializeComponent();

        Items = new List<string>();
        Items.Add("One");
        Items.Add("Two");
        Items.Add("Three");
        Items.Add("Four");

        DataContext = this;
    }

    private void AddButton_Click(object sender, RoutedEventArgs e)
    {
        if (MyAutoCompleteBox.SelectedItem != null)
        {

            foreach (var item in MyAutoCompleteBox.SelectedItem)
            {
                ListBox.Items.Add(item);
                myDataList.Remove(item);
            }
            ApplyDataBinding();
        }
    }

    private void RemoveButton_Click(object sender, RoutedEventArgs e)
    {
        if (ListBox.SelectedItems != null)
        {
            int count = ListBox.SelectedItems.Count - 1;
            for (int i = count; i >= 0; i--)
            {
                //myDataList.Add(ListBox.SelectedItems[i]);
                ListBox.Items.Remove(ListBox.SelectedItems[i]);
            }
            ApplyDataBinding();
        }
    }

    private void ApplyDataBinding()
    {
        MyAutoCompleteBox.ItemsSource = null;
        MyAutoCompleteBox.ItemsSource = myDataList;
    }

}

For starters, if you use an ObservableCollection<> for myDataList instead of List<> you can just add and remove items and the control will auto-update.

Second, try not to do remove items while iterating over them. Put them in a seperate List first.

And finally, where are you even CREATING myDataList ? :)

Instead of giving the autocomplete box a name and checking its selected item that way, you can just bind to its selectedItem property. Then in your "AddButton_Click" you can simply add the selectedItem you bind to.