WP7 In-App Searching, Filtering

A first pass attempt

The scenario and the options

• Scrolling – Not ideal for most states.
• Jump List – I like this functionality but found for my view that it wasted too much space and got in the way of existing content.
• Breaking up – I did not want to add another level or step of navigation.
• Searching / filtering – Made the most sense for my scenario at this time.

A picture says a thousand words

Current Operation

• Clicking the search icon in the application bar makes the search control visible.
• Note that clicking the hardware search button activates the phone’s Bing search, and not the in-app search. Best I can tell the hardware search button only performs in-app searching with certain select “rockstar” apps. Bummer; I think, I could see that going either way.
• Focus is automatically shifted to the search textbox and the keyboard pops up.
• User starts typing and the list is filtered on the fly.
• User can tap away from the search control to hide the keyboard and work with the filtered list. The search control remains visible to make it obvious a partial list is showing and for possible further filtering.
• User can click the trash can icon to delete the contents of the search text and reset the filter.
• User can click the Close / Cancel ‘X’ or click the search icon again to hide the search control. This clears the filter, making all records visible again.

Search User Control XAML

<UserControl x:Class="RiverBuddy.Controls.SearchControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:b="clr-namespace:Phone.Framework.Behaviors;assembly=Phone.Framework" mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="62" d:DesignWidth="480">    
    <!-- Background changed to transparent at runtime -->
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,3,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="8"/>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="8"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="68" />
        </Grid.RowDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Width="48" Height="48">
            <Button.Background>
                <SolidColorBrush Color="{StaticResource PhoneContrastBackgroundColor}"/>
            </Button.Background>
            <Button.OpacityMask>
                <ImageBrush Stretch="Fill" ImageSource="/Images/appbar.feature.search.rest.png"/>
            </Button.OpacityMask>
            <Image  Height="48" Width="48" Source="/Images/appbar.feature.search.rest.png" 
               HorizontalAlignment="Center" Stretch="UniformToFill"/>
        </Button>
        <TextBox Grid.Column="1" x:Name="uxSearchTextBlock" Text="{Binding SearchText, Mode=TwoWay}" 
                 VerticalAlignment="Top" Margin="-10,0,0,0" HorizontalAlignment="Stretch">
            <i:Interaction.Behaviors>
                <b:UpdateOnTextChangedBehavior/>
            </i:Interaction.Behaviors>
        </TextBox>
        <Border Grid.Column="2" BorderThickness="2" BorderBrush="{StaticResource PhoneBorderBrush}" Height="48" Width="48">
            <Button  Height="48" Width="48" x:Name="uxDeleteButton" Click="uxDeleteButton_Click" >
                <Button.Background>
                    <SolidColorBrush Color="{StaticResource PhoneContrastBackgroundColor}"/>
                </Button.Background>
                <Button.OpacityMask>
                    <ImageBrush Stretch="Fill" ImageSource="/Images/appbar.delete.rest.png"/>
                </Button.OpacityMask>
                <Image Source="/Images/appbar.delete.rest.png" HorizontalAlignment="Center" Stretch="UniformToFill"/>
            </Button>
        </Border>
        <Border Grid.Row="0" Grid.Column="3"/>
        <Border Grid.Column="4" BorderThickness="2" BorderBrush="{StaticResource PhoneBorderBrush}" Height="48" Width="48">
            <Button   x:Name="uxCloseButton"
                Height="48" Width="48"
                Click="uxCloseButton_Click" >
                <Button.Background>
                    <SolidColorBrush Color="{StaticResource PhoneContrastBackgroundColor}"/>
                </Button.Background>
                <Button.OpacityMask>
                    <ImageBrush Stretch="Fill" ImageSource="/Images/appbar.close.rest.png"/>
                </Button.OpacityMask>
                <Image Source="/Images/appbar.close.rest.png" HorizontalAlignment="Center" Stretch="UniformToFill"/>
            </Button>
        </Border>
        <Border Grid.Row="0" Grid.Column="4"/>
    </Grid>
