This is a migrated thread and some comments may be shown as answers.

Customize CardActionView template

3 Answers 12 Views
Chat (Conversational UI)
This is a migrated thread and some comments may be shown as answers.
D
Top achievements
Rank 1
D asked on 21 Aug 2019, 04:25 PM

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>

3 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 22 Aug 2019, 12:04 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
D
Top achievements
Rank 1
answered on 22 Aug 2019, 01:53 PM

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.

 

0
Yana
Telerik team
answered on 23 Aug 2019, 12:24 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chat (Conversational UI)
Asked by
D
Top achievements
Rank 1
Answers by
Yana
Telerik team
D
Top achievements
Rank 1
Share this question
or