We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EssentialUIKit onboarding doesnt work with Grid inside SfRotator On Android

Thread ID:

Created:

Updated:

Platform:

Replies:

149376 Nov 23,2019 10:56 PM UTC Dec 9,2019 06:12 AM UTC Xamarin.Forms 5
loading
Tags: SfRotator
Emil
Asked On November 23, 2019 11:00 PM UTC

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}" />

           
           

Hemalatha Marikumar [Syncfusion]
Replied On November 25, 2019 09:56 AM UTC

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: 
  
 
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
Replied On November 30, 2019 03:02 PM UTC

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 [Syncfusion]
Replied On December 2, 2019 12:48 PM UTC

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
Replied On December 8, 2019 01:27 PM UTC

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 [Syncfusion]
Replied On December 9, 2019 06:12 AM UTC

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. 
 
 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon