Issue with RadBorder Control not working correctly on iOS

[Dimitris]

Hello,

I am encountering an issue with the RadBorder control in Xamarin.Forms on iOS devices. The RadBorder control is not rendering correctly, and its properties such as Margin and CornerRadius are not being applied on iOS. I have tested the code on Android devices, where it functions as expected.

Here is a snippet of the XAML code that demonstrates the issue:

                            <telerikDataControls:RadListView x:Name="TaskList" 
                                                             Grid.Row="1"
                                                             IsItemSwipeEnabled="True"
                                                             ItemSwipeCompleted="TaskList_ItemSwipeCompleted"
                                                             SelectionChanged="TaskList_SelectionChanged"                                                   
                                                             SelectionMode="Single" 
                                                             SelectionGesture="Tap"            
                                                             SwipeOffset="50, 0, 50, 0" 
                                                             SwipeThreshold="10"
                                                             HeightRequest="30"
                                                             RefreshRequested="TaskList_RefreshRequested"
                                                             IsPullToRefreshActive="True"
                                                             IsPullToRefreshEnabled="True"
                                                             VerticalOptions="FillAndExpand"
                                                             BackgroundColor="LightGray" >
                                <telerikDataControls:RadListView.ItemTemplate >
                                    <DataTemplate>
                                        <telerikListView:ListViewTemplateCell >
                                            <telerikListView:ListViewTemplateCell.View>
                                                <Grid >
                                                    <telerikPrimitives:RadBorder BorderColor="#268ecd" Margin="3,6" BorderThickness="0" CornerRadius="18" >
                                                        <StackLayout Orientation="Horizontal" 
                                                                 Style="{StaticResource ListItem}" 
                                                                 VerticalOptions="FillAndExpand" 
                                                                 Padding="0" 
                                                                 BackgroundColor="White">
                                                            <BoxView BackgroundColor="{Binding CriticalityColors}" WidthRequest="7" HeightRequest="10" HorizontalOptions="Start"/>
                                                            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Spacing="0" Padding="0, 15">
                                                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" Spacing="5">
                                                                    <Label Text="{Binding TaskLabel}" Style="{StaticResource ListHeader}" TextColor="{StaticResource LightBlueColor}" />
                                                                    <Label Text="{Binding TargetLabel}" Style="{StaticResource ListInfo}" TextColor="{StaticResource GreyColor}" />
                                                                </StackLayout>
                                                                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="5">
                                                                    <Label Text="{Binding CategoryDesc}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="{StaticResource GreyColor}" Padding="0, 5" HorizontalOptions="StartAndExpand"/>
                                                                    <Label x:Name="DesComplLbl" Text="{Binding DesComplDateParenthesis}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="DesComplLbl_BindingContextChanged" HorizontalOptions="End"  Padding="0, 5"/>
                                                                </StackLayout>
                                                            </StackLayout>
                                                            <Image x:Name="statusImg" HorizontalOptions="End" Source="{Binding StatusImage}" Margin="0,0,0,10"/>
                                                        </StackLayout>
                                                    </telerikPrimitives:RadBorder>
                                                </Grid>
                                            </telerikListView:ListViewTemplateCell.View>
                                        </telerikListView:ListViewTemplateCell>
                                    </DataTemplate>
                                </telerikDataControls:RadListView.ItemTemplate>
                                <telerikDataControls:RadListView.ItemSwipeContentTemplate>

I have also provided below the Expected Output (Android) and the Incorrect Output (iOS)

Also there is an other issue for the IOS that when i Load the List for the first time the spacing behaves irregularly but after i refresh it the spacing returns to normal 

I would appreciate any guidance or assistance in resolving this problem. Please let me know if you need any additional information or code samples.

Thank you for your support.

[Didi]

Hello Dimitris,

I have tested the case and on my side the margins and RadBorder radius applies as expected. When selecting an item the corners are displayed. The behavior happens initially as the native RadListView for iOS has a default background color. You can change this by setting the ListView ItemStyle.

Example: 

      <telerikDataControls:RadListView.ItemStyle>
          <telerikListView:ListViewItemStyle BackgroundColor="Transparent"
                                             BorderColor="Transparent"
                                             BorderLocation="None"
                                             BorderWidth="0"/>

      </telerikDataControls:RadListView.ItemStyle>

Image is attached. I hope this will be of help.

Regards,
Didi
Progress Telerik