Unable to bind data to an autocomplete box in a silverlight 4 datagrid

I'm new to silverlight and I'm tasked with changing the datagrid TextColumns to autocomplete boxes. I thought this should be fairly simple but apparently it isn't.

I'm able to bind the data from a list outside the datagrid but not from within.

I've been researching for two days now and everything I find seems to incorporate data from a database or is otherwise too complex for my newbie brain to figure out.

All I really need is a simple example and explanation of how to do this in a datagrid as opposed to regularly.

My code follows. It builds succesfully but does not work properly.

I'm sure this is a problem that many others must have come across.

I appreciate anyone's input, Thanks in advance. d.

    <UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  
         xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class="AccordionAutoCompleteBox.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"
mc:Ignorable="d"
d:DesignHeight="680" d:DesignWidth="1240">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel VerticalAlignment="Center">
        <toolkit:AccordionItem x:Name="AccordionItem2" FontSize="12" Background="LightBlue" BorderBrush="Wheat" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsSelected="False" MaxHeight="400">
            <sdk:DataGrid Name="AccordionGrid"  ItemsSource="{Binding ExpData}" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HeadersVisibility="All" BorderThickness="1" Margin="8" SelectionMode="Single" Canvas.ZIndex="-1" MaxHeight="360">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTemplateColumn Header="Exp">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <sdk:AutoCompleteBox x:Name="AutoCompGrid" Text="{Binding Exp, Mode=TwoWay}" ItemsSource="{Binding Exp}"  IsTextCompletionEnabled="True" />

                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTextColumn Header="Exp" Binding="{Binding Exp}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Desc" Binding="{Binding Desc}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Prod" Binding="{Binding Prod}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Source" Binding="{Binding Source}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Start" Binding="{Binding Start}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Reset" Binding="{Binding Reset}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Amt" Binding="{Binding Amt}" IsReadOnly="False" />

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </toolkit:AccordionItem>
        <sdk:AutoCompleteBox x:Name="AutoCompGrid2" Text="{Binding Exp}" ItemsSource="{Binding Exp}" IsTextCompletionEnabled="False" />
    </StackPanel>
</Grid>

And the code behind

    namespace AccordionAutoCompleteBox

{ public partial class MainPage : UserControl { public MainPage() { InitializeComponent();

        List<ExpData> myList = new List<ExpData>
        {
            new ExpData
            {Exp = "cell 1",
            Desc = "cell 2",
            Prod = "cell 3",
            Source = "cell 4",
            Start = "cell 5",
            Amt = "cell 6",
            Reset = "cell 7"},

            new ExpData
            {Exp = "cell 8",
            Desc = "cell 9",
            Prod = "cell 10",
            Source = "cell 11",
            Start = "cell 12",
            Amt = "cell 13",
            Reset = "cell 14"}
        };
        Accor开发者_Python百科dionGrid.ItemsSource = myList;
        AutoCompGrid2.ItemsSource = myList;

        this.AccordionItem2.Header = " Accordion Header ";

    }
}
public class ExpData
{
    public String Exp { get; set; }
    public String Desc { get; set; }
    public String Prod { get; set; }
    public String Source { get; set; }
    public String Start { get; set; }
    public String Reset { get; set; }
    public String Amt { get; set; }

    public ExpData(String exp, string desc, string prod, string source, string start, String reset, String amt)
    {
        Exp = exp;
        Desc = desc;
        Prod = prod;
        Source = source;
        Start = start;
        Reset = reset;
        Amt = amt;
    }

    public override string ToString()
    {
        return Exp;
    }

Your life would be a lot easier if you had a view model. :) Quick example of using a ViewModel to solve this.

public class ExpDataViewModel
{
  private List<ExpData> _listData;

  public ExpDataViewModel()
  {
    _listData = new List<ExpData>
        {
            new ExpData
            {Exp = "cell 1",
            Desc = "cell 2",
            Prod = "cell 3",
            Source = "cell 4",
            Start = "cell 5",
            Amt = "cell 6",
            Reset = "cell 7"},

            new ExpData
            {Exp = "cell 8",
            Desc = "cell 9",
            Prod = "cell 10",
            Source = "cell 11",
            Start = "cell 12",
            Amt = "cell 13",
            Reset = "cell 14"}
        };
  }

  public IEnumerable<ExpData> ListData
  {
    get {return _listData;}
  }     

  public IEnumerable<string> ExpItems
  {
    get {return _listData.Select(i => i.Exp);
  }
}

Then you would need to change your view:

<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  
         xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class="AccordionAutoCompleteBox.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:vm="[Your ViewModel's Namespace]"
mc:Ignorable="d"
d:DesignHeight="680" d:DesignWidth="1240">
<UserControl.Resources>
  <vm:ExpDataViewModel x:Key="vm" />
</UserControl.Resource>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource vm}">
        <StackPanel VerticalAlignment="Center">
        <toolkit:AccordionItem x:Name="AccordionItem2" FontSize="12" Background="LightBlue" BorderBrush="Wheat" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsSelected="False" MaxHeight="400">
            <sdk:DataGrid Name="AccordionGrid"  ItemsSource="{Binding ListData}" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HeadersVisibility="All" BorderThickness="1" Margin="8" SelectionMode="Single" Canvas.ZIndex="-1" MaxHeight="360">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTemplateColumn Header="Exp">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <sdk:AutoCompleteBox x:Name="AutoCompGrid" Text="{Binding Exp, Mode=TwoWay}" ItemsSource="{Binding Path=ExpItems, Source={StaticResource vm}}"  IsTextCompletionEnabled="True" />

                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTextColumn Header="Exp" Binding="{Binding Exp}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Desc" Binding="{Binding Desc}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Prod" Binding="{Binding Prod}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Source" Binding="{Binding Source}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Start" Binding="{Binding Start}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Reset" Binding="{Binding Reset}" IsReadOnly="False" />
                    <sdk:DataGridTextColumn Header="Amt" Binding="{Binding Amt}" IsReadOnly="False" />

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </toolkit:AccordionItem>
        <!-- not sure what this is supposed to be bound to --> 
        <sdk:AutoCompleteBox x:Name="AutoCompGrid2" Text="{Binding Exp}" ItemsSource="{Binding Exp}" IsTextCompletionEnabled="False" />
    </StackPanel>
</Grid>

And you can remove all your custom code from the code behind file.