New to Telerik UI for WPF? Download free 30-day trial


The RadAIPrompt control allows you to define suggestions for the user prior to initiating a request. To do so, set the AreSuggestionsVisible property to True of RadAIPrompt and add entries of the type of string to its Suggestions collection. The Suggestions property expects a collection that implements the IEnumerable interface.

Showing Suggestions in the RadAIPrompt

<telerik:RadAIPrompt x:Name="aiPrompt" AreSuggestionsVisible="True"> 
    <telerik:RadAIPromptInputItem /> 
        <x:Array Type="sys:String" 
            <sys:String>What is the weather in New York?</sys:String> 
            <sys:String>What is the weather in Tokyo?</sys:String> 
            <sys:String>What is the weather in Seoul?</sys:String> 
            <sys:String>What is the weather in London?</sys:String> 
RadAIPrompt with suggestions

WPF RadAIPrompt with suggestions

Customizing the Appearance of the Suggestions

RadAIPrompt control exposes properties that will allow you to customize the appearance of each suggestion. They are as follows:

  • SuggestionItemTemplate—Allows you to set a custom DataTemplate that will be applied to each suggestion.
  • SuggestionHeaderContent—Provides the functionality to specify a header for the element that displays the suggestions.
  • SuggestionHeaderContentTemplate—Allows you to specify a custom DataTemplate for the header of the element that visualizes the suggestions.
  • SuggestionsExpanderStyle—This property lets you set a custom Style for the RadExpander element that displays the suggestions.

The following example showscases the RadAIPrompt when the above properties are used:

Defining a sample model and a view model

public class SuggestionItem 
    public string SuggestionItemName { get; set; } 
public class SuggestionsViewModel 
    public SuggestionsViewModel() 
        this.SuggestionItems = new ObservableCollection<SuggestionItem>() 
            new SuggestionItem(){ SuggestionItemName = "Hello" }, 
            new SuggestionItem(){ SuggestionItemName = "World" }, 
    public ObservableCollection<SuggestionItem> SuggestionItems { get; set; } 

Defining the RadAIPrompt and its properties

    <telerik:RadAIPrompt x:Name="aiPrompt"  
                         Suggestions="{Binding SuggestionItems}"  
                         SuggestionsHeaderContent="Choose a suggestion"  
        <telerik:RadAIPromptInputItem /> 
                <telerik:RadButton Content="{Binding SuggestionItemName}" 
                                   Command="{Binding SuggestionClickedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadAIPrompt}}" 
                                   CommandParameter="{Binding SuggestionItemName}" 
                <TextBlock Text="{Binding}" FontWeight="Thin" FontStyle="Italic" Foreground="White"/> 
            <!-- If you use NoXaml dlls set the BasedOn property of the Style: BasedOn="{StaticResource SuggestionsExpanderStyle}" --> 
            <Style TargetType="telerik:RadExpander"> 
                <Setter Property="Background" Value="Orange"/> 
RadAIPrompt suggestions with custom appearance

WPF RadAIPrompt suggestions with custom appearance

See Also

In this article