ItemTemplate hat keinen Einfluss auf ausgewählte Artikel von AutoCompleteBox

Question

Ich bin mit Wpf Toolkit AutoCompleteBox und ich habe die Artikelvorlage festgelegt. Das Problem:. Die Angebote im Pop-up große Liste aussehen, aber es hat nicht Einfluss auf das Textfeld oben (das ausgewählte Element) nehmen

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>

-Code hinter:

 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

Was wollen Sie in der TextBox zeigen? Um den Namen der ausgewählten Person anzuzeigen Sie ValueMemberPath wie diese

eintragen

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

Wenn Sie sowohl Name und Age im TextBox angezeigt werden möchten, können Sie ValueMemberBinding mit einem Konverter

verwenden

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

Wo sind wir direkt an die Person binden und zurück Name und Alter im Konverter

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();
    }
}

Aktualisieren

Sie finden die Vorlage des AutoCompleteBox zu bearbeiten haben. TextBox kann keine Rectangle angezeigt werden, so wird die Lösung in Abhängigkeit davon, wie Sie wollen, dass diese behandelt werden. Hier ist ein Beispiel, dass zeigt ein TextBox, ein Rectangle und ein TextBlock in der Vorlage. Es sollte Sie geben, was Sie wollen

<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>