使用 MahApps.Metro 使用下拉菜单进行增量搜索
Incremental search with dropdown using MahApps.Metro
有人可以指导我如何在文本输入中实现增量搜索的正确方向吗?备选方案显示在文本输入字段下方的下拉列表中?
问题领域
我们已经能够在对话框中实现增量搜索,但不太了解如何从文本字段中设计和实现它。我们需要合并哪些components/controls/element,如何连接这些?我们使用的是 MahApps.Metro 的 1.1.2 版本,切换到 pre-alpha 版本有点麻烦。
一个小例子
假设我们正在寻找姓名,并且我们在字段中输入了 sa
,那么我们希望下拉列表中包含带有该前缀的姓名,即 Samantha
,Sara
、Sarah
、Savannah
、more ...
为了实现它,您需要一个文本框和一个弹出窗口。
有一个非常粗略的例子说明如何实现你想要的。
一个视图模型:
[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 属性 setter。
有人可以指导我如何在文本输入中实现增量搜索的正确方向吗?备选方案显示在文本输入字段下方的下拉列表中?
问题领域
我们已经能够在对话框中实现增量搜索,但不太了解如何从文本字段中设计和实现它。我们需要合并哪些components/controls/element,如何连接这些?我们使用的是 MahApps.Metro 的 1.1.2 版本,切换到 pre-alpha 版本有点麻烦。
一个小例子
假设我们正在寻找姓名,并且我们在字段中输入了 sa
,那么我们希望下拉列表中包含带有该前缀的姓名,即 Samantha
,Sara
、Sarah
、Savannah
、more ...
为了实现它,您需要一个文本框和一个弹出窗口。 有一个非常粗略的例子说明如何实现你想要的。 一个视图模型:
[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 属性 setter。