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

【问题标题】：How to implement instagram stories in Xamarin Forms?如何在 Xamarin Forms 中实现 instagram 故事？
【发布时间】：2020-10-08 09:46:53
【问题描述】：

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

我找到了这个：

https://github.com/shts/StoriesProgressView

但它适用于 Java，并且仅适用于 Android

【问题讨论】：

您将不得不像您在链接中提到的那样进行自定义实现。对于 Xamarin 表单，我不知道有一个库可以实现这一点，因此您可以将其导入您的项目中。
@MihaiBC 如何进行自定义实现？
这个问题的答案取决于您的项目的结构，但基本上，您必须自己创建视图以及它背后的逻辑，包括进度条、动画和其他一切。我知道这也是一个通用的答案，但考虑到您提供的信息量，我只能想出。
@MihaiBC 我确实想为我的应用用户实现 instagram 故事。我的应用与 instagram 完全一样。我已经实现了提要并像 instagram 一样探索，但我不知道如何实现故事
您可以在表单中使用轮播页面。然后用图像集合填充它。检查docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…

标签： c# xamarin.forms instagram

【解决方案1】：

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

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

Forms.SetFlags("CarouselView_Experimental");

在xml中

<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));
        }
    }

【讨论】：