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

Question

如何使用 C# 在 Xamarin 表单中实现 Instagram 故事？

我找到了这个：

https://github.com/shts/StoriesProgressView

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

Answer 1

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

它目前处于实验阶段，只能通过将以下代码行添加到 iOS 上的 AppDelegate class 或 MainActivity class 在 Android 上调用 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));
        }
    }

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

How to implement instagram stories in Xamarin Forms?

c#

instagram

xamarin.forms

在xaml

在视图模型中