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.
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.
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);
}
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 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 is a boolean value that if it will be set to "disabled", it allows you to specify a visual style for it in CSS.
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:
You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding
The location of an object can be determined by Style.X and Style.Y.
MarkUp: