WPF

Introduction To SearchAll Control In WPF

SearchAll is a WPF control to make search easy and quick. SearchAll reduces time and efforts with a very cool template and user-friendly interface. It is based on a web search control of Pluralsight site, but SearchAll control is valid for any type. It is a generic control.

SearchAll supports .NET Framework version 4.5.2 and the newest version.

If you install the NuGet package in a WPF application with .NET Framework of minor version, Visual Studio installs correctly apparently but it will not be able to deploy the assembly in references.

We don’t have tested SearchAll control in UWA, but the idea is included in the future.

SearchAll is open source and available for NuGet.

The Control

SearchAll Control is a very simple component and it is formed of three principal elements.

  • Text to search
    Is the part when we introduce the text to filter. In common use, when we click in this zone, will appear all window popup to fill the word or words to filtered, this popup gave us matches founds.

  • Cancel Filter Button
    This button is available when we have done a filter, and will allow us cancel the filter.

  • Filter Button
    Your function is to filter the source data, but this is only useful when Text to Search has been assigned for code.

A single running flash,



https://www.youtube.com/watch?v=pWLvBSnuGEM&feature=youtu.be

Installation

The installation of SearchAll control is through package Nuget:

We install the package.


Or run the following command in the Package Manager Console

Install-Package MoralesLarios.CustomsControls

 
https://www.youtube.com/watch?v=5ie_xVrNrmk&feature=youtu.be

In the WPF Toolbox, we will select ‘Choose Items’ >> Browse. We will search MoralesLarios.CustomControls.dll in our installation path. It is necessary to build the project.






Click open


Click OK, and it is now available.


 
 https://www.youtube.com/watch?v=zys3GtGoXXg&feature=youtu.be

All we need is to drag the component in our window.


SearchAll is a very easy control and only need setup the ItemSource property to run. Usually its data source is the same as ItemsControls (DataGrid, ListBox, ListView, ComboBox, etc) which will filter. We can do it through MVVM or Code Behind.

XAML 

  1. <Window  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:WpfApplication17"  
  7.         xmlns:CustomsControls="clr-namespace:MoralesLarios.CustomsControls;assembly=MoralesLarios.CustomsControls"   
  8.         x:Class="WpfApplication17.MainWindow"  
  9.         mc:Ignorable="d"  
  10.         Title="MainWindow" Height="261.112" Width="525">  
  11.     <Grid>  
  12.         <Grid.RowDefinitions>  
  13.             <RowDefinition Height="46"/>  
  14.             <RowDefinition Height="*"/>  
  15.         </Grid.RowDefinitions>  
  16.           
  17.         <CustomsControls:SearchAll x:Name="searchAll"  
  18.                                     HorizontalAlignment="Left"   
  19.                                    Margin="50,10,0,0"   
  20.                                    VerticalAlignment="Top"   
  21.                                    Height="29"   
  22.                                    Width="270"  
  23.                                    />  
  24.    
  25.         <DataGrid x:Name="dgData" Grid.Row="1" AutoGenerateColumns="True" />  
  26.     </Grid>  
  27. </Window>   

Code Behind 

  1. using System.Linq;  
  2. using System.Windows;  
  3.    
  4. namespace WpfApplication17  
  5. {  
  6.     public partial class MainWindow : Window  
  7.     {  
  8.         public MainWindow()  
  9.         {  
  10.             InitializeComponent();  
  11.    
  12.             var data = typeof(Enumerable).GetMethods();  
  13.    
  14.             dgData.ItemsSource = data;  
  15.    
  16.             searchAll.ItemsSource = data;  
  17.         }  
  18.     }  
  19. }   

In action,


https://www.youtube.com/watch?v=BRMLniIybGA&feature=youtu.be

In the first time to filter press the Enter key. In the second time click in option.

It works

SearchAll works in a simple explain searching a letter/word in all properties of all elements of a data sequence:

For default only instance the ItemsSource property.


In moving

https://www.youtube.com/watch?v=YOqpzChTC2k&feature=youtu.be 

The SearchAll control filters the data sequence through the ICollectionView associated to ItemsSource collection property. 

The most important properties

To show the most important properties of control, we will use another application tests. This application is cooler, and in its interface show the SearchAll properties.

