This example shows how to customize item appearance in UXSearchBox.

Example

Description

UXSearchBox has several user experience aspects that you can customize, such as when to display the item result.

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

The following example shows how to customize item appearance in UXSearchBox using ItemTemplate.

Code

XAML	Copy Code
<Intersoft:UXPage.Resources> <DataTemplate x:Key="SearchItemTemplate"> <StackPanel Orientation="Horizontal"> <Image Source="{Binding Hotel.Image}" Width="30" Height="30" /> <TextBlock Text="{Binding Hotel.Name}" VerticalAlignment="Center" Margin="5 0 0 0" /> </StackPanel> </DataTemplate> </Intersoft:UXPage.Resources> <Intersoft:UXSearchBox Intersoft:DockPanel.Dock="Right" Width="200" 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}" />

XAML

Copy Code

<Intersoft:UXPage.Resources>
    <DataTemplate x:Key="SearchItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Hotel.Image}" Width="30" Height="30" />
            <TextBlock Text="{Binding Hotel.Name}" VerticalAlignment="Center" Margin="5 0 0 0" />
        </StackPanel>
    </DataTemplate>
</Intersoft:UXPage.Resources>

<Intersoft:UXSearchBox Intersoft:DockPanel.Dock="Right" Width="200"
            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}" />

Concepts

Input Controls Overview

Other Resources

Locating the Samples in Local Installation

Walkthroughs and How-to Topics