HI,
I'm really struggling with customizing the conversational UI, there does not seem to be an example for changing the SuggestedActionsItem.
I know i need to define a temple for the SuggestedActionsTemplate on the ChatItemTemplateSelector, but how am i supposed to know what values are available? or what i am targetting.
A simple example of changing the background of each action would be nice :)
thanks
1 Answer, 1 is accepted
Hello Chris,
Indeed the suggested actions can be customized through the ChatItemTemplateSelector, here is a quick example showing the default template (only TextColor and BackgroundColor properties are modified):
So, here is the custom ChatItemTemplateSelector:
public class CustomChatItemTemplateSelector : ChatItemTemplateSelector
{
public DataTemplate MySuggestedActionsTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
SuggestedActionsItem suggestedActionsItem = item as SuggestedActionsItem;
if (suggestedActionsItem != null)
{
return this.MySuggestedActionsTemplate;
}
return base.OnSelectTemplate(item, container);
}
}
Add the template to the page's resources:
<Style x:Key="SuggestedActionItemStyle" TargetType="telerik:RadButton">
<Setter Property="TextColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
<Setter Property="BackgroundColor" Value="Yellow" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="{OnPlatform Default=4, WinUI=2, iOS=8, Android=16}" />
<Setter Property="Padding" Value="{OnPlatform Default='10, 1.5', WinUI='10, 8', iOS='8, 5.5', Android='16, 6.5'}" />
</Style>
<DataTemplate x:Key="MySuggestedActionsTemplate">
<telerik:SuggestedActionsView
ItemsSource="{Binding Actions}"
SelectionMode="None"
Orientation="Horizontal">
<telerik:SuggestedActionsView.ItemsLayoutTemplate>
<DataTemplate>
<HorizontalStackLayout Padding="{OnPlatform Default='0, 10', WinUI=10, MacCatalyst='12, 10'}"
Spacing="4" />
</DataTemplate>
</telerik:SuggestedActionsView.ItemsLayoutTemplate>
<telerik:SuggestedActionsView.ItemTemplate>
<DataTemplate>
<telerik:RadButton Text="{Binding Text}"
Command="{Binding Command}"
Style="{StaticResource SuggestedActionItemStyle}" />
</DataTemplate>
</telerik:SuggestedActionsView.ItemTemplate>
</telerik:SuggestedActionsView>
</DataTemplate>
<local:CustomChatItemTemplateSelector x:Key="CustomChatItemTemplateSelector"
MySuggestedActionsTemplate="{StaticResource MySuggestedActionsTemplate}" />
And apply the custom ChatItemTemplateSelector to the Chat definition:
<telerik:RadChat x:Name="chat"
ItemTemplateSelector="{StaticResource CustomChatItemTemplateSelector}" />I hope I was of help.
Regards,
Yana
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.