使用 WPF Toolkit 将 ComboBox 转换为 AutoCompleteBox [英] Converting a ComboBox to an AutoCompleteBox using the WPF Toolkit

问题描述

我在实现复杂"的转换时遇到了一些麻烦ComboBox 到同样复杂的 AutoCompleteBox.我的目标是能够选择和设置 ShoppingCart 的项目，使其类似于列表中的项目之一.以下是重现我的情况的三个步骤(我正在使用 Stylet 及其 SetAndNotify() INPC 方法):

I'm having a bit of trouble to achieve the conversion of a "complex" ComboBox to an equally complex AutoCompleteBox. My goal is to be able to select and set a ShoppingCart's Item to be like one of the Items of a list. Here's the three steps to take to reproduce my situation (I'm using Stylet and its SetAndNotify() INPC method):

1. 创建两个对象，一个只有 Name 属性，另一个只有另一个对象作为属性

1. Create two objects, one having only a Name property and the other one having only the other object as a property

public class ItemModel : PropertyChangedBase
{
    private string _name;
    public string Name
    {
        get => _name;
        set => SetAndNotify(ref _name, value);
    }
}

public class ShoppingCartModel : PropertyChangedBase
{
    public ItemModel Item { get; set; }
}

初始化并填充 DataContext 中的 ItemsList 和 Shoppingcart (因为我们使用的是 MVVM，它是 ViewModel)

public ShoppingCartModel ShoppingCart { get; set; }
public ObservableCollection<ItemModel> ItemsList { get; set; }

public ShellViewModel()
{
    ItemsList = new ObservableCollection<ItemModel>()
    {
        new ItemModel { Name = "T-shirt"},
        new ItemModel { Name = "Jean"},
        new ItemModel { Name = "Boots"},
        new ItemModel { Name = "Hat"},
        new ItemModel { Name = "Jacket"},
    };

    ShoppingCart = new ShoppingCartModel() { Item = new ItemModel() };
}

在视图中创建 AutoCompleteBox、ComboBox 和一个小的 TextBlock 来测试它:

Create the AutoCompleteBox, ComboBox, and a small TextBlock inside the View to test it all out:

<Window [...] xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Input.Toolkit">

    <!-- Required Template to show the names of the Items in the ItemsList -->
    <Window.Resources>
        <DataTemplate x:Key="AutoCompleteBoxItemTemplate">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="Transparent">
                <Label Content="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <StackPanel>
        <!-- AutoCompleteBox: can see the items list but selecting doesn't change ShoppingCart.Item.Name -->
        <Label Content="AutoCompleteBox with ShoppingCart.Item.Name as SelectedItem:"/>
        <toolkit:AutoCompleteBox ItemsSource="{Binding ItemsList}"
                                 ValueMemberPath="Name"
                                 SelectedItem="{Binding Path=ShoppingCart.Item.Name}" 
                                 ItemTemplate="{StaticResource AutoCompleteBoxItemTemplate}"/>

        <!-- ComboBox: can see the items list and selecting changes ShoppingCart.Item.Name value -->
        <Label Content="ComboBox with ShoppingCart.Item.Name as SelectedValue:"/>
        <ComboBox ItemsSource="{Binding ItemsList}" 
                  DisplayMemberPath="Name"
                  SelectedValue="{Binding Path=ShoppingCart.Item.Name}"
                  SelectedValuePath="Name"
                  SelectedIndex="{Binding Path=ShoppingCart.Item}" />

        <!-- TextBox: Typing "Jean" or "Jacket" updates the ComboBox, but not the AutoCompleteBox -->
        <Label Content="Value of ShoppingCart.Item.Name:"/>
        <TextBox Text="{Binding Path=ShoppingCart.Item.Name}"/>
    </StackPanel>
</window>

将 AutoCompleteBox 的 SelectedItem 的绑定模式更改为 TwoWay 使其打印[ProjectName].ItemModel"；这意味着 (我猜?) 它正在获取 ItemModels 而不是字符串，但我似乎无法让它工作.任何帮助将不胜感激，谢谢，如果可以缩小我的帖子，请随时编辑我的帖子.

Changing the Binding Mode of the AutoCompleteBox's SelectedItem to TwoWay makes it print "[ProjectName].ItemModel" which means (I guess?) it's getting ItemModels and not strings, but I can't seem to make it work. Any help will be appreciated, thanks and feel free to edit my post if it's possible to make it smaller.

推荐答案

经过多次尝试，终于找到了罪魁祸首:

After a lot of attempts, I finally found the culprits :

• INPC 未在 ShoppingCartModel.Item 中实现，尽管 PropertyChangedBase 继承 (实现 INPC 或删除 PropertyChangedBase 继承工作)

• INPC not implemented in ShoppingCartModel.Item despite the PropertyChangedBase inheritance (either implementing INPC or remove the PropertyChangedBase inheritance work)

public class ShoppingCartModel : PropertyChangedBase
{
    private ItemModel _item;
    public ItemModel Item
    {
        get => _item;
        set => SetAndNotify(ref _item, value);
    }
}

AutoCompleteBox 的SelectedItem 必须与ItemsSource 类型相同，并且有TwoWay 模式Binding>

AutoCompleteBox's SelectedItem must be of the same type of ItemsSource, and have a TwoWay Mode Binding

<toolkit:AutoCompleteBox ItemsSource="{Binding ItemsList}"
                         ValueMemberPath="Name"
                         SelectedItem="{Binding Path=ShoppingCart.Item, Mode=TwoWay}" 
                         ItemTemplate="{StaticResource AutoCompleteBoxItemTemplate}"/>

最后……最神秘的是 ComboBox！只是在那里它会与 AutoCompleteBox 混淆，我不知道为什么，只需评论整个 ComboBox 就可以让它一切正常.如果您知道 ComboBox 为什么会破坏 AutoCompleteBox 的绑定，请随时提供帮助.

And finally... the most mysterious one is the ComboBox! Simply by being there it messes with the AutoCompleteBox and I have no idea why, just commenting the whole ComboBox makes it all work. If you know why the ComboBox breaks the AutoCompleteBox's binding feel free to help.

还有另一个问题，当在 ListView 中使用 AutoCompleteBox 时，但是 它是最好在此处针对该问题创建一个单独的问题

There's another problem though, when using an AutoCompleteBox inside a ListView, but it's better to create a separate question for that issue here

这篇关于使用 WPF Toolkit 将 ComboBox 转换为 AutoCompleteBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！