</UserControl>

Databound Searcher class

using System.Windows.Input;
using Phone.Framework;
namespace RiverBuddy.Controls
{
    public class Searcher : NotifyPropertyChangedBase
    {
        private void ExecuteSearch()
        {
            if (null != this.SearchCommand && this.SearchCommand.CanExecute(null))
            {
                this.SearchCommand.Execute(this.SearchText);
            }
        }
        private string _searchText;
        public string SearchText
        {
            get { return _searchText; }
            set
            {
                if (_searchText != value)
                {
                    _searchText = value;
                    OnPropertyChanged("SearchText");
                    ExecuteSearch();
                }
            }
        }
        private ICommand _searchCommand;
        public ICommand SearchCommand
        {
            get { return _searchCommand; }
            set
            {
                if (_searchCommand != value)
                {
                    _searchCommand = value;
                    OnPropertyChanged("SearchCommand");
                }
            }
        }
        public void Reset()
        {
            this.SearchText = string.Empty;
        }
        
    }
}

Search UserControl code-behind

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
namespace RiverBuddy.Controls
{
    public partial class SearchControl //: UserControl
    {
        public SearchControl()
        {
            InitializeComponent();
            Init();
        }
        private void Init()
        {
            this.Loaded += SearchControl_Loaded;
            this.Searcher = new Searcher();
        }
        private void SearchControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (DesignerProperties.IsInDesignTool) return;
            LayoutRoot.Background = new SolidColorBrush(Colors.Transparent);
        }
        public static DependencyProperty SearchCommandProperty = DependencyProperty.Register("SearchCommand",
                                                                                             typeof (ICommand),
                                                                                             typeof (SearchControl),
                                                                                             new PropertyMetadata(null,
                                                                                                                  SearchCommandChanged));
        public ICommand SearchCommand
        {
            get { return (ICommand)GetValue(SearchCommandProperty); }
            set { SetValue(SearchCommandProperty, value); }
        }
        private static void SearchCommandChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            var ctl = (SearchControl) o;
            ctl.Searcher.SearchCommand = ctl.SearchCommand;
        }
        private Searcher Searcher
        {
            get { return this.LayoutRoot.DataContext as Searcher; }
            set { this.LayoutRoot.DataContext = value; }
        }
        private void uxCloseButton_Click(object sender, RoutedEventArgs e)
        {
            //this.Visibility = Visibility.Collapsed;
            this.Searcher.Reset();
            OnClosed(new EventArgs());
        }
        public event EventHandler Closed;
        private void OnClosed(EventArgs e)
        {
            if (null != Closed)
                Closed(this, e);
        }
        protected override void OnLostFocus(RoutedEventArgs e)
        {
            base.OnLostFocus(e);
            
            //if (uxSearchTextBlock.Text.Length == 0)
              //  OnClosed(new EventArgs());
            return;
        }
        public void Reset()
        {
            this.Searcher.Reset();
        }
        public void ShowKeyboard()
        {
            uxSearchTextBlock.Focus();
        }
        private void uxDeleteButton_Click(object sender, RoutedEventArgs e)
        {
            uxSearchTextBlock.Text = string.Empty;
            ShowKeyboard();
        }
    }
}

• Closed event – For some reason on the view that used the control, my BoolToVisibilityConverter was not working to manage when the search was visible. So for now the using view wraps the control in a border and sets visibility on that. The control raises a Closed event and the view is responsible for hiding the control’s parent. PropertyChanged could have worked.
• ShowKeyboard – The view using the control will show the control when the search button is clicked. I tried to get the user control to automatically focus and show the keyboard but with the lack of a VisibilityChanged event or property change notification, I did not see an immediate way to do this automatically. I’m sure there is a way.
• Delete button – Focus moves out of the search textbox (if there) when clicking the delete button, which takes away focus from the textbox. Usually a user would want to type something new so the keyboard is shown again.