The DataSource of Application tests consists by all Windows NT Service (services.msc) of target machine. The domain class in .NET for this purpose is System.ServiceProcess.ServiceController:

  1. public class ServiceController  
  2. {  
  3.     public bool                    CanPauseAndContinue  { get; }  
  4.     public bool                    CanShutdown          { get; }  
  5.     public bool                    CanStop              { get; }  
  6.     public ServiceController[]     DependentServices    { get; }  
  7.     public string                  DisplayName          { get; set; }  
  8.     public string                  MachineName          { get; set; }  
  9.     public SafeHandle              ServiceHandle        { get; }  
  10.     public string                  ServiceName          { get; set; }  
  11.     public ServiceController[]     ServicesDependedOn   { get; }  
  12.     public ServiceType             ServiceType          { get; }  
  13.     public ServiceControllerStatus Status               { get; }  
  14. }   

UI


ItemSource

  1. public IEnumerable<object> ItemsSource { get; set; }   

The ItemsSource dependency property gets or sets the collection source to filter. It is the only property necessary to work.

If you don’t assign this property, the control will remain disabled.

Text

  1. public string Text { get; set; }   

The Text dependency property gets or sets the content of search to filter.

When the Text property is clear, the buttons Filter Button and Cancel Button are disabled.

NumberSugerencyElements

  1. public int NumberSugerencyElements { get; set; }   

The NumberSugerencyElements dependency property gets or sets the number maximum of suggestions displayed in the PopupSearch. This property can be important at performance level, because if the source collection is big, and the text to search unlikely, the search task and filter task can be long.


20 is default value.


In moving

 
https://www.youtube.com/watch?v=r5oc22ROddo&feature=youtu.be 

FilterClass

  1. public FilterType FilterClass { get; set; }   

The FilterClass dependency property gets or sets the filter type applied to search.

The enum FilterType may have 5 values,

  • StartWith
  • EndWith
  • Contains
  • Equals
  • Custom

Contains the default value.


In the application test, we have implemented a friendly way to change this property throught double-click in the textblocks with the enum FilterTypes values.


In moving

 
 https://www.youtube.com/watch?v=tpZQr381_K4&feature=youtu.be 

In the FilterType enum there is a finish value named custom. We will see this value in another article, with de advance aspects of SearchAll control.

FieldsSugerenciesSearch

  1. public IEnumerable<string> FieldsSugerenciesSearch { get; set; }  

The FieldsSugerenciesSearch Dependency Property gets or sets the names and order of properties of type of DataSource (ItemsSource) for suggestions matchs in the popup search.

Null is a default value. When FieldSuggerenciesSearch is null, the SearchAll control engine find in all properties of type.


These are very simple examples in MVVM, because in both cases, we have configured an only field to search. The example of left side for DisplayName field and the example of left side for ServiceName field.

In our application tests, we have developed a dynamic change of this property by a popup setup. This popup will emerge clicking in ‘FieldSearch / SugrenceSearch’ label.

So, let's see it in action.

 
https://www.youtube.com/watch?v=F9-e_y4OsHM&feature=youtu.be 

Another example with more fields in codebehind,


FieldsSearch

  1. public IEnumerable<string> FieldsSearch { get; set; }   

The Dependency Property FieldsSearch is equal to FieldsSugerenciesSearch. The difference between them is that FieldsSugerenciesSearch is applied to the suggestions matched in the popup search and FieldsSearch is applied to the results of filter datasource (ItemsSource).

Usually, the values of these two properties will be the same.

Complete example with many properties.

 
https://www.youtube.com/watch?v=fnXWSF5j4Tk&feature=youtu.be

Query Filtered Data

If we want to query filtered data, we can do the following.

In CodeBehind, 

  1. public void QueryFilterData()  
  2. {  
  3.     /// Use de ReadOnly Dependency Property FilteredItemsSource  
  4.    
  5.     /// --> ServiceController is a data of mi DataSource (ObservableCollection in ItemsSource)  
  6.    
  7.     var filteredData = searchAll.FilteredItemdSource.OfType<ServiceController>().ToList();  
  8. }   

MVVM in ViewModel

  1. public void QueryFilterData()  
  2. {  
  3.     /// Use the ICollectionView of our DataSource  
  4.    
  5.     /// --> ServiceController is a data of mi DataSource (ObservableCollection in ItemsSource)  
  6.    
  7.     var filteredData = CollectionViewSource.GetDefaultView(Services).OfType<ServiceController>().ToList();  
  8. }   

Limitations

SearchAll control filter is based on Reflection. this is why when accessing certain property values, .NET Framework throws different exceptions.

In these cases, the SearchAll control shows a message with the info of incompatibility Property.

 

https://www.youtube.com/watch?v=UpTane0MRYk&feature=youtu.bel 

The next chapter

We have learned the SearchAll control essential part. In the next chapter, we will learn the advance part: Events, Custom Type FilterClass and another tips.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs