Customize CardActionView template

[D]

Hello!

I am trying to created a chat with chat bot, which has predefined answers. I display the answers with CardActionView, but I want to style them and remove vertical stroller that appears like a slider when the answers are two for example. Could you give me some advice about that?

I customize the answers with this code:

<Style TargetType="telerikConversationalUI:CardActionView"><br>
                        <Setter Property="Template"><br>
                            <Setter.Value><br>
                                <ControlTemplate><br>
                                    <telerikPrimitives:RadBorder BorderThickness="5" CornerRadius="10" BorderColor="{Static helpers:Constants.MainBlue}"><br>
                                        <Label Text="{TemplateBinding Text}" <br>
                                               TextColor="{Static helpers:Constants.MainBlue}"<br>
                                               FontSize="15"<br>
                                               FontAttributes="Bold"<br>
                                               HorizontalTextAlignment="Center"<br>
                                               telerikCommon:LabelExtensions.TapCommand="{TemplateBinding Command}" /><br>
                                    </telerikPrimitives:RadBorder><br>
                                </ControlTemplate><br>
                            </Setter.Value><br>
                        </Setter><br>
                    </Style>

[Yana]

Hello,

I am not familiar with the complete implementation, still, I guess that you'd need to modify the Card Template, so that there is enough room for the Cards Actions. I would suggest you take a look at our SDKBrowser example related to creating custom Cards.  I've tested adding the provided CardsActionView template there and I didn't observe any vertical scrollbar.

You could find SDKBrowser application either in the Telerik UI for Xamarin installation folder or download the zip file meant for manual installation from your Telerik account - look inside Examples/Forrms folder.  The concrete example is located inside How To section of the ConversationUI control.

If this does not help, please send me a small runnable app demonstrating the issue, so I could test the exact case. You should open a support ticket and attach it there.

Regards,
Yana
Progress Telerik

[D]

Hello,

Oh sorry, I did a mistake. I meant horizontal scroll, that I want to remove and also to change cards. You could see the problem - https://gyazo.com/a7a3a9550be14f28ad711b406d23e77d 

How could be changed the size of the cards. They seems fixed.

 

[Yana]

Hello,

I will refer again to the mentioned example with custom Cards from our sdk application - in it there is a Card ControlTemplate defined where the Width of the cards could be modified in order to accommodate longer list with actions:

<ControlTemplate x:Key="MyCardView_ControlTemplate">
    <telerikPrimitives:RadBorder Margin="10"
                                Padding="10"
                                BorderThickness="1"
                                BorderColor="Green"
                                CornerRadius="10"
                                WidthRequest="280">
        <StackLayout>
            <Label Text="{TemplateBinding Date, StringFormat='{0:MMMM dd}'}" />
            <Label Text="{TemplateBinding ContactDetails}" />
            <telerikConversationalUI:CardActionsListView Orientation="Horizontal"
                                                        ItemsSource="{TemplateBinding Actions}"
                                                        ItemTemplate="{StaticResource CardActionTemplate}" />
        </StackLayout>
    </telerikPrimitives:RadBorder>
</ControlTemplate>

I have attached an image showing how this looks on iOS emulator. 

Regards, Yana
Progress Telerik