EssentialUIKit onboarding doesnt work with Grid inside SfRotator On Android

I have just changed  WalkthroughItemPage in your EssentialUIKit  source code by replacing StackLayout with Grid and nothing is displayed on the screen. why it doesnt work with the Grid? Works on UWP but not on Android

Hi Emil Alipiev, 

  

Greetings from Syncfusion. 

 

We have checked the reported issue with UIKit Essential sample, and we would like to let you know that animation on Rotator’s item depend on the SfRotatorBehaviour.cs file code. Here, we have got the animated child based on its parent layout as like in below 

 

CodeSnippet[C#]: 

 

 

But from the provided code snippet, you have modified that parent layout from StackLayout to Grid. If that changes should also reflect in the RotatorBehaviour file since they are depended. Hence to resolve this issue, please modify the code snippet like in below 

 

 

  

SfRotatorBehaviour.cs file location: 

  

 

  

We have attached a modified file for SfRotatorBehaviour.cs, find below the link: 

  

File: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfRotatorBehavior-1802657507 

 

Works on UWP but not on Android:  Since that animated code will not execute for UWP platform. Hence it gets worked in UWP. 

  

Please let us know, if you have any other concerns. 

 

Regards, 

Hemalatha M. 

thank you for the answer. i have still problem on android. when i change the template as below. I want 3 items are aligned within the grid filling the screen. on your sample, image siz small for me. But below layout doesnt work, image covers entire screen and labels remain behind the image. I believe that this is the problem with sfrotator. below grid would work fine outside sfrotator item. is it a bug?

 <Grid x:Name="slMain"

            BackgroundColor="Transparent"           

            VerticalOptions="FillAndExpand">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

        <!--  Label to display header  -->

        <Label Grid.Row="0"  Grid.Column="0"

                Margin="0,30,0,8"                

                TextColor="White"

                HorizontalOptions="Center"               

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Style="{StaticResource LabelStyle}"

                Text="{Binding Header}"

                TranslationY="{OnPlatform Default=60,

                                          UWP=0}"

                  />

        <!--  Image for display svg image  -->

        <ffimageloadingsvg:SvgCachedImage Grid.Row="1"  Grid.Column="0"

                BackgroundColor="Transparent"

                VerticalOptions="FillAndExpand"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Source="{Binding ImagePath}"       

                HeightRequest="{core:OnPlatformOrientationDoubleValue Default=400,

                                                                      AndroidPhonePortrait=300,

                                                                      AndroidPhoneLandscape=240,

                                                                      iOSPhonePortrait=300,

                                                                      iOSPhoneLandscape=240}"

                WidthRequest="{x:OnIdiom Phone=200,

                                         Desktop=300,

                                         Tablet=300}" />

        <!--  Label to display content  -->

        <Label  Grid.Row="2"   Grid.Column="0"           

                TextColor="White" BackgroundColor="Yellow"

                HorizontalOptions="Center"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Style="{StaticResource LabelStyle}"

                Text="{Binding Content}"

                TranslationY="{OnPlatform Default=60,

                                          UWP=0}" />

    </Grid>

Hi Emil Alipiev, 

 

Thanks for your update. 

 

We have checked your provided code snippet and modified the same to satisfy your requirement as per in below code snippet. 

 

XAML: 

  

Please let us know if you have any other queries. 

 

Regards, 

Hemalatha M. 

if i change the walkthroughitempage like below Header label goes behind the image. why is it happening? it is the case only for rotatoritem. using outside rotator it is not laying UI like that

Hi Emil Alipiev, 

 

Thanks for your update. 

 

We have validated your query, we would like to let you know that In WalkthroughItemPage TranslationY applied for a Label, so only Label YPosition is modified. If you need a translation for a Label, we suggest that you reset the TranslationY position value based on your view or else you can remove it. Below the highlighted code snippet has a TranslationY position location. 

 

Link: https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.visualelement.translationy?view=xamarin-forms  

 

CodeSnippet[XAML]: 

 

Please let us know if you have any other concerns. 

 

Regards, 

Hemalatha M.