ItemTemplate no afecta el elemento seleccionado de AutoCompleteBox

Question

Estoy usando wpf toolkit AutoCompleteBox y he configurado la plantilla de elementos. El problema: los elementos en la lista emergente se ven muy bien pero no tuvieron efecto en el cuadro de texto de arriba (el elemento seleccionado).

XAML:

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20"> 
     <Controls:AutoCompleteBox.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text="{Binding Name}" /> 
        <Rectangle Width="10" Height="10" Fill="LightGreen"/> 
        <TextBlock Text="{Binding Age}" /> 
       </StackPanel>  
      </DataTemplate> 
     </Controls:AutoCompleteBox.ItemTemplate> 
    </Controls:AutoCompleteBox> 

Código atrás:

public partial class MainWindow : Window 
{ 
    public List<Person> Persons { get; set; } 

    public MainWindow() { 
     InitializeComponent(); 

     Persons = new List<Person> { 
      new Person{Name = "Jhon",Age=35},       
      new Person{Name = "Kelly",Age=40}}; 


     x.ItemsSource = Persons; 
     DataContext = this; 
    } 

    bool SearchPerson(string search, object value) { 
     return (value as Person).Name.ToLower().Contains(search); 
    } 
} 

public class Person 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
} 

Answer 1

¿Qué desea mostrar en el TextBox? Para mostrar el nombre de la persona seleccionada puede agregar ValueMemberPath como esto

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20" 
          ValueMemberPath="Name"> 

Si desea mostrar tanto Name y Age en el TextBox puede utilizar ValueMemberBinding con un convertidor

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20" 
      ValueMemberBinding="{Binding Converter={StaticResource PersonConverter}}"> 

Cuando nos atamos directamente al Person y devolver Nombre y Edad en el convertidor

public class PersonConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     Person person = value as Person; 
     if (person != null) 
     { 
      return person.Name + " : " + person.Age.ToString(); 
     } 
     return string.Empty; 
    } 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

Actualización

Tendrás que editar la plantilla del AutoCompleteBox. TextBox no se puede mostrar un Rectangle por lo que la solución dependerá de cómo desee que se maneje esto. Aquí hay un ejemplo que muestra un TextBox, un Rectangle y un TextBlock en la Plantilla. Hay que darle lo que quiere

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20" Grid.Row="0" 
          ValueMemberPath="Name" 
          Style="{DynamicResource AutoCompleteBoxStyle1}"> 
    <Controls:AutoCompleteBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding Name}" /> 
       <Rectangle Width="10" Height="10" Fill="LightGreen"/> 
       <TextBlock Text="{Binding Age}" /> 
      </StackPanel> 
     </DataTemplate> 
    </Controls:AutoCompleteBox.ItemTemplate> 
</Controls:AutoCompleteBox> 

<Style x:Key="AutoCompleteBoxStyle1" TargetType="{x:Type Controls:AutoCompleteBox}"> 
    <Setter Property="IsTabStop" Value="False"/> 
    <Setter Property="Padding" Value="2"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFA3AEB9" Offset="0"/> 
       <GradientStop Color="#FF8399A9" Offset="0.375"/> 
       <GradientStop Color="#FF718597" Offset="0.375"/> 
       <GradientStop Color="#FF617584" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Background" Value="White"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="MinWidth" Value="45"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Controls:AutoCompleteBox}"> 
       <Grid Opacity="{TemplateBinding Opacity}"> 
        <TextBox x:Name="Text" Opacity="1" Visibility="Visible" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsTabStop="True" Margin="0" Padding="{TemplateBinding Padding}" Style="{TemplateBinding TextBoxStyle}"/> 
        <StackPanel Name="stackPanel" Orientation="Horizontal" VerticalAlignment="Top" Visibility="Visible" IsHitTestVisible="False" Grid.ZIndex="1"> 
         <TextBlock Margin="6,9,0,0" 
            VerticalAlignment="Center" 
            Opacity="0" 
            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:AutoCompleteBox}}, 
                Path=SelectedItem.Name}" /> 
         <Rectangle Width="10" Height="10" VerticalAlignment="Center" Fill="LightGreen" /> 
         <TextBlock VerticalAlignment="Center" 
            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:AutoCompleteBox}}, 
                Path=SelectedItem.Age}"/> 
        </StackPanel> 
        <Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed"> 
         <Border.ToolTip> 
          <ToolTip x:Name="validationTooltip" Placement="Right"> 
           <ToolTip.Triggers> 
            <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
             <BeginStoryboard> 
              <Storyboard> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip"> 
                <DiscreteObjectKeyFrame KeyTime="0"> 
                 <DiscreteObjectKeyFrame.Value> 
                  <System:Boolean>True</System:Boolean> 
                 </DiscreteObjectKeyFrame.Value> 
                </DiscreteObjectKeyFrame> 
               </ObjectAnimationUsingKeyFrames> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
           </ToolTip.Triggers> 
           <ToolTip.Template> 
            <ControlTemplate TargetType="{x:Type ToolTip}"> 
             <Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0"> 
              <Grid.RenderTransform> 
               <TranslateTransform X="-25"/> 
              </Grid.RenderTransform> 
              <Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/> 
              <Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/> 
              <Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/> 
              <Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/> 
              <Border Background="#FFDC000C" CornerRadius="2"> 
               <TextBlock Foreground="White" MaxWidth="250" Margin="8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/> 
              </Border> 
             </Grid> 
            </ControlTemplate> 
           </ToolTip.Template> 
          </ToolTip> 
         </Border.ToolTip> 
         <Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12"> 
          <Path Data="M1,0L6,0A2,2,90,0,1,8,2L8,7z" Fill="#FFDC000C" Margin="1,3,0,0"/> 
          <Path Data="M0,0L2,0 8,6 8,8" Fill="White" Margin="1,3,0,0"/> 
         </Grid> 
        </Border> 
        <Popup x:Name="Popup"> 
         <Grid Background="{TemplateBinding Background}" Opacity="{TemplateBinding Opacity}"> 
          <Border x:Name="PopupBorder" BorderThickness="0" Background="#11000000" HorizontalAlignment="Stretch" > 
           <Border.RenderTransform> 
            <TranslateTransform X="1" Y="1"/> 
           </Border.RenderTransform> 
           <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" HorizontalAlignment="Stretch" Opacity="1" Padding="0"> 
            <Border.Background> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFDDDDDD" Offset="0"/> 
              <GradientStop Color="#AADDDDDD" Offset="1"/> 
             </LinearGradientBrush> 
            </Border.Background> 
            <Border.RenderTransform> 
             <TransformGroup> 
              <TranslateTransform X="-1" Y="-1"/> 
             </TransformGroup> 
            </Border.RenderTransform> 
            <ListBox x:Name="Selector" BorderThickness="0" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemTemplate="{TemplateBinding ItemTemplate}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}" ScrollViewer.VerticalScrollBarVisibility="Auto"/> 
           </Border> 
          </Border> 
         </Grid> 
        </Popup> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="SelectedItem" Value="{x:Null}"> 
         <Setter TargetName="stackPanel" Property="Visibility" Value="Hidden"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>