Search Input is a customised TextInput that allows you to call a method (for example : Reload) after text completing method. You can set the Image and Cancel Button text and Placeholder for that.

To use this component, install the Zebble.SearchInput nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

Basic usage:

<SearchInput Id="MySearchInput" on-Searched="ApplySearch" />

You can handle the Searched event to apply your search logic. Usually you will first extract the keywords from the SearchInput and then use that in your search implementation logic.

Product[] Items;

async Task ApplySearch()
{
     var keywords = MySearchInput.Text.Split(' ').Trim().ToArray();

     // In this example I want to pass the keywords to an API to implement the search logic on the server.
     Items = await Api.SearchProducts(keywords);

     // Now you can use the data any how you like. For example:
     await MyListView.UpdateSource(Items);     
}

 

Enabled & Ignored

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

MarkUp:

<SearchInput Id="MyText" Style.Height="20" Text="SearchInput 1" />
<SearchInput Id="MyText" Style.Height="20" Text="SearchInput 2" Enabled="false" />
<SearchInput Id="MyText" Style.Height="20" Text="SearchInput 3" />
<SearchInput Id="MyText" Style.Height="20" Text="SearchInput 4" Ignored="true"/>
<SearchInput Id="MyText" Style.Height="20" Text="SearchInput 5" />

 

PseudoCssState

PseudoCssState is a boolean value that if it will be set to "disabled", it allows you to specify a visual style for it in CSS.

 

Box Shadow

Zebble components have a special effect which is named BoxShadow. As you can see in next image, it has start X and Y position for effecting and the amount of radious.

MarkUp:

<SearchInput Style.Height="40" Text=" SearchInput 1" Style.BoxShadow.Color ="red" Style.BoxShadow.BlurRadius="5" Style.BoxShadow.XOffset="5" Style.BoxShadow.YOffset="5" Style.Border="1"/>

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

Position

The location of an object can be determined by Style.X and Style.Y.

MarkUp:

<SearchInput Id="MyText6" Style.Height="30" Text=" SearchInput 1" Style.Border ="1" Style.X="100" Style.Y="300"/>

Events:

• on-Flashed: Raised when the SearchInput is flashed.
• on-Initialized: Raised when the SearchInput object is created and rendered.
• on-Initializing: Raised when the SearchInput object is being created and rendered.
• on-LongPressed: Raised when user clicked on the SearchInput for a long time.
• on-PanFinished: Raised when user panned on the SearchInput.
• on-Panning: Raised when user starts to pan on the SearchInput.
• on-PreRendered: Raised when the SearchInput object is not started to rendered before rendering.
• on-Searched: Raised when user clicks on the Search button.
• on-Swiped: Raised when user swiped on the SearchInput.
• on-Tapped: Raised when user tapped on the SearchInput.