Commands View Styling

The Commands View of the AIPrompt control provides the following customization properties:

• CommandStyle(Style)—Defines the style that is to be applied to the AIPrompt command.
• CommandGroupStyle(Style)—Defines the style that is to be applied to the RadExpander representing an AIPrompt command group.

The following example demonstrates how to modify the commands' appearance:

1. Add Style properties with TargetType set to AIPromptCommandItemView for each command representation and AIPromptCommandGroupView for a command group to the page's resources:

• XAML

<Style x:Key="MyCommandLabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="#00897B" />
</Style>
<Style x:Key="MyCommandStyle" TargetType="telerik:AIPromptCommandItemView">
    <Setter Property="LabelStyle" Value="{StaticResource MyCommandLabelStyle}" />
</Style>
<Style x:Key="MyExpanderHeaderTextStyle" TargetType="Label">
    <Setter Property="TextColor" Value="#00897B" />
</Style>
<Style x:Key="MyCommandExpanderStyle" TargetType="telerik:RadExpander">
    <Setter Property="HeaderTextStyle" Value="{StaticResource MyExpanderHeaderTextStyle}" />
</Style>
<Style x:Key="MyCommandGroupStyle" TargetType="telerik:AIPromptCommandGroupView">
    <Setter Property="ExpanderStyle" Value="{StaticResource MyCommandExpanderStyle}" />
</Style>

2. Add the RadAIPrompt control with CommandStyle and CommandGroupStyle properties applied:

• XAML

<telerik:RadAIPrompt x:Name="aiPrompt"
                     InputText="{Binding InputText}"
                     PromptRequestCommand="{Binding PromptRequestCommand}"
                     OutputItems="{Binding OutputItems}"
                     Commands="{Binding Commands}"
                     CommandStyle="{StaticResource MyCommandStyle}"
                     CommandGroupStyle="{StaticResource MyCommandGroupStyle}" />

Here is the result after applying the CommandStyle and CommandGroupStyle: