ItemTemplate no afecta elemento seleccionado de AutoCompleteBox

Question

Estoy usando WPF toolkit AutoCompleteBox y he establecido la plantilla de artículos. El problema:. Los elementos de la lista vistazo gran emergente, pero no pasó mucho efecto en el cuadro de texto anterior (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}}">

Donde se unen directamente a la Person y nombre y la edad de retorno 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();
    }
}

Actualizar

Se tendrá que modificar la plantilla de la AutoCompleteBox. TextBox no puede mostrar un Rectangle lo que la solución será en función de cómo desea que esto se maneja. Este es un ejemplo que muestra una TextBox, un Rectangle y una 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>