Skip to content

Trigger the search by typing a keyword.

cs
public class SearchBar : TextBox, ICommandSource

Attributes

PropertyDescriptionDefault ValueRemarks
IsRealTimeWhether to search in real timefalseIf it is true, the search start event will be automatically triggered every time the input is made
CommandCommand
CommandParameterCommand Parameters
CommandTargetCommand target element

Additional attributes

PropertyDescriptionDefault ValueRemarks
InfoElement.PlaceholderPlaceholder
InfoElement.NecessaryIs it requiredfalse
InfoElement.SymbolRequired mark
InfoElement.ContentHeightContent Height30Available when the title is above
InfoElement.MinContentHeightMinimum content height30Available when the title is on the top
TitleElement.TitleTitle
TitleElement.TitlePlacementTitle AlignmentTitlePlacementType.Top
TitleElement.TitleWidthTitleWidth120

Event

NameDescription
SearchStartedTriggered when the search starts

Style

StyleDescription
SearchBarBaseStyleDefault Style
SearchBarExtendBaseStyleDefault extended style
SearchBarPlusBaseStyleThe default enhanced style
SearchBarExtendExtended Style
SearchBarPlusEnhance the style
SearchBar.Small
SearchBarExtend.Small
SearchBarPlus.Small

Case

xml
<StackPanel Margin="32" Orientation="Horizontal">
    <StackPanel>
        <hc:SearchBar Command="{Binding SearchCmd}" CommandParameter="{Binding Text,RelativeSource={RelativeSource Self"/>
        <hc:SearchBar Margin="0,32,0,0" IsEnabled="False"/>
        <hc:SearchBar hc:InfoElement.Title="TitleDemoStr1" Margin="0,32,0,0" Style="{StaticResource SearchBarExtend}"/>
        <hc:SearchBar hc:InfoElement.Placeholder="PlsEnterContent" hc:InfoElement.Title="TitleDemoStr1" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarExtend}"/>
        <hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="PlsEnterContent" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="TitleDemoStr3" Style="{StaticResource SearchBarExtend}" Margin="0,32,0,0"/>
        <hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="PlsEnterContent" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="TitleDemoStr3" Style="{StaticResource SearchBarExtend}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/>
    </StackPanel>
    <StackPanel Margin="32,0,0,0">
        <hc:SearchBar Name="SearchBarCustomVerify" ShowClearButton="True" Style="{StaticResource SearchBarPlus}"/>
        <hc:SearchBar Margin="0,32,0,0" IsEnabled="False" Style="{StaticResource SearchBarPlus}"/>
        <hc:SearchBar ShowClearButton="True" hc:InfoElement.Title="TitleDemoStr1" Margin="0,32,0,0" Style="{StaticResource SearchBarPlus}"/>
        <hc:SearchBar TextType="Mail" hc:InfoElement.Placeholder="PlsEnterEmail" hc:InfoElement.Title="TitleDemoStr1" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarPlus}"/>
        <hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="TitleDemoStr3" Style="{StaticResource SearchBarPlus}" Margin="0,32,0,0"/>
        <hc:SearchBar ShowClearButton="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="PlsEnterContent" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="TitleDemoStr3" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/>
    </StackPanel>
</StackPanel>

Validation

for validation follow instructions:

bind to ValidationRule

cs
 <hc:SearchBar hc:InfoElement.Placeholder="Please Enter Email" hc:InfoElement.Title="Title" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarPlus}">
    <hc:SearchBar.Text>
        <Binding Path="Email1" UpdateSourceTrigger="PropertyChanged">
            <Binding.ValidationRules>
                <hc:RegexRule Type="Mail"/>
            </Binding.ValidationRules>
        </Binding>
    </hc:SearchBar.Text>
</hc:SearchBar>

SearchBar

Released under the MIT License.