The view XAML snippet

<Views:PhoneApplicationPageBase.Resources>
    <VML:StateRiversViewModelLocator x:Key="viewModelLocator" />
    <fwConverters:BoolToVisibilityConverter x:Key="VisibilityConverter"/>
</Views:PhoneApplicationPageBase.Resources>
<Views:PhoneApplicationPageBase.DataContext>
    <Binding Source="{StaticResource viewModelLocator}" Path="ViewModel"/>
</Views:PhoneApplicationPageBase.DataContext> 
<!-- For some reason setting visibility at user control level via binding wasn't working (?)-->
<Border Visibility="{Binding IsSearchVisible, Converter={StaticResource VisibilityConverter}}" >
    <Controls:SearchControl x:Name="uxSearchControl" SearchCommand="{Binding SearchCommand}" />
</Border>
<!-- other XAML removed -->
<ListBox x:Name="MainListBox" ItemsSource="{Binding RiversView.View}" Margin="0,-5,8,0" >
    <!-- ... -->
</ListBox>

using System;
using System.Windows.Controls;
using RiverBuddy.ViewModels;
namespace RiverBuddy.Views
{
    public partial class StateRiversView 
    {
        public StateRiversView()
        {
            InitializeComponent();
            uxSearchControl.Closed += uxSearchControl_Closed;
        }
        private StateRiversViewModel ViewModel
        {
            get { return LayoutRoot.DataContext as StateRiversViewModel; }
        }
        private void uxSearchControl_Closed(object sender, EventArgs e)
        {
            this.ViewModel.IsSearchVisible = false;
        }
        private void uxSearchToolButton_Click(object sender, EventArgs e)
        {
            this.ViewModel.IsSearchVisible = !this.ViewModel.IsSearchVisible;
            if (this.ViewModel.IsSearchVisible)
                uxSearchControl.ShowKeyboard();
            else 
                uxSearchControl.Reset();
        }
    }
}

using System;
using System.Collections.ObjectModel;
using System.Windows.Data;
using System.Windows.Input;
using GalaSoft.MvvmLight.Command;
using Phone.Framework;
using RiverBuddy.Config;
using RiverBuddy.Core.Extensions;
using RiverBuddy.Data;
using RiverBuddy.Model;
namespace RiverBuddy.ViewModels
{
    public class StateRiversViewModel : AppViewModelBase
    {
        public StateRiversViewModel()
        {
            return;
        }        
        private ObservableCollection<RiverModel> _rivers;
        private CollectionViewSource _riversView;
        public CollectionViewSource RiversView
        {
            get
            {
                if (null == _riversView)
                {
                    _riversView = new CollectionViewSource();
                    //_riversView.Filter += FilterRiversView;
                }
                return _riversView;
            }
        }
        public ObservableCollection<RiverModel> Rivers
        {
            get { return _rivers; } 
            set
            {
                if (_rivers != value)
                {
                    _rivers = value;
                    RaisePropertyChanged("Rivers");
                    this.RiversView.Source = _rivers;
                }
            }
        }
        public void Refresh()
        {
            /* code to load data removed for brevity */
            // call some async method, in completed set this Rivers
        }
        private bool _isSearchVisible;
        public bool IsSearchVisible
        {
            get { return _isSearchVisible; }
            set
            {
                if (_isSearchVisible != value)
                {
                    _isSearchVisible = value;
                    RaisePropertyChanged("IsSearchVisible");
                }
            }
        }
        public ICommand SearchCommand
        {
            get { return new RelayCommand<string>(Search); }
        }
        private void Search(string searchText)
        {
            this.RiversView.View.Filter = r =>
                {
                    if (null == r) return true;
                    var rm = (RiverModel) r;
                    var meets = rm.RiverName.ToLowerInvariant().Contains(searchText.ToLowerInvariant()) 
                        || rm.SectionName.ToLowerInvariant().Contains(searchText.ToLowerInvariant());
                    return meets;
                };
        }
    }
}