mercredi 6 décembre 2017

Reactive UI with your UWP applications [XAML,C#,RxUI]

In the tutorial we will create a sample application that uses ReactiveUI in a UWP application. what we will do is have a text field, and whenever the user types something into it, you want to make a network request which searches for that query. In bonus we will add a back off to wait for the user to stop typing before doing the request.

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