This example shows how to customize busy visual appearance in UXSearchBox.

Example

Description

UXSearchBox has several user experience aspects that you can customize, such as when to display the result box and when to show the busy text / template.

Using the default settings, the UXSearchBox will not open the result box immediately when you type in a query text. Instead, it waits until the search result becomes available and then display it along with the result box. Once the result box is opened, it stays open until you close it by clicking outside the search box visual element, or clicking the reset button.

By setting the AutoShowResultBox property to True, UXSearchBox immediately opens the result box as you type into the text box. While waiting for the search result, the search box displays the BusyText or BusyTemplate which indicates that the searching is in progress.

You can also determine the behavior of the BusyText or BusyTemplate by customizing the BusyMode property. This property determines when the BusyText or BusyTemplate should be shown. If you set the BusyMode to First, the search box shows the BusyText or BusyTemplate only once during the first search until the search is reset. On the other hand, if you set the BusyMode to Always, the search box show the BusyText or BusyTemplate whenever searching is in progress.

This following code shows how to customize busy visual appearance in UXSearchBox using BusyText and AutoShowResultBox property set to True.

Code

<Intersoft:UXSearchBox Intersoft:DockPanel.Dock="Right" Width="200"
            BusyMode="Always" BusyText="I'm Bussy..."
            WatermarkText="Search..." WatermarkTextVisibility="Visible" CornerRadius="15" ItemTemplate="{StaticResource SearchItemTemplate}"
            AutoShowResultBox="True" SearchResult="{Binding SearchResult}" QueryText="{Binding QueryText, Mode=TwoWay}" NavigateUriMemberPath="NavigateUri"
            IsSearching="{Binding IsSearching, Mode=TwoWay}" />

Example

Description

You can also completely customize the control appearance by using BusyTemplate property, you can edit the template of the control and do the modification accordingly.

This following code shows how to customize busy visual appearance in UXSearchBox using BusyTemplate.

Code

<Intersoft:UXPage.Resources>
    <DataTemplate x:Key="BusyIndicator">
        <Grid>
            <Intersoft:UXProgressBar VerticalAlignment="Center" Width="150" Height="30" IsIndeterminate="True" />
        </Grid>
    </DataTemplate>
    <DropShadowEffect x:Key="DropShadowEffect" />
</Intersoft:UXPage.Resources>

<Intersoft:UXSearchBox Name="HotelSearch" Intersoft:DockPanel.Dock="Right" Width="200"
            BusyMode="Always" BusyTemplate="{StaticResource BusyIndicator}"
            WatermarkText="Search..." WatermarkTextVisibility="Visible" CornerRadius="15" ItemTemplate="{StaticResource SearchItemTemplate}"
            AutoShowResultBox="True" SearchResult="{Binding SearchResult}" QueryText="{Binding QueryText, Mode=TwoWay}" NavigateUriMemberPath="NavigateUri"
            IsSearching="{Binding IsSearching, Mode=TwoWay}" />