我如何创建Xamarin.Forms卡片轮播？

Question

我如何以Xamarin形式获得这张卡轮播？我是在ASP.Net-MVC C＃中完成的，正在使用JS插件以及HTML和CSS。现在我需要使用Xamarin Forms C＃和XAML来做到这一点？

这些是我的名称空间：

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"

Answer 1

将CarouselView.FormsPlugin安装到您的NuGEt解决方案中。

在CarouselViewRenderer.Init();之前在MainActivity.s和AppDelegate.cs中添加LoadApplication(new App());

在您要使用carousalview的xaml中，

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

在框架内相应地添加控件。

Answer 2

您还可以通过nuget安装来使用CardsView。

<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; }

}

在Forms.Init（）之后，在Android Mainactivity和IOS AppDelegate中添加以下代码

CardsViewRenderer.Preserve（）在FinishedLaunching中用于iOS AppDelegate

CardsViewRenderer.Preserve（）用于OnCreate中的Android MainActivity

关于使用CardsView的更多方法，您可以看一下：

https://github.com/AndreiMisiukevich/CardView

如果我的回复对您有帮助，请记住将我的回复标记为答案，谢谢。