CardView:Xamarin.Forms 卡片视图组件，支持轮播、翻页、3D 切换效果

CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms

当前项目代码仓暂无内容

自动翻译

卡片视图展示

  <p align="center">
    <img src="https://raw.githubusercontent.com/AndreiMisiukevich/CardView/master/images/Cardsview-logotype-main.png" width="400">
  </p>
</html>

动画效果预览

<html>
  <table style="width:100%">
    <tr>
      <th>CardsView</th>
      <th>CarouselView</th> 
      <th>CoverFlowView</th>
      <th>CubeView</th>
    </tr>
    <tr>
      <td><img src="https://media.giphy.com/media/3oFzlV5tQhF1udDxIY/giphy.gif"></td>
      <td><img src="https://media.giphy.com/media/du0akXCuO8BTHzBuat/giphy.gif"></td>
      <td><img src="https://media.giphy.com/media/1dH0dPqdPHwkDadmAx/giphy.gif"></td>
      <td><img src="https://media.giphy.com/media/SXmXvjNJQMCcWMrvPj/giphy.gif"></td>
    </tr>
  </table>
</html>

<html>
  <table style="width:100%">
    <tr>
      <th>ScaleFactor & OpacityFactor</th>
      <th>ScaleFactory & OpacityFactor [2]</th>
      <th>TabsControl</th>
    </tr>
    <tr>
      <td><img src="https://media.giphy.com/media/S9EVF6Xzq6K488rr5B/giphy.gif"></td>
      <td><img height="480" src="https://github.com/AndreiMisiukevich/AvengersCards/blob/master/example.gif?raw=true"></td>
      <td><img src="https://media.giphy.com/media/JNxG5fFS1pa886U9N0/giphy.gif"></td>
    </tr>
  </table>
</html>

CoverFlowView 示例: GitHub链接
CarouselView 示例: GitHub链接
CubeView 示例: GitHub链接
CardsView 示例: GitHub链接

安装设置

通过 NuGet 获取：CardsView
将 NuGet 包添加到您的 Xamarin.Forms .NETSTANDARD/PCL 项目以及平台特定项目中
在 Forms.Init(...) 后添加：
- iOS 的 AppDelegate 中 FinishedLaunching 方法添加 CardsViewRenderer.Preserve()
- Android 的 MainActivity 中 OnCreate 方法添加 CardsViewRenderer.Preserve()

平台	版本
Xamarin.iOS	iOS 7+
Xamarin.Mac	全部
Xamarin.Android	API 15+
Windows 10 UWP	10+
Tizen	4.0+
Gtk	全部
WPF	.NET 4.5
.NET Standard	2.0+

C# 代码示例：

// 创建 CardsView 并进行设置

var cardsView = new CardsView
{
    ItemTemplate = new DataTemplate(() => new ContentView()) //your template
};
cardsView.SetBinding(CardsView.ItemsSourceProperty, nameof(PanCardSampleViewModel.Items));
cardsView.SetBinding(CardsView.SelectedIndexProperty, nameof(PanCardSampleViewModel.CurrentIndex));

-> 您可以选择性地创建 ViewModel... 或者不创建... 根据您的意愿。

-> 指示器栏（适用于 CarouselView，或许）。添加指示器非常简单。 -> 只需将 IndicatorsControl 添加到您的 carouselView 中作为子视图即可。

carouselView.Children.Add(new IndicatorsControl());

XAML:

XAML（可扩展应用程序标记语言）是一种用于创建用户界面的标记语言。它允许开发人员以声明性方式定义和构建应用程序界面，通常用于.NET框架中，特别是在WPF（Windows Presentation Foundation）和Silverlight技术中。通过XAML，开发人员可以描述应用程序的各种元素和结构，从而实现界面与后端逻辑的分离。

<cards:CarouselView 
    ItemsSource="{Binding Items}"
    SelectedIndex="{Binding CurrentIndex}">
    <cards:CarouselView.ItemTemplate>
        <DataTemplate>
            <ContentView>
                <Frame 
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    HeightRequest="300"
                    WidthRequest="300"
                    Padding="0" 
                    HasShadow="false"
                    IsClippedToBounds="true"
                    CornerRadius="10"
                    BackgroundColor="{Binding Color}">
                    
                    <Image Source="{Binding Source}"/> 
                    
                </Frame>
            </ContentView>
        </DataTemplate>
    </cards:CarouselView.ItemTemplate>

    <controls:LeftArrowControl/>
    <controls:RightArrowControl/>
    <controls:IndicatorsControl/>
</cards:CarouselView>

此外，您还能够控制IndicatorsControl的显示与隐藏。例如，如果用户在N毫秒内未选择新页面，指示器将会消失。只需设置ToFadeDuration = 2000（消失前的延迟时间为2秒）即可。您还可以管理LeftArrowControl和RightArrowControl，以及IndicatorsControl（同样包含ToFadeDuration属性）。

指示器的样式配置：

 <ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="ActiveIndicator" TargetType="Frame">
            <Setter Property="BackgroundColor" Value="Red" />
        </Style>
        <Style x:Key="InactiveIndicator" TargetType="Frame">
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="OutlineColor" Value="Red" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

... 

<controls:IndicatorsControl ToFadeDuration="1500"
          SelectedIndicatorStyle="{StaticResource ActiveIndicator}"
          UnselectedIndicatorStyle="{StaticResource InactiveIndicator}"/>

如果您希望直接通过 XAML 添加项目元素。

...
    <cards:CarouselView.ItemsSource>
            <x:Array Type="{x:Type View}">
                <ContentView>
                    <Image Source="yourImage.png"/>
                </ContentView>
                <RelativeLayout>
                    <Button Text="Click" />
                </RelativeLayout>
                <StackLayout>
                    <Label Text="any text"/>
                </StackLayout>
            </x:Array>
    </cards:CarouselView.ItemsSource>
...

如果您希望为侧视图实现缩放或透明度变化效果（ScaleFactor 与 OpacityFactor），您需要在处理器中管理相应的属性，并通过 x:Arguments 将它们传递给视图构造器：

<ContentPage 
    ...
    xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
    xmlns:proc="clr-namespace:PanCardView.Processors;assembly=PanCardView">

...

<cards:CoverFlowView 
      PositionShiftValue="145"
      ItemsSource="{Binding Items}">

      <x:Arguments>
          <proc:CoverFlowProcessor ScaleFactor="0.75" OpacityFactor="0.25" />
      </x:Arguments>

  <cards:CoverFlowView.ItemTemplate>
      <DataTemplate>
         <Frame
             Margin="80">
               
              ....

          </Frame>
      </DataTemplate>
  </cards:CoverFlowView.ItemTemplate>

</cards:CoverFlowView>

...

如果您希望自定义指示器，需要设置 SelectedIndicatorStyle 和/或 UnselectedIndicatorStyle，或者您可以扩展此类并重写几个方法。此外，您还可以自定义指示器的位置（需要设置旋转 / 绝对布局标志和边界等）。

此类描述了默认的指示器样式（每个默认指示器项为 Frame） https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Styles/DefaultIndicatorItemStyles.cs

更多示例 可以在此处找到 https://github.com/AndreiMisiukevich/CardView/tree/master/PanCardViewSample

自定义动画

您可以创建自定义动画，只需实现 IProcessor 或扩展现有的处理器（更改动画速度或类型等） https://github.com/AndreiMisiukevich/CardView/tree/master/PanCardView/Processors

解决方案

如果您想在 Android 上的 TabbedPage 中放入您的卡片视图/轮播视图：

为 UserInteraction 事件添加事件处理器
在 UserInteractionStatus.Started 时：禁用 TabbedPage 的滑动滚动
在 UserInteractionStatus.Ending/Ended 时：启用 TabbedPage 的滑动滚动

示例：

TabbedPage:

public partial class TabbedHomePage : Xamarin.Forms.TabbedPage
{
    public static TabbedHomePage Current { get; private set; }

    public TabbedHomePage()
    {
        Current = this;
    }

    public static void DisableSwipe()
    {
        Current.On<Android>().DisableSwipePaging();
    }
    
    public static void EnableSwipe()
    {
        Current.On<Android>().EnableSwipePaging();
    }
}

卡片视图/轮播视图页面：

public PageWithCarouselView()
{
    InitializeComponent();

    carouselView.UserInteracted += CarouselView_UserInteracted;
}

private void CarouselView_UserInteracted(PanCardView.CardsView view, PanCardView.EventArgs.UserInteractedEventArgs args)
{
    if (args.Status == PanCardView.Enums.UserInteractionStatus.Started)
    {
        TabbedHomePage.DisableSwipe();
    }
    if (args.Status == PanCardView.Enums.UserInteractionStatus.Ended)
    {
        TabbedHomePage.EnableSwipe();
    }
}

如果你不想处理垂直滑动，或者它们打断了你的滚动，你可以设置 IsVerticalSwipeEnabled = "false"。

-> 如果以上技巧都无法帮助你，你可以尝试使用 IsPanInteractionEnabled = false。这个技巧会禁用平移交互，但仍然保留滑动卡片的 ability。

-> 如果你在更新 ItemsSource 时遇到崩溃，尝试在主线程中添加或设置项目（使用 Device.BeginInvokeOnMainThread）。

-> GTK 使用单击和双击进行前进和后退导航。

查看源代码获取更多信息，或者 直接问我 =)

完整文档

https://github.com/AndreiMisiukevich/CardView/tree/master/docs

许可

The MIT License (MIT)，参见许可文件

贡献

随时创建 issues 和 PRs 😃

项目介绍

CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms

MIT C#795提交数cardsview cardviews carouselview coverflow coverflowview cubeview hacktoberfest xamarin-forms

定制我的领域

README

21691112访问 GitHub