Telerik Forums
UI for Xamarin Forum
1 answer
90 views

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.
8 answers
70 views

Hi, I need to animate my RadBorder. However, when I rotate border to the left, my controls are overlapped. Code is attached. I did it using Frame as a parent element and it works fine.

<telerikPrimitives:RadBorder x:Name="bnSolo" Grid.Row="0" Grid.Column="0"  BorderColor="Yellow" CornerRadius="25">
    <Grid BackgroundColor="Transparent">
        <Image Source="homesolo" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" />
        <Label Text="Solo" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
    </Grid>
    <telerikPrimitives:RadBorder.GestureRecognizers>
        <TapGestureRecognizer Tapped="PlayNowButton_Clicked" />
    </telerikPrimitives:RadBorder.GestureRecognizers>
</telerikPrimitives:RadBorder>

 

await bnSolo.RotateTo(25, 500, Easing.Linear);
await bnSolo.RotateTo(-25, 500, Easing.Linear);
Kyrylo
Top achievements
Rank 1
 answered on 30 Apr 2020
1 answer
38 views

I am trying to rotate by RadBorder to the left by -25. There are Grid with Image and Label inside and they are overlapped. Is it bug or I need to change something in my code? Help, please.

<telerikPrimitives:RadBorder x:Name="bnSolo" Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent">
                    <Grid BackgroundColor="Transparent">
                        <Image Source="homesolo" />
                        <Label Text="Solo" />
                    </Grid>
                    <telerikPrimitives:RadBorder.GestureRecognizers>
                        <TapGestureRecognizer Tapped="PlayNowButton_Clicked" />
                    </telerikPrimitives:RadBorder.GestureRecognizers>
</telerikPrimitives:RadBorder>

 

 

await bnSolo.RotateTo(-25, 500, Easing.Linear);
await bnSolo.RotateTo(25, 500, Easing.Linear);
await bnSolo.RotateTo(0, 500, Easing.Linear);

 

 

 

 

 
Yana
Telerik team
 answered on 04 Nov 2019
2 answers
167 views

I am using Xamarin.Controls.SignaturePad.Forms, and using the signature pad inside of a grid to have action buttons along the bottom. When doing so, it is necessary to use InputTransparent="True" and CascadeInputTransparent="False" in order for the SignaturePadView to allow the user to draw their signature as well as the buttons to still remain clickable.

I would like to wrap this inside a RadBorder, but it appears that there are inaccessible child views in the RadBorder before the "Content" inside the border, so CascaseInputTransparent = "False" seems to be causing possibly private inner views of the RadBorder (before my grid) to have InputTransparent default to "False" even though I want the border (and all child elements before my content) to be "True". Leaving CascadeInputTransparent as "True" (the default) causes the buttons to not be clickable. Removing InputTransparent="True" causes the SignaturePad to not track the user's finger and draw the signature.

THE QUESTION:

Is there currently a way to access any child views of the RadBorder before the nested content? If not, maybe this is more of a bug report instead of a question, or a helpful workaround for someone else that may encounter the error. Obviously, it would be nice if RadBorder handled these two settings as if it were one view and the cascade passed through as expected. I'm just guessing that there is an underlying system of nested views to make the RadBorder so awesome, and that they are not inheriting the settings for these items from the parent view.

<!-- this code works -->

<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Center"  VerticalOptions="Center" 
                    HeightRequest="400" WidthRequest="600" Padding="50"
                    Opacity="1" InputTransparent="True" CascadeInputTransparent="False">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <signature:SignaturePadView x:Name="PadView"
                                            Grid.Row="0"
                                            Grid.ColumnSpan="3"
                                        HeightRequest="300"
                                        WidthRequest="500"
                                        BackgroundColor="White"
                                        CaptionText="Signature" 
                                        CaptionTextColor="Black"
                                        ClearText="Clear" 
                                        ClearTextColor="Red"
                                        PromptText="Please Sign" 
                                        PromptTextColor="Red"
                                        SignatureLineColor="Aqua" 
                                        StrokeColor="Black" 
                                        StrokeWidth="2"/>


                <Button x:Name="CancelButton"
                        Text="Cancel"
                        Grid.Row="1"
                        Grid.Column="0"
                        TextColor="White"
                        BackgroundColor="Red"
                        Clicked="OnClickedCancel"
                        />

                <Button x:Name="ClearButton"
                        Text="Clear"
                        Grid.Row="1"
                        Grid.Column="1"
                        TextColor="White"
                        BackgroundColor="Silver"
                        Clicked="OnClickedClear"
                        />

                <Button x:Name="ContinueButton" 
                        Text="CONTINUE"
                        Grid.Row="1"
                        Grid.Column="2"
                        TextColor="White"
                        BackgroundColor="Silver"
                        Clicked="OnClickedContinue"
                        />
            </Grid>

<!-- wrapping the above inside of this RadBorder does not -->
<telerikPrimitives:RadBorder InputTransparent="True" CascadeInputTransparent="False" BackgroundColor="White" 
                                         HorizontalOptions="CenterAndExpand" VerticalOptions="Center"
                                         HeightRequest="400" WidthRequest="600" 
                                         Padding="50" CornerRadius="10">

<!-- the above grid code -->

</telerikPrimitives:RadBorder>

 

My workaround was to put both of these above into another grid, both at Row=0, Col=0 so that they would overlay, but then resizing the content becomes more tedious because I am having to set the width and height and padding between two separate overlays instead of just having it nested inside your RadBorder.

<Grid>

    <telerikPrimitives:RadBorder Grid.Row="0" Grid.Col="0" WidthRequest="500" HeightRequest="400" BackgroundColor=

                        White" HorizontalOptions="Center" VerticalOptions="Center"></telerikPrimitives:RadBorder>

   <Grid Grid.Row="0" Grid.Col="0" BackgroundColor="White"

           WidthRequest="400" HeightRequest="300" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center">

      <!-- Grid stuff w/ sig pad and buttons -->

   

   </Grid><!-- inner grid -->

 

</Grid><!-- outer grid -->

 

 

Didi
Telerik team
 answered on 05 Feb 2019
1 answer
133 views

Hi, I am needing to draw a shadow around RadListView Items.  I'm using Border but I don't see how to do a shadow effect and I don't want to use Frames.  Can you help with an example or snippet of code please?  Attaching a pic so you can see the type of shadow effect I'm trying to achieve. 

Thanks guys!

Brian

P.S. Sorry for the other post on this forum.  I hit submit too early didn't actually ask a question.   I did see a way to edit the post or to delete it.

 

Didi
Telerik team
 answered on 24 Jan 2019
1 answer
165 views

Hi, I'm using RadBorder to round corners of the items in a RadListView.  I added the requested mockup.  I'm needing this for iOS and Android.

 

Didi
Telerik team
 answered on 24 Jan 2019
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?