Xamarin Forms：是否可以通过左右翻转查看图片？答案

【问题标题】：Xamarin Forms: Is it possible to view the pictures by right or left flip?Xamarin Forms：是否可以通过左右翻转查看图片？
【发布时间】：2019-08-09 11:00:41
【问题描述】：

我的应用程序中有一个照片库。如果我选择一张照片，则所选照片会显示在另一个页面上，并带有左右箭头。当点击左箭头时，相册的上一张图片在屏幕上可见，如果点击右箭头，相册中的下一张图片将出现在屏幕上。

截图

我需要在不点击箭头的情况下查看下一张/上一张图片。是否可以通过左右滑动查看图片？是否有识别左右滑动屏幕的控件？

【问题讨论】：

docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…

标签： xamarin.forms swipe

【解决方案1】：

CarouselView 在这里为您服务！

https://devblogs.microsoft.com/xamarin/xamarin-forms-4-0-feature-preview-an-entirely-new-point-of-collectionview/

技术说明：启用 CollectionView（这也启用 CarouselView) 在初始化之前带有功能标志 MainActivity.cs 和 AppDelegate 中的 Xamarin.Forms：

global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

如果您不想使用新功能，可以添加 SwipeGestureRecognizer

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/swipe

为了快速加载和缓存我使用这个库

https://github.com/luberda-molinet/FFImageLoading

【讨论】：

【解决方案2】：

请注意，因为 CarouselView 处于预览阶段，您不应该在生产应用程序中使用它。

所以在CollectionView 没有发布之前你可以使用这个：

https://github.com/roubachof/Sharpnado.Presentation.Forms#carousel-layout

【讨论】：

【解决方案3】：

我需要在不点击箭头的情况下查看下一张/上一张图片。是否可以通过左右滑动查看图片？是否有识别左右滑动屏幕的控件？

如果你想这样做，我建议你可以使用 CarouselViewControl。您需要通过 nuget 安装 CarouseView.FormsPlugin。您可以点击箭头或向右或向右滑动查看图片

然后添加此引用

<ContentPage
x:Class="Demo1.listviewcontrol.Page3"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cv="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">
<ContentPage.Content>
    <Grid>
        <cv:CarouselViewControl
            x:Name="carousel"
            AnimateTransition="True"
            ItemsSource="{Binding MyItemsSource}"
            Orientation="Horizontal"
            PositionSelected="Handle_PositionSelected"
            PositionSelectedCommand="{Binding MyCommand}"
            Scrolled="Handle_Scrolled"
            ShowArrows="true"
            ShowIndicators="true" />
    </Grid>
</ContentPage.Content>

public partial class Page3 : ContentPage
{
    public Page3 ()
    {
        InitializeComponent ();
        this.BindingContext = new MainViewModel();
    }

    private void Handle_PositionSelected(object sender, CarouselView.FormsPlugin.Abstractions.PositionSelectedEventArgs e)
    {
        Debug.WriteLine("Position " + e.NewValue + " selected.");
    }

    private void Handle_Scrolled(object sender, CarouselView.FormsPlugin.Abstractions.ScrolledEventArgs e)
    {
        Debug.WriteLine("Scrolled to " + e.NewValue + " percent.");
        Debug.WriteLine("Direction = " + e.Direction);
    }
}

public class MainViewModel
{
   public ObservableCollection<View> _myItemsSource;
    public ObservableCollection<View> MyItemsSource
    {
        set
        {
            _myItemsSource = value;               
        }
        get
        {
            return _myItemsSource;
        }
    }

    public Command MyCommand { protected set; get; }
    public MainViewModel()
    {
        MyItemsSource = new ObservableCollection<View>()
        {
            new CachedImage() { Source = "a1.jpg", DownsampleToViewSize = true, Aspect = Aspect.AspectFill },
            new CachedImage() { Source = "c2.jpg", DownsampleToViewSize = true, Aspect = Aspect.AspectFill },
            new CachedImage() { Source = "c3.jpg", DownsampleToViewSize = true, Aspect = Aspect.AspectFill }
        };

        MyCommand = new Command(() =>
        {
            Debug.WriteLine("Position selected.");
        });
    }

}

我使用的是 CacheImage，所以通过 nuget 安装 Xamarin.FFimageLoading.Forms。

请在 Mainactivity OnCreate 方法中添加以下代码

 CarouselViewRenderer.Init();
        CachedImageRenderer.Init(true);

【讨论】：