如何在 Xamarin Forms 中实现 instagram 故事？

Question

如何在 Xamarin.forms 和 C# 中实施 Instagram 快拍？

我发现了这个：

https://github.com/shts/StoriesProgressView

但它与 Java 一起使用，仅适用于 Android

Answer 1

在您的情况下，您可以使用CarouselView来显示图像集合。 它提供了一个可滚动的布局，用户可以在其中滑动以在项目集合中移动。

它目前是实验性的，只能通过将以下代码行添加到 iOS 上的AppDelegate class 或 Android 上的MainActivity class 中，然后再调用Forms.Init 来使用：

Forms.SetFlags("CarouselView_Experimental");

在 xaml

<StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <CarouselView x:Name="carousel" IsSwipeEnabled="False" Position="{Binding Index}" ItemsSource="{Binding MySource}">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" />
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                        // I set BackgroundColor here just for demo and you need to set the Source of the Image
                        <Image BackgroundColor="{Binding .}" WidthRequest="400" HeightRequest="500" Aspect="AspectFit"  />

                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>

在视图模型中

public MainViewModel()
        {
            MySource = new ObservableCollection<Color>() {Color.LightBlue,Color.Red,Color.Yellow };

            Device.StartTimer(TimeSpan.FromSeconds(5),()=> {


                if(index<MySource.Count-1)
                {
                    Index++;
                }
                else
                {
                    Index = 0;
                }

                return true;
            
            });

        }
       

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }