The idea is not mine but taken from the ReactiveUI.
First create your UWP application and add the ReactiveUI nuget package:
Either by using the command line:
Or in the Nuget package Manager:
Once installed let the fun begin!
Because we want to do a search we will have to bind a property to the textblock, first in the ViewModel of the page we will add:
private string _searchValue; public string SearchValue { get { return _searchValue; } set { Set(ref _searchValue, value); } }
Next in the XAML page we will add the SearchValue property to the AutoSuggestBox control as follow:
<AutoSuggestBox x:Name="SearchBoxSuggestions" Grid.Row="0" PlaceholderText="{Binding Path=[txt_SearchPlaceHolder], Source={StaticResource LocalizedStrings}, FallbackValue='txt_SearchPlaceHolder'}" QueryIcon="Find" Text="{Binding SearchValue, Mode=TwoWay}" />
In our ViewModel we will need to setup the ReactiveUI events:
public void SetupRxUI() { this.WhenAnyValue(x => x.SearchValue) .Where(x => x != null && x.Length >= 3) .Subscribe(o => OnSearchCommand()); }
This means that when the SearchValue property changes and that it is not null and have more then 2 chars we will launch the OnSearchCommand() method.
public void OnSearchCommand() { //do a search }
We can even imagine that the search command should not be fired every time but only once the user has stopped typing for 700 milliseconds and we would have something like this:
public void SetupRxUI() { var Interval = TimeSpan.FromMilliseconds(700); this.WhenAnyValue(x => x.SearchValue) .Where(x => x != null && x.Length >= 3) .Throttle(Interval, RxApp.MainThreadScheduler) .Subscribe(o => OnSearchCommand()); }
and there you have it!
//Happy Coding