iOS rendering issue

[n/a]

Hi,

We are currently trying to integrate the chat UI with our Xamarin app, and things are going ok however on iOS the rendering of the control looks a little less polished and bits are missing. I have attached an image demonstrating it in this post. I have annotated the image. On Android these issues are not a problem.

The Telerik controls have been installed via the official Nuget package source. We are using the latest version of Xamarin Forms and the Telerik controls.

Questions;

1. How can we improve the iOS rendering?

2. How can we further customise the entry box etc.? I see another post reference a control template, but I can't seem to find the control template XAML anywhere?

many thanks

[Petar Marchev]

Hi Patrick,

Thank you for letting us know you are having problems with this. This is already logged in our feedback portal where you can track its status. At this moment we do not know much about what is causing the issue. From what we've seen sometimes the app is compiled in a way that the image just doesn't show up, and there is no stable way to reproduce this.

We found an easy to apply work-around and it is to add the images in the platform projects of the application. I am attaching a zip containing the images, which should be placed inside the Resources folder of the iOS project. The Build Action of the files should be BundleResource.

Let us know if you need further assistance.

Regards,
Petar Marchev
Progress Telerik

[n/a]

Thanks Petar, I'll give that a go. Do you know off the top of your head if it's possible to replace these with higher resolution versions with no detrimental impact? I ask as on higher end devices the "send arrow" is a bit blurry.

Alternatively has anyone ever adjusted the control template and changed it out with a font icon?

[n/a]

Got it working thanks; ignore my comments about the blurry icon I see there is an @3x version. I only observed the blurryness on Android.

I see the text input box could maybe do with a few more pixels in height, is there any way to change this? 

[Petar Marchev]

Hello Patrick,

The entry inside the chat is of type ChatEntry and you can target it via an imlicit style:

<VisualElement.Resources>
  <Style TargetType="telerikConversationalUI:ChatEntry">
    <Setter Property="HeightRequest" Value="100" />
  </Style>
</VisualElement.Resources>

<telerikConversationalUI:RadChat />

Also, in case you need to do any other customizations I will  paste the template of the chat below:

<telerikConversationalUI:ChatListViewMarginConverter x:Key="ChatListViewMarginConverter" />

<ControlTemplate x:Key="RadChat_ControlTemplate">
    <Grid telerikInput:KeyboardHelper.IsTranslationTarget="True"
          RowSpacing="2">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <telerikConversationalUI:ChatListView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                              AutoScrollMode="{TemplateBinding AutoScrollMode}"
                                              ScrollMediator="{TemplateBinding ActualScrollMediator}"
                                              Margin="{Binding Height, Source={x:Reference PickerContainer}, Converter={StaticResource ChatListViewMarginConverter}}"
                                              ItemTemplate="{TemplateBinding ItemTemplateSelector}"
                                              ItemsSource="{TemplateBinding Items}"
                                              AutomationProperties.Name="ChatListView" />
        <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                      Grid.Row="1"
                                      Content="{TemplateBinding TypingIndicator}" />
        <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                      x:Name="PickerContainer"
                                      VerticalOptions="End"
                                      Content="{TemplateBinding Picker}" />
        <Grid Grid.Row="2" BackgroundColor="{TemplateBinding InputAreaBackgroundColor}" Padding="5, 0, 0, 0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <telerikConversationalUI:ChatEntry
                telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                Text="{TemplateBinding Message, Mode=TwoWay}"
                BackgroundColor="Transparent"
                VerticalOptions="Center"
                CompletedCommand="{TemplateBinding ActualSendMessageCommand}"
                FocusMediator="{TemplateBinding FocusMediator}"
                telerikInput:KeyboardHelper.IsTranslationSource="True" />

            <telerikInput:RadButton telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                    Grid.Column="1"
                                    Margin="0, 0, 10, 0"
                                    BackgroundImage="{TemplateBinding SendMessageButtonImage}"
                                    BackgroundColor="Transparent"
                                    Command="{TemplateBinding ActualSendMessageCommand}"
                                    WidthRequest="30"
                                    HeightRequest="30"
                                    VerticalOptions="Center" />
        </Grid>
    </Grid>
</ControlTemplate>

I hope this is helpful.

Regards,
Petar Marchev
Progress Telerik