title: WPF 4.0 AutoCompleteBox TwoWay Binding
body: <p>I have a WPF window that has several Listbox and DataGrid controls. The main Listbox displays a list of Contractors. An Address(s) datagrid is bound to the Contractor ListBox and displays address(s) for the current selected Contractor. </p>
  
  <p>I want users of this Window(WPF) to be able to add Addresses to the selected Contractor using the native Datagrid Add functionality. I also want the users to be able to edit associated Address records by clicking in the datagrid cell and having the cell function as an AutoCompleteBox.</p>
  
  <p>I have partially successfully implemented the AutoCompleteBox in the State column of the datagrid control. Currently, the correct Text value for the current Contractor is displayed in the State column of the Address datagrid. If i edit the State cell I get expected autocomplete functionality and I can select a new State.</p>
  
  <p>What is not working is the TwoWay binding. Currently, if I change the current Address state it does not save back to the entity model or the db. Its not surprising since I know I dont have Twoway binding implemented correctly on this control.</p>
  
  <p>I have successfully implemented the Twoway binding with a combobox but the combobox obviously does not provide the autocomplete functionality I need.</p>
  
  <h2>Update</h2>
  
  <p>We worked on this late yesterday and arrive at a partial solution. Now we have a new issue. </p>
  
  <p>With a ComboBox you can have:
     DisplayMemberPath ="StateAbbrv" 
     SelectedValue="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" and<br>
     SelectedValuePath="StateID".</p>
  
  <p>With the AutoCompleteBox it seems you really only have:
     ValueMemberPath="StateID" and
     Text="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource StateConverter}}" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" ></p>
  
  <p>With the AutoCompleteBox you can’t have separate display and selected values. Because of my Window control binding and database structure I need to display a string value such as “CA California” while actually having a selected table key integer value in the background.</p>
  
  <p>To be clear, we need to have separate Display and Selected values in the Text part of the AutoCompleteBox control.</p>
  
  <p>Here is the Master ListBox displaying Contractors:</p>
  
  <pre><code>    &lt;Grid DataContext="{StaticResource tbl_PartnerViewSource}" HorizontalAlignment="Left" Name="grid3" VerticalAlignment="Top" Height="242" Width="295" Grid.Column="1" Margin="0,1,0,0" Grid.Row="3"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="31*" /&gt;
              &lt;RowDefinition Height="211*" /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Label Content="Contractor List" FontWeight="Bold" Height="25" Margin="0,0,169,0" Name="label10" Padding="3" VerticalAlignment="Top" /&gt;
          &lt;ListBox DisplayMemberPath="tbl_Organization.OrgName" Height="212" HorizontalAlignment="Right" ItemsSource="{Binding}" Margin="0,30,0,0" Name="orgNameListBox" SelectedValuePath="PtnrID"  VerticalAlignment="Center" Width="294" IsSynchronizedWithCurrentItem="True" Grid.RowSpan="2" SelectionChanged="orgNameListBox_SelectionChanged" TabIndex="11" MouseDoubleClick="orgNameListBox_MouseDoubleClick" DataContextChanged="orgNameListBox_DataContextChanged" SourceUpdated="orgNameListBox_SourceUpdated" IsManipulationEnabled="True" /&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p>Here is the Stack Panel containing the Datacontext supporting the controls in discussion:</p>
  
  <pre><code>&lt;StackPanel Grid.Row="3" Height="243" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="295" Grid.Column="1"&gt;&lt;/StackPanel&gt;
      &lt;Label Content="Address(s)" FontWeight="Bold" Height="25" HorizontalAlignment="Left" Margin="306,0,0,0" Name="label1" Padding="3" VerticalAlignment="Top" Width="648" Grid.Column="1" Grid.Row="1" /&gt;
      &lt;DataGrid Name="dataGridAddress" DataContext="{StaticResource tbl_Partnertbl_PartnerAddressViewSource}"  ItemsSource="{Binding}" SelectionMode="Single" SelectionUnit="CellOrRowHeader" AutoGenerateColumns="False" AlternatingRowBackground="#FFFF003B" AlternationCount="2" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Margin="308,22,0,0" Width="649" Height="113" VerticalAlignment="Top" CanUserDeleteRows="True" CanUserAddRows="True"&gt;
          &lt;DataGrid.Columns&gt;...
  </code></pre>
  
  <p>Here is the AutoCompleteBox that is partially working:</p>
  
  <pre><code>&lt;DataGridTemplateColumn x:Name="addState" Header="State" Width="100"&gt;
                      &lt;DataGridTemplateColumn.CellTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;my1:AutoCompleteBox Name="autoCompleteBox1" 
                                                   IsTextCompletionEnabled="True" 
                                                   ItemsSource="{Binding Source={StaticResource tbl_StateViewSource}}"
                                                   ValueMemberPath="StateID"
                                                   Text="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" &gt;
                                  &lt;my1:AutoCompleteBox.ItemTemplate&gt;
                                      &lt;DataTemplate&gt;
                                          &lt;StackPanel Orientation="Horizontal"&gt;
                                              &lt;TextBlock Text="{Binding Path=StateAbbrv}" Width="30" FontWeight="Bold" Margin="0,0,0,0" /&gt;
                                              &lt;TextBlock Text="{Binding Path=StateName}" /&gt;
                                          &lt;/StackPanel&gt;
                                      &lt;/DataTemplate&gt;
                                  &lt;/my1:AutoCompleteBox.ItemTemplate&gt;
                              &lt;/my1:AutoCompleteBox&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/DataGridTemplateColumn.CellTemplate&gt;
                  &lt;/DataGridTemplateColumn&gt;
  </code></pre>
  
  <p>Here is the Combobox with working TwoWay binding:</p>
  
  <pre><code>&lt;GridViewColumn x:Name="addrState" Header="State" Width="75"&gt;
                              &lt;GridViewColumn.CellTemplate&gt;
                                  &lt;DataTemplate&gt;
                                      &lt;ComboBox Name="comboAddressState" SelectedValue="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  Margin="{StaticResource Margin2}" DisplayMemberPath="StateAbbrv" SelectedValuePath="StateID" ItemsSource="{Binding Source={StaticResource tbl_StateViewSource}}" IsSynchronizedWithCurrentItem="False" IsEnabled="True" /&gt;
                                  &lt;/DataTemplate&gt;
                              &lt;/GridViewColumn.CellTemplate&gt;
                          &lt;/GridViewColumn&gt;
  </code></pre>
  
  <p>Here is the Windows.Resource Section:</p>
  
  <pre><code> &lt;Window.Resources&gt;
      &lt;CollectionViewSource x:Key="tbl_PartnerViewSource" d:DesignSource="{d:DesignInstance my:tbl_Partner, CreateList=True}"&gt;&lt;/CollectionViewSource&gt;
      &lt;CollectionViewSource x:Key="tbl_Partnertbl_PartnerAddressViewSource" Source="{Binding Path=tbl_PartnerAddress, Source={StaticResource tbl_PartnerViewSource}}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_Partnertbl_PartnerContactViewSource" Source="{Binding Path=tbl_PartnerContact, Source={StaticResource tbl_PartnerViewSource}}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_Partnertbl_PartnerContacttbl_PartnerContactCommChanAddrViewSource" Source="{Binding Path=tbl_PartnerContactCommChanAddr, Source={StaticResource tbl_Partnertbl_PartnerContactViewSource}}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_Partnertbl_PartnerSystemViewSource" Source="{Binding Path=tbl_PartnerSystem, Source={StaticResource tbl_PartnerViewSource}}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_Partnertbl_PartnerAliasViewSource" Source="{Binding Path=tbl_PartnerAlias, Source={StaticResource tbl_PartnerViewSource}}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_Partnertbl_PartnerCommentViewSource" Source="{Binding Path=tbl_PartnerComment, Source={StaticResource tbl_PartnerViewSource}}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_ServicedCustomerViewSource"  d:DesignSource="{d:DesignInstance my:tbl_ServicedCustomer, CreateList=True}"  /&gt;
      &lt;CollectionViewSource x:Key="tbl_SystemViewSource" d:DesignSource="{d:DesignInstance my:tbl_System, CreateList=True}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_PlatformViewSource" d:DesignSource="{d:DesignInstance my:tbl_Platform, CreateList=True}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_ManufacturerViewSource" d:DesignSource="{d:DesignInstance my:tbl_Manufacturer, CreateList=True}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_StateViewSource" d:DesignSource="{d:DesignInstance my:tbl_State, CreateList=True}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_ZIPViewSource" d:DesignSource="{d:DesignInstance my:tbl_ZIP, CreateList=True}" /&gt;
      &lt;CollectionViewSource x:Key="tbl_CityViewSource" d:DesignSource="{d:DesignInstance my:tbl_City, CreateList=True}" /&gt;
      &lt;Thickness x:Key="Margin1"&gt;8,-3,-7,-3&lt;/Thickness&gt;
      &lt;Thickness x:Key="Margin2"&gt;-7,-3,-7,-3&lt;/Thickness&gt;
  &lt;/Window.Resources&gt;
  </code></pre>
  
  <p>Here is a image of the Window(WPF):</p>
  
  <p><img src="https://i.stack.imgur.com/zv3Tt.gif" alt="enter image description here"></p>