EssentialUIKit onboarding doesnt work with Grid inside SfRotator On Android

[Emil]

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

 

        HorizontalOptions="FillAndExpand"

            VerticalOptions="FillAndExpand">

           

               

               

               

           

           

           

                BackgroundColor="Transparent"

                HeightRequest="{core:OnPlatformOrientationDoubleValue Default=300,

                                                                      AndroidPhonePortrait=200,

                                                                      AndroidPhoneLandscape=140,

                                                                      iOSPhonePortrait=200,

                                                                      iOSPhoneLandscape=140}"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Source="{Binding ImagePath}"

                VerticalOptions="Center"

                WidthRequest="{x:OnIdiom Phone=200,

                                         Desktop=300,

                                         Tablet=300}" />

           

           

                Margin="0,30,0,8"

                FontFamily="{StaticResource Montserrat-SemiBold}"

                FontSize="14"

                HorizontalOptions="Center"

                HorizontalTextAlignment="Center"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Style="{StaticResource LabelStyle}"

                Text="{Binding Header}"

                TranslationY="{OnPlatform Default=60,

                                          UWP=0}"

                VerticalTextAlignment="Center" />

           

           

                FontFamily="{StaticResource Montserrat-Medium}"

                FontSize="16"

                HorizontalOptions="Center"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Style="{StaticResource LabelStyle}"

                Text="{Binding Content}"

                TranslationY="{OnPlatform Default=60,

                                          UWP=0}" />

           

[Hemalatha Marikumar]

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#]: 

 

public void Animation(SfRotator rotator, double selectedIndex) 

        { 

            if ( rotator != null && rotator.ItemsSource != null && rotator.ItemsSource.Count() > 0 ) 

            { 

                …… 

 

                if ( Device.RuntimePlatform != Device.UWP ) 

                { 

                    var items = ( rotator.ItemsSource as IEnumerable<object> ).ToList(); 

 

                    // Start animation to selected view. 

                    var currentItem = items[index]; 

                    var childElement = ( ( ( currentItem as Boarding ).RotatorItem as ContentView ).Children[0] as StackLayout ).Children.ToList(); 

                    if ( childElement != null && childElement.Count > 0 ) 

                    { 

                        this.StartAnimation(childElement, currentItem as Boarding); 

                    } 

 

                    ……… 

 

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 

 

public void Animation(SfRotator rotator, double selectedIndex) 

        { 

            if ( rotator != null && rotator.ItemsSource != null && rotator.ItemsSource.Count() > 0 ) 

            { 

                …… 

 

                if ( Device.RuntimePlatform != Device.UWP ) 

                { 

                       

                    …… 

                   // Start animation to selected view. 

                    var currentItem = items[index]; 

                    var childElement = ( ( ( currentItem as Boarding ).RotatorItem as ContentView ).Children[0] as Grid ).Children.ToList(); 

                    if ( childElement != null && childElement.Count > 0 ) 

                    { 

                        this.StartAnimation(childElement, currentItem as Boarding); 

                    } 

                  … 

 

 

  

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. 

[Emil]

hi,

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>

[Hemalatha Marikumar]

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: 

  <Grid x:Name="slMain" 

            BackgroundColor="Transparent"           

            VerticalOptions="FillAndExpand"> 

            <Grid.RowDefinitions> 

                <RowDefinition Height="100"/> 

                <RowDefinition Height="*"/> 

                <RowDefinition Height="*"/> 

            </Grid.RowDefinitions> 

         

            <!--  Label to display header  -->          

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

                Margin="0,0,0,8"                

                TextColor="White" 

                HorizontalOptions="Center"                

                Opacity="{OnPlatform Default=0,UWP=1}" 

                Style="{StaticResource LabelStyle}" 

                Text="{Binding Header}" 

                TranslationY="{OnPlatform Default=10,  UWP=0}" /> 

  

  

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

    <Image 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=140, 

                                                                      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> 

  

Please let us know if you have any other queries. 

 

Regards, 

Hemalatha M. 

[Emil]

hi,

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

 <Grid       

        HorizontalOptions="FillAndExpand"

            VerticalOptions="FillAndExpand">

            <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition Height="*"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <!--  Label to display header  -->

            <Label Grid.Row="0"

                

                FontFamily="{StaticResource Montserrat-SemiBold}"

                FontSize="14"

                HorizontalOptions="Center"

                HorizontalTextAlignment="Center"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Style="{StaticResource LabelStyle}"

                Text="{Binding Header}"

                TranslationY="{OnPlatform Default=60,

                                          UWP=0}"

                VerticalTextAlignment="Center" />

            

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

            <svg:SVGImage  Grid.Row="1" Margin="0,10,0,0"

                BackgroundColor="Transparent"

                

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Source="{Binding ImagePath}"

                VerticalOptions="FillAndExpand"

                

                WidthRequest="{x:OnIdiom Phone=200, 

                                         Desktop=300, 

                                         Tablet=300}" />

           

            <!--  Label to display content  -->

            <Label Grid.Row="2"

                FontFamily="{StaticResource Montserrat-Medium}"

                FontSize="16"

                HorizontalOptions="Center"

                Opacity="{OnPlatform Default=0,

                                     UWP=1}"

                Style="{StaticResource LabelStyle}"

                Text="{Binding Content}"

                TranslationY="{OnPlatform Default=60,

                                          UWP=0}" />

            </Grid>

[Hemalatha Marikumar]

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]: 

 <Label Grid.Row="0" 

                FontFamily="{StaticResource Montserrat-SemiBold}" 

                FontSize="14" 

                HorizontalOptions="Center" 

                HorizontalTextAlignment="Center" 

                Opacity="{OnPlatform Default=0, 

                                     UWP=1}" 

                Style="{StaticResource LabelStyle}" 

                Text="{Binding Header}" 

                TranslationY="{OnPlatform Default=60, 

                                          UWP=0}" 

                VerticalTextAlignment="Center" /> 

 

Please let us know if you have any other concerns. 

 

Regards, 

Hemalatha M.