I am new to Xamarin.Forms and I am trying to do a kind of Tinder interaction. At the moment all is working fine until I wrap that component into a ScrollView. What is happening is that when I do the swipe it get stuck and I have to click on an element to put it on the right place (the app doesn't crash). I shared my code and I would be so glad if someone could help me.
ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:swipeCardView="clr-namespace:MLToolkit.Forms.SwipeCardView;assembly=MLToolkit.Forms.SwipeCardView"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:gradient ="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
x:Class="Ventazer.Views.AttendeeList">
<ContentPage.Content>
<ScrollView VerticalScrollBarVisibility="Never">
<StackLayout BackgroundColor="{StaticResource PrimaryFormBackground}">
<Label Text="No data Found" Margin="0,300,0,0" IsVisible="false" x:Name="lbl" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
<swipeCardView:SwipeCardView x:Name="swipeCardView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Profiles}"
SwipedCommand="{Binding SwipedCommand}"
SupportedSwipeDirections="Left, Right"
SupportedDraggingDirections="Left,Right"
DraggingCommand="{Binding DraggingCommand}"
Threshold="{Binding Threshold}"
Padding="0"
Margin="0,0,0,0">
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"
x:Name="Prueba">
<Frame Padding="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}">
<AbsoluteLayout x:Name="absoluteContent" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}">
<!-- Image Profile -->
<ffimageloading:CachedImage Source="{Binding UserImage}"
Aspect="AspectFill"
AbsoluteLayout.LayoutBounds=".5,0.5,1,1"
AbsoluteLayout.LayoutFlags="All"
RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<!-- Black gradient overlay Background-->
<gradient:SfGradientView >
<gradient:SfGradientView.BackgroundBrush>
<gradient:SfLinearGradientBrush StartPoint="0.5, 0.5" EndPoint="0.5, 1">
<gradient:SfLinearGradientBrush.GradientStops>
<gradient:SfGradientStop Color="{StaticResource Transparent}" Offset="0.0"/>
<gradient:SfGradientStop Color="{StaticResource Black}" Offset="1.0" />
</gradient:SfLinearGradientBrush.GradientStops>
</gradient:SfLinearGradientBrush>
</gradient:SfGradientView.BackgroundBrush>
</gradient:SfGradientView>
<!-- Info of the person -->
<!-- name -->
<Label x:Name="profileName"
Text="{Binding UserNameAge}"
TextColor="{StaticResource White}"
FontSize="24"
FontAttributes="Bold"
AbsoluteLayout.LayoutBounds="0.3, 0.5, 0.8, 30"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"/>
<!-- Ocupation -->
<ffimageloading:CachedImage Source="Occupation_icon.png"
AbsoluteLayout.LayoutBounds="0.07,0.6, 35, 35"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
<Label Text="{Binding UserOccupation}"
TextColor="{StaticResource White}"
FontSize="20"
FontAttributes="None"
AbsoluteLayout.LayoutBounds="0.7, 0.6, 300, 30"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
<!-- Location -->
<ffimageloading:CachedImage Source="Location_icon.png"
AbsoluteLayout.LayoutBounds="0.07,0.7, 35, 35"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
<Label Text="{Binding UserLocation}"
TextColor="{StaticResource White}"
FontSize="20"
FontAttributes="None"
AbsoluteLayout.LayoutBounds="0.7, 0.7, 300, 30"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
<!-- Like squere feedback-->
<Frame x:Name="LikeFrame"
BorderColor="{StaticResource AquaGreen}"
BackgroundColor="Transparent"
Padding="0"
CornerRadius="20"
AbsoluteLayout.LayoutBounds="0.1,.1, 150, 50"
AbsoluteLayout.LayoutFlags="PositionProportional"
Rotation="-10"
Opacity="0">
<Label x:Name="LikeText"
Text="LET'S GO"
TextColor="{StaticResource AquaGreen}"
BackgroundColor="Transparent"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
VerticalOptions="CenterAndExpand"
FontSize="20"></Label>
</Frame>
<!-- Nope squere feedback-->
<Frame x:Name="NopeFrame"
BorderColor="{StaticResource PinkCarmesi}"
BackgroundColor="Transparent"
Padding="0"
CornerRadius="20"
AbsoluteLayout.LayoutBounds="0.9,.1, 150, 50"
AbsoluteLayout.LayoutFlags="PositionProportional"
Rotation="10"
Opacity="0">
<Label Text="NOPE"
TextColor="{StaticResource PinkCarmesi}"
BackgroundColor="Transparent"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
VerticalOptions="CenterAndExpand"
FontSize="20"></Label>
</Frame>
<!-- Button Nope -->
<Button x:Name="nopeButton"
WidthRequest="60"
HeightRequest="60"
BorderRadius="30"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutBounds="0.1, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
Clicked="OnNopeClicked"
/>
<Button WidthRequest="60"
HeightRequest="60"
BorderRadius="30"
BackgroundColor="{StaticResource Carmesi}"
AbsoluteLayout.LayoutBounds="0.1, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
InputTransparent="true"
/>
<Image Source="thumbs_down.png"
WidthRequest="60"
HeightRequest="60"
AbsoluteLayout.LayoutBounds="0.1, 0.855, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
InputTransparent="True"/>
<!--Button check profile-->
<Button x:Name="profileButton"
WidthRequest="60"
HeightRequest="60"
BorderRadius="30"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutBounds="0.5, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
Clicked="OnProfileClicked"/>
<Button WidthRequest="60"
HeightRequest="60"
BorderRadius="30"
BackgroundColor="{StaticResource Primary}"
AbsoluteLayout.LayoutBounds="0.5, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
InputTransparent="true"/>
<Image Source="profile_icon.png"
WidthRequest="60"
HeightRequest="60"
AbsoluteLayout.LayoutBounds="0.5, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
InputTransparent="true"/>
<!-- Button Let's go -->
<Button x:Name="likeButton"
WidthRequest="60"
HeightRequest="60"
BorderRadius="30"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutBounds="0.9, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
Clicked="OnLikeClicked"/>
<Button WidthRequest="60"
HeightRequest="60"
BorderRadius="30"
BackgroundColor="{StaticResource AquaGreen}"
AbsoluteLayout.LayoutBounds="0.9, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
InputTransparent="true"/>
<Image Source="thumbs_up.png"
WidthRequest="60"
HeightRequest="60"
AbsoluteLayout.LayoutBounds="0.9, 0.85, 60, 60"
AbsoluteLayout.LayoutFlags="PositionProportional"
InputTransparent="true"/>
</AbsoluteLayout>
</Frame>
</StackLayout>
<!--<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame CornerRadius="0"
Padding="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<ffimageloading:CachedImage x:Name="imgUserImage"
LoadingPlaceholder="default_placeholder.png"
Source="{Binding UserImage}"
DownsampleToViewSize="true"
Aspect="AspectFill"
RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
</Frame>
</Grid>-->
<!--<Frame CornerRadius="5" Padding="0" Margin="30,30,30,0" BackgroundColor="{StaticResource white}">
<StackLayout Orientation="Vertical" BackgroundColor="{StaticResource white}">
-->
<!-- UserImage-->
<!--
<ffimageloading:CachedImage x:Name="imgUserImage" LoadingPlaceholder="default_placeholder.png" Aspect="Fill" Source="{Binding UserImage}" HeightRequest="300" DownsampleToViewSize="true" />
<Label x:Name="userName" Text="{Binding UserName}" TextColor="{StaticResource darkTextColor}" BackgroundColor="{StaticResource white}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="{StaticResource FontSize}" Margin="10">
</Label>
<Label x:Name="eventName" Text="{Binding EventName}" HeightRequest="50" TextColor="{StaticResource white}" BackgroundColor="{StaticResource Primary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="{StaticResource LargeFontSize}" Margin="0,10,0,10" FontFamily="{StaticResource LightFont}"
VerticalOptions="EndAndExpand">
</Label>
<Button BackgroundColor="{StaticResource PrimaryButton}" Text="View Profile" Clicked="Handle_Clicked" TextColor="{StaticResource white}" BorderRadius="0" FontFamily="{StaticResource NormalFont}" FontSize="{StaticResource FontSize}" CornerRadius="5" Margin="10,0,10,10" />
</StackLayout>
</Frame>-->
</DataTemplate>
</swipeCardView:SwipeCardView.ItemTemplate>
</swipeCardView:SwipeCardView>
<StackLayout x:Name="profileDetail"
IsVisible="false">
<StackLayout Margin="28, 20, 26, 34">
<Label Text="Mobile/Phone"
FontSize="16"
FontAttributes="Bold"
TextColor="{StaticResource Dark}"/>
<Label Text="{Binding UserPhone}"
FontSize="16"
FontAttributes="None"
TextColor="{StaticResource Dark}"
Margin="0, 0, 0, 20"/>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill"
Margin="0, 0, 0, 20">
<ffimageloading:CachedImage Source="Interests_icon"
Margin="0, 0, 4, 0"/>
<Label Text="Interests"
FontSize="16"
FontAttributes="Bold"
TextColor="{StaticResource Dark}"/>
</StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill">
<Label Text="{Binding UserInterest}"
FontSize="16"
FontAttributes="None"
TextColor="{StaticResource Dark}"/>
</StackLayout>
</StackLayout>
</StackLayout>
<!--<Label x:Name="attendeecount" IsVisible="false" TextColor="{StaticResource Grey}" FontFamily="{StaticResource NormalFont}" HorizontalOptions="CenterAndExpand" Margin="20,0,20,50" />-->
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>i also share a function that makes that my swipecard get smaller and show the details, ando some interfaces.
public void OnProfileClicked(object sender, EventArgs e)
{
Debug.WriteLine("Clic profile");
if (expandProfile)
{
swipeCardView.LayoutTo(new Rectangle(0, 0, swipeCardView.Bounds.Width, swipeCardView.Bounds.Height - 200), 300, Easing.Linear);
profileDetail.LayoutTo(new Rectangle(0, swipeCardView.Bounds.Height - 200, profileDetail.Bounds.Width, profileDetail.Bounds.Height + swipeCardView.Bounds.Height), 300, Easing.Linear);
profileDetail.IsVisible = true;
}
else
{
swipeCardView.LayoutTo(new Rectangle(0, 0, swipeCardView.Bounds.Width, swipeCardView.Bounds.Height + 200), 300, Easing.Linear);
profileDetail.LayoutTo(new Rectangle(0, profileDetail.Bounds.Height, profileDetail.Bounds.Width, profileDetail.Bounds.Height - profileDetail.Bounds.Height), 300, Easing.Linear);
profileDetail.IsVisible = false;
}
expandProfile = !expandProfile;
}I will be so glad if someone can help me!
