How can I get this carousel of cards in Xamarin Forms?
I did it in ASP.Net-MVC C# and I'm using a JS plugin and HTML and CSS.
Now I need to do it using Xamarin Forms C# and XAML?
These are my namespaces:
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Install CarouselView.FormsPlugin into your NuGEt solution.
Add CarouselViewRenderer.Init();
in your MainActivity.s and AppDelegate.cs before LoadApplication(new App());
In your xaml where you want to use carousalview,
<controls:CarouselViewControl IndicatorsTintColor="LightBlue" x:Name="TilesSlider" IsVisible="False" ArrowsTintColor="White" CurrentPageIndicatorTintColor="White" ItemsSource="{Binding }" ShowIndicators="True" AnimateTransition="True" ShowArrows="True" Orientation="Horizontal" InterPageSpacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="White" BorderColor="Snow" Margin="10,2,10,7">
<-----You can add your control her---->
</Frame>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
Inside the frame add your controls accordingly.
You can also use CardsView by nuget installing.
<ContentPage
x:Class="demo2.collection.Page14"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
xmlns:ffimage="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:proc="clr-namespace:PanCardView.Processors;assembly=PanCardView"
BackgroundColor="Black">
<ContentPage.Content>
<StackLayout>
<cards:CarouselView ItemsSource="{Binding Items}" SlideShowDuration="3500">
<x:Arguments>
<!--<proc:BaseCarouselFrontViewProcessor
OpacityFactor="0"
RotationFactor="0.1"
ScaleFactor="0.5" />
<proc:BaseCarouselBackViewProcessor
OpacityFactor="0"
RotationFactor="0.1"
ScaleFactor="0.5" />-->
</x:Arguments>
<cards:CarouselView.ItemTemplate>
<DataTemplate>
<ContentView>
<Frame
Padding="0"
CornerRadius="10"
HasShadow="false"
HeightRequest="300"
HorizontalOptions="Center"
IsClippedToBounds="true"
VerticalOptions="Center"
WidthRequest="300">
<ffimage:CachedImage Source="{Binding imagesource}" />
</Frame>
</ContentView>
</DataTemplate>
</cards:CarouselView.ItemTemplate>
<controls:IndicatorsControl ToFadeDuration="1500" />
<!--<controls:LeftArrowControl ToFadeDuration="2500" />
<controls:RightArrowControl ToFadeDuration="2500" />-->
</cards:CarouselView>
</StackLayout>
</ContentPage.Content>
public partial class Page14 : ContentPage
{
public ObservableCollection<model> Items { get; set; }
public Page14 ()
{
InitializeComponent ();
Items = new ObservableCollection<model>()
{
new model(){imagesource="a11.jpg"},
new model(){imagesource="a12.jpg"},
new model(){imagesource="a13.jpg"},
new model(){imagesource="a14.jpg"},
new model(){imagesource="a15.jpg"},
new model(){imagesource="a9.jpg"}
};
this.BindingContext = this;
}
}
public class model
{
public string imagesource { get; set; }
}
Add the following code in Android Mainactivity and IOS AppDelegate, after Forms.Init()
CardsViewRenderer.Preserve() for iOS AppDelegate in FinishedLaunching
CardsViewRenderer.Preserve() for Android MainActivity in OnCreate
More ways about using CardsView, you can take a look:
https://github.com/AndreiMisiukevich/CardView
If my reply help you, please remember to mark my reply as answer, thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.