Read documentation here
The "RadAutoCompleteBox" control provides suggestions to the user. It provides suggestions on the basis of a set of criteria filtering data from a SuggestionSource. The SuggestionSource is nothing but a Data Source.
The RadAutoCompleteBox control provids an immersive experience as in the following. It can be bound to a data source as simply as a collection of strings or a collection of complex objects. In the following RadAutoCompleteBox, SuggestionSource is a complex object.
![Windows-Phone1.jpg]()
To start working with RadAutoCompleteBox you first need to add the following namespace on the XAML page.
![Windows-Phone2.jpg]()
You can create a simple RadAutoCompleteBox as in the following:
![Windows-Phone3.jpg]()
There are many properties exposed to configure RadAutoCompleteBox. You can set values of those properties as per your requirements. Two important properties are AutoCompleteMode and AutoCompletePopupDisplayMode. The AutoCompleteMode property defines the way filtering should be done. Filtering criteria be can be set to two values.
![Windows-Phone4.jpg]()
"AutoCompletePopupDisplayMode" defines where popup windows open. This property can be set to one of four values. Those four values are as in the following:
![Windows-Phone5.jpg]()
"SuggestionSource" can be created as in the following. It is a function returning a List of Strings.
![Windows-Phone6.jpg]()
After creating a SuggestionSource you can set that in code behind as in the following.
![Windows-Phone7.jpg]()
At this point, on running the application, you should get the experience of a "RadAutoCompleteBox" as in the following image:
![Windows-Phone8.jpg]()
Now let us see how to work with a complex object. For that go ahead and create a class called CountryData. There are three properties in the class.
public class CountryData
{
public string CountryName { get; set; }
public string CountryCapital { get; set; }
public ImageSource CountryFlag { get; set; }
}
Next you need to create data source or suggestion source. For that I have created a function returning a List of CountryData. I have put images in the Images folder. In the following function using a collection initializer we are creating a list of objects of CountryData and returning that.
private List<CountryData> GetCountryDetails()
{
List<CountryData> lstCountryData = new List<CountryData>
{
new CountryData
{
CountryName = "India" , CountryCapital ="New Delhi " , CountryFlag= GetImageSource("/Images/indiaflag.jpg")
},
new CountryData
{
CountryName = "USA" , CountryCapital ="Washington" , CountryFlag= GetImageSource("/Images/usaflag.jpg")
},
new CountryData
{
CountryName = "France" , CountryCapital ="Paris" , CountryFlag= GetImageSource("/Images/franceflag.jpg")
},
new CountryData
{
CountryName = "England" , CountryCapital ="London" , CountryFlag= GetImageSource("/Images/englandflag.jpg")
},
new CountryData
{
CountryName = "Germany" , CountryCapital ="Berlin" , CountryFlag= GetImageSource("/Images/germanyflag.jpg")
},
new CountryData
{
CountryName = "China" , CountryCapital ="Shanghai" , CountryFlag= GetImageSource("/Images/chinaflag.jpg")
},
new CountryData
{
CountryName = "Japan" , CountryCapital ="Tokyo" , CountryFlag= GetImageSource("/Images/japanflag.jpg")
},
new CountryData
{
CountryName = "Australia" , CountryCapital ="Canberra" , CountryFlag= GetImageSource("/Images/ausflag.jpg")
},
new CountryData
{
CountryName = "Brazil" , CountryCapital ="Rio" , CountryFlag= GetImageSource("/Images/brazilflag.jpg")
},
};
return lstCountryData;
}
The "GetImageSource" function is defined as in the following. This function takes an image path as a string and converts that to an ImageSource such that can be bound to an Image control directly.
private ImageSource GetImageSource(string fileName)
{
return new BitmapImage(new Uri(fileName, UriKind.Relative));
}
Finally you need to set a SuggestionSource of radAutoCompleteBox. You can set that in a page constructor as in the following:
public MainPage()
{
InitializeComponent();
this.radAutoCompleteBox.SuggestionsSource = GetCountryDetails();
}
Now you need to put a radAutoCompleteBox in the XAML. We are filtering on a SuggestionSource consisting of complex objects so you need to set the value of the property FilterKeyPath. You can set the value of this property to any property of the object. In this case we are filtering on CountryName. The SuggestionSelected event is fired when the user selects an item from the popup.
![Windows-Phone9.jpg]()
By now you have created a radAutoCompleteBox and bound it to a SuggestionSource of complex objects. Next we need to create a "SuggestionTemplate". A SuggetionTemplate defines the way data from a complex object bound as a SuggestionSource will be displayed in the suggestion popup. Since there are three properties in the object and one of them is an image, we simply must put a StackPanel with horizontal orientation and a binding properties value in controls inside the StackPanel.
![Windows-Phone10.jpg]()
Last but not least we want items highlighting on filtering. We want to highlight item on a property set as FilterKeyPath. We set CountryName as FilterKeyPath. You can highlight an item on filtering as in the following. You can set the highlight style on background or foreground.
![Windows-Phone11.jpg]()
Consolidating the code from the discussion above you will have XAML as in the following. There is one StackPanel in the second row of the Grid. On selection of an item, that item will be displayed in controls inside StackPanel.
<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<telerikInput:RadAutoCompleteBox x:Name="radAutoCompleteBox"
Height="100"
AutoCompleteMode="Contains"
FilterKeyPath="CountryName"
SuggestionSelected="radAutoCompleteBox_SuggestionSelected"
Margin="-6,19,6,185">
<telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding CountryFlag}" Height="60" Width="60" />
<TextBlock Text="{Binding CountryName}"
telerikInput:RadAutoCompleteBox.IsElementHighlighted="True">
<telerikInput:RadAutoCompleteBox.HighlightStyle>
<telerikInput:HighlightStyle Foreground="Red" FontSize="26"/>
</telerikInput:RadAutoCompleteBox.HighlightStyle>
</TextBlock>
<TextBlock Text="," />
<TextBlock Text="{Binding CountryCapital}" />
</StackPanel>
</DataTemplate>
</telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>
</telerikInput:RadAutoCompleteBox>
<StackPanel Grid.Row="1" Orientation="Vertical">
<Image x:Name="imgMessage" Height="250" Width="200" />
<TextBlock x:Name="txtMessage" FontSize="40" Style="{StaticResource PhoneTextAccentStyle }"/>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Last but not least, you need to handle the "SuggestionSelected" event. In this event we will bind the selected item in controls inside StackPanel.
private void radAutoCompleteBox_SuggestionSelected(object sender, SuggestionSelectedEventArgs e)
{
CountryData data = e.SelectedSuggestion as CountryData;
radAutoCompleteBox.Text = data.CountryName + "," + data.CountryCapital;
txtMessage.Text = "You selected " + data.CountryName;
imgMessage.Source = data.CountryFlag;
}
Now if you run the application you should get the experience of radAutoCompleteBox as in the following:
![Windows-Phone12.jpg]()
In this way you can work with radAutoCompleteBox. I hope you find this article useful. Thanks for reading.