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

Question

我的应用程序中有一个照片库。如果我 select 一张照片，selected 照片会显示在另一页上，并带有向右和向左箭头。当点击向左箭头时，相册的上一张图片会出现在屏幕上，如果点击向右箭头，相册中的下一张图片就会出现在屏幕上。

截图

我需要在不点击箭头的情况下查看 next/previous 图片。是否可以通过向右或向左滑动来查看图片？是否有识别 right/left 屏幕滑动的控件？

Answer 1

CarouselView 等你来！！

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

Technical note: Enable the CollectionView (which also enables the CarouselView) with a feature flag just before you initialize Xamarin.Forms in your MainActivity.cs and AppDelegate:

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

Answer 2

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

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

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

Answer 3

I need to view the next/previous pictures without arrow tapping. Is it possible to view the pictures by right or left swiping? Is there any controls for recognizing the right/left screen swiping?

如果你想这样做，我建议你可以使用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);

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

Xamarin Forms: Is it possible to view the pictures by right or left flip?

swipe

xamarin.forms