使用MahApps.Metro進行下拉式增量搜索

Question

有人可以指導我正確的方向，以便如何從文本輸入中實現增量搜索，在文本輸入字段下的下拉列表中顯示替代項嗎？

問題領域

我們已經能夠在對話框中實現增量搜索，但是還不太了解如何從文本字段設計和實現它。 我們需要結合哪些組件/控件/元素，以及如何將它們連接起來？ 我們正在使用MahApps.Metro的1.1.2版本，並認為切換到預Alpha版本有點麻煩。

一個小例子

假設我們正在尋找名稱，並且已經在字段中輸入了sa ，那么我們希望使用帶有該前綴的名稱進行下拉，例如Samantha ， Sara ， Sarah ， Savannah ， more ...

Answer 1

為了實現它，您將需要一個文本框和一個彈出窗口。 有一個非常粗糙的示例，說明如何實現所需的功能。 一個ViewModel：

[PropertyChanged.ImplementPropertyChanged]
class SearchViewModel
{
    private readonly string[] items;
    public string[] SearchResults { get; private set; }
    public bool IsSearchShown { get; set; }
    public string SearchText { get; set; }

    private void OnSearchTextChanged() 
    {
        UpdateSearchResults();
        IsSearchShown = true;
    }

    public string SelectedSearchItem { get; set; }

    private void OnSelectedSearchItemChanged()
    {
        SearchText = SelectedSearchItem;
        IsSearchShown = false;
    }

    private void UpdateSearchResults()
    {
        SearchResults = items.Where(item => item.StartsWith(SearchText)).ToArray();
    }

    public SearchViewModel(string[] items)
    {
        this.items = items;
        SearchResults = new string[0];
    }
}

查看xaml：

<Grid>
    <TextBox Text="{Binding SearchText,UpdateSourceTrigger=PropertyChanged}" x:Name="searchTextBox"/>
    <Popup IsOpen="{Binding IsSearchShown}" PlacementTarget="{Binding ElementName=searchTextBox}">
        <ListBox ItemsSource="{Binding SearchResults}" SelectedItem="{Binding SelectedSearchItem}"/>
    </Popup>
</Grid>

為了簡化我使用Fody.PropertyChanged的代碼，請考慮到它將對OnSelectedSearchItemChanged和OnSearchTextChanged的調用注入到SelectedSearchItem和SearchText屬性設置器中。