遵循 MVVM 模式的自动完成文本框

Question

我有一个文本框，我想将其设为自动完成文本框。 当我输入文本框时我要显示的数据来自我的数据网格。我的数据网格有 4 列，我可以从数据网格中选择任何列。

这是我的文本框

         <TextBox Margin="0,93,39,18" Grid.Column="1" HorizontalAlignment="Right" Width="325">
            <TextBox.Style>
                <Style TargetType="TextBox">
                    <Style.Triggers>
                        <Trigger Property="Text" Value="">
                            <Setter Property="Background" Value="{StaticResource SearchHint}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBox.Style>
        </TextBox>

数据网格

    <DataGrid Name="Datagrid"  ItemsSource="{Binding Messages}" Margin="4,0,380,413" Grid.Row="1" AutoGenerateColumns="False"  
    IsReadOnly="True"  RowBackground="WhiteSmoke" >

我用谷歌搜索，得到的大多数示例都不遵循 WPF/MVVM 模式。我要做的是将文本块数据绑定到网格项。有人可以帮助我，告诉我从哪里开始吗？

Answer 1

解决这个问题有很多不同的方法，但可以说最突出的是可编辑组合框策略（他们在 Microsoft 的 WPF 考试中提出了很多关于此的问题，完全忽略了 MVVM 模式，但这是另一天的问题） 。 我将举一个例子来帮助您入门。 第一步是编写组合框和数据网格的代码......

  <StackPanel>
            <ComboBox
             IsEditable="True"
             IsTextSearchEnabled="True"
             IsSynchronizedWithCurrentItem="True"
             SelectedItem="{Binding MySelectedItem, Mode=TwoWay}"
             ItemsSource="{Binding MyItems}"
            >
                <ComboBox.InputBindings>
                    <KeyBinding  Key="Enter" Command="{Binding NotImplementedCommand}"/>
                </ComboBox.InputBindings>
            </ComboBox>
                <DataGrid
                ItemsSource="{Binding DriveList}"
                AutoGenerateColumns="True"
                />
        </StackPanel>

然后创建一个ViewModel...

public class ViewModel :INotifyPropertyChanged
{
    public ObservableCollection<string> MyItems { get; set; }
    public ObservableCollection<DriveInfo> DriveList { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;
    public ViewModel()
    {
        MyItems = new ObservableCollection<string>();
        DriveList = new ObservableCollection<DriveInfo>();
        foreach (DriveInfo di in DriveInfo.GetDrives())
        {
            DriveList.Add(di);
        }
        DriveListCollectionChanged(null, null);
        DriveList.CollectionChanged += DriveListCollectionChanged;

    }
    void DriveListCollectionChanged(object sender, 
                        System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        MyItems.Clear();
        List<string> temp = new List<string>();
        foreach (DriveInfo di in DriveList)
        {// add 4 columns from the DataGrid to the auto complete source
            temp.Add(di.Name);
            temp.Add(di.DriveType.ToString());
            if (di.IsReady)
            {
                temp.Add(di.DriveFormat);
                temp.Add(di.TotalSize.ToString());
                temp.Add(di.AvailableFreeSpace.ToString());
            }
        }
        foreach (string s in temp.Distinct())
        {
            MyItems.Add(s);
        }
    }
    private string _mySelectedItem;
    public string MySelectedItem
    {
        get { return _mySelectedItem; }
        set
        {
            if (value != _mySelectedItem)
            {
                _mySelectedItem = value;
                OnPropertyChanged("MySelectedItem");
            }
        }
    }
    private void OnPropertyChanged(string s)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(s));
        }
    }
}

此示例中断 DataGrid 源更改的事件，并使用多个列填充组合框。 如果您只做一个列，这里的解决方案会有所不同。 还有一些绑定深奥的内容，您可以在其中自动将组合框绑定到数据，但考虑到您的要求以及将多列异构字符串添加到组合框的意图，其教学价值是值得怀疑的。

在部署应用程序之前，您需要更好地优化事件处理程序，因为上面显示的事件处理程序仅用于演示目的。

要连接它，请将其（或其替代）放入您的 Xaml...

   <Window.Resources>
        <wpfApplication3:ViewModel  x:Key="ViewModel"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource ViewModel}">
        <!-- your xaml -->
    </Grid>  

上面的 ViewModel 类是一个 MVVM 兼容的解决方案，您可以将此类的实例绑定到呈现视图的 DataContext。

Answer 2

看看这个项目：

https://sourceforge.net/projects/laila-autocompletetextbox/

金块位于

https://www.nuget.org/packages/Laila.AutoCompleteTextBox

这就是你实现它的方式：

1. 创建一个实现 ISuggestionProvider 或 ISuggestionProviderAsync 接口的建议提供程序

2. 将控件和建议提供程序放入 XAML 中，并将属性绑定到数据上下文。查看源代码附带的简单示例。