wpf - 遵循 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 模式。我要做的是将文本 block 数据绑定(bind)到网格项目。有人可以通过给我点从哪里开始来帮助我。

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 的源发生更改的事件，并使用 MULTIPLE 列填充组合框。如果你只是做一个单列，这里的解决方案会有所不同。还有一些绑定(bind)深奥，您可以在其中自动将组合框绑定(bind)到数据，但考虑到您的要求以及您将多列异构字符串添加到组合框的意图，它的教学值(value)值得怀疑。

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

要将其连接起来，请将其(或其替代)放入您的 Xaml...

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

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