XAML - SearchBox

A SearchBox represents a control that can be used to enter search query text. WPF projects do not support SearchBox, so it will be implemented in Windows App. The hierarchical inheritance of SearchBox class is as follow −

Properties

Given below are the commonly used properties of SearchBox class.

Sr.No.	Property & Description
1	PlaceholderText Gets or sets the text that is displayed in the control until the value is changed by a user action or some other operation.
2	ChooseSuggestionOnEnter Gets or sets a value that determines whether the suggested search query is activated when the user presses Enter.
3	ChooseSuggestionOnEnterProperty Identifies the ChooseSuggestionOnEnter dependency property.
4	FocusOnKeyboardInput Gets or sets a value that determines whether a user can search by typing anywhere in the app.
5	FocusOnKeyboardInputProperty Identifies the FocusOnKeyboardInput dependency property.
6	PlaceholderTextProperty Identifies the PlaceholderText dependency property.
7	QueryText Gets or sets the text contents of the search box.
8	QueryTextProperty Identifies the QueryText dependency property.
9	SearchHistoryContext Gets or sets a string that identifies the context of the search and is used to store the user's search history with the app.
10	SearchHistoryContextProperty Identifies the SearchHistoryContext dependency property.
11	SearchHistoryEnabled Gets or sets a value that determines whether search suggestions are made from the search history.
12	SearchHistoryEnabledProperty Identifies the SearchHistoryEnabled dependency property.

Events

Given below are the commonly used events of SearchBox.

Sr.No.	Event & Description
1	PrepareForFocusOnKeyboardInput Occurs when the FocusOnKeyboardInput property is true and the app receives textual keyboard input.
2	QueryChanged Occurs when the query text changes.
3	QuerySubmitted Occurs when the user submits a search query.
4	ResultSuggestionChosen Occurs when the user picks a suggested search result.
5	SuggestionsRequested Occurs when the user's query text changes and the app needs to provide new suggestions to display in the search pane.

Methods

Given below are the commonly used methods of SearchBox.

Sr.No.	Method & Description
1	OnManipulationCompleted Called before the ManipulationCompleted event occurs. (Inherited from Control)
2	OnManipulationDelta Called before the ManipulationDelta event occurs. (Inherited from Control)
3	OnManipulationInertiaStarting Called before the ManipulationInertiaStarting event occurs. (Inherited from Control)
4	OnManipulationStarted Called before the ManipulationStarted event occurs. (Inherited from Control)
5	OnManipulationStarting Called before the ManipulationStarting event occurs. (Inherited from Control)
6	OnMaximumChanged Called when the Maximum property changes. (Inherited from RangeBase)
7	OnMinimumChanged Called when the Minimum property changes. (Inherited from RangeBase)
8	OnValueChanged Fires the ValueChanged routed event. (Inherited from RangeBase)
9	SetBinding Attaches a binding to a FrameworkElement, using the provided binding object. (Inherited from FrameworkElement)
10	SetLocalContentSuggestionSettings Specifies whether suggestions based on local files are automatically displayed in the search box suggestions, and defines the criteria that Windows uses to locate and filter these suggestions.
11	SetValue Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject)
12	StartDragAsync Initiates a drag-and-drop operation. (Inherited from UIElement)
13	UnregisterPropertyChangedCallback Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback. (Inherited from DependencyObject)

Example

The following example shows the usage of SearchBox in an XAML application. Here is the XAML code to create and initialize a SearchBox with some properties and events.

<Page x:Class = "XAML_SearchBox.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAML_SearchBox" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <SearchBox x:Name = "mySearchBox"
         FocusOnKeyboardInput = "False"
         QuerySubmitted = "mySearchBox_QuerySubmitted" 
         Height = "35" Width = "400" Margin = "234,132,732,601"/>
   </Grid> 
	
</Page>

Here is the implementation in C# for search query −

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Runtime.InteropServices.WindowsRuntime; 

using Windows.Foundation; 
using Windows.Foundation.Collections;

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace XAML_SearchBox { 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() { 
         this.InitializeComponent(); 
      } 
      private void mySearchBox_QuerySubmitted(SearchBox sender,
         SearchBoxQuerySubmittedEventArgs args) { 
         
         this.Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);
      } 
   }
}

In Windows App project for this example, add a Search Results Page with the name SearchResultsPage1.xaml. The default implementation is sufficient to run this App.

When you compile and execute the above code, it will produce the following output −

We recommend you to execute the above example code and experiment with some other properties and events.

xaml_controls.htm

Kickstart Your Career

Get certified by completing the course

Get Started