如何使用 Listview 以编程方式最初显示 Swipeview？

Question

在我的 Xamarin Forms 项目中，我有一个列表视图。在该列表视图中，我使用滑动视图在滑动项目时显示选项。由于用户不知道他们需要滑动某个项目才能查看选项，因此我需要显示列表视图的第一个项目以自动滑动，显示选项几秒钟，并在页面打开时自动关闭。如何将其应用到列表视图项？请提出解决方案。

代码：

<ListView>   
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <SwipeView>
                <SwipeView.RightItems>
                    <SwipeItems>
                        <SwipeItemView>
                            <StackLayout
                                Orientation="Horizontal"
                                WidthRequest="150">
                                <Image 
                                    Source="ic_delete_orange_xx.png">
                                </Image>
                            </StackLayout>                                    
                        </SwipeItemView>
                    </SwipeItems>
                </SwipeView.RightItems>
                <!-- Listview Content -->                                
            </SwipeView>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>
</ListView>

Answer 1

您可以创建一个CollectionView并将SwipeView放入其中。

这是示例：

<CollectionView ItemsSource="{Binding MyItems}">
         <CollectionView.ItemTemplate>
                 <DataTemplate>
                        <SwipeView>
                            <SwipeView.RightItems>
                                <SwipeItems>
                                    <SwipeItem Text="Click here" BackgroundColor="Green" Invoked="SwipeItem_Invoked" />
                                </SwipeItems>
                            </SwipeView.RightItems>

                            //You can put the data you want to show in the layout.
                            <StackLayout>
                                <Label BackgroundColor="White" Text="{Binding .}" FontSize="Title" Padding="30,10,30,10"/>
                            </StackLayout>
                        </SwipeView>
                 </DataTemplate>
         </CollectionView.ItemTemplate>
  </CollectionView>

给定一个名为 swipeView 的 SwipeView，以下示例演示如何打开 SwipeView 以显示 LeftItems 集合中的滑动项：

swipeView.Open(OpenSwipeItem.LeftItems);

Answer 2

我在这里分享一个解决方法。由于您无法访问模板中的控件，因此可以使用Xamarin.Forms Bindable Properties。我在下面写了一个demo，你可以看看。

首先，我定义一个自定义控件，我们将其称为CustomSwipeView，它继承了SwipeView。在 CustomSwipeView 中，我们定义了一个 BindableProperty OpenFlag 来控制 swipeView 的状态（打开或关闭）。

public class CustomSwipeView : SwipeView
{
    public static readonly BindableProperty OpenFlagProperty =
BindableProperty.Create("OpenFlag", typeof(bool), typeof(CustomSwipeView), null, propertyChanged:OnPropertyChanged);

    private static void OnPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var flag = (bool)newValue;
        SwipeView m = bindable as SwipeView;
        
        if(m != null)
        {
            if (flag)
            {
                m.Open(OpenSwipeItem.RightItems);
            }
            else
            {
                m.Close();
            }
        }
    }

    public bool OpenFlag
    {
        get { return (bool)GetValue(OpenFlagProperty); }
        set { SetValue(OpenFlagProperty, value); }
    }
}

这是使用自定义 SwipeView 的 xaml 文件：

<ListView ItemsSource="{Binding ItemCollection}" x:Name="mylist">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <local:CustomSwipeView x:Name="myview" OpenFlag="{Binding OpenFlag}" >
                <SwipeView.RightItems>
                ...
                </SwipeView.RightItems>
            ...
            </local:CustomSwipeView>

在ViewModel中，我们为ListView的ItemsSource定义数据集合。

public ObservableCollection<Item> ItemCollection { get; set; } = new ObservableCollection<Item>();

这适用于模型项目类别：

public class Item : INotifyPropertyChanged
{

    private bool openFlag;
    public bool OpenFlag
    {
        get
        {
            return openFlag;

        }

        set
        {
            openFlag = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(OpenFlag)));
        }

    }
    public string MyTitle { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
}

在后面的代码中，我定义了一个计时器。一秒钟后，第一个项目的 swipeView 将关闭。

public partial class MainPage : ContentPage
{
    MainPageViewModel viewModel;
    public MainPage()
    {
        InitializeComponent();
        viewModel = new MainPageViewModel();
        BindingContext = viewModel;    
    }

    protected override async void OnAppearing()
    { 
        base.OnAppearing();
        await Task.Delay(10); // delay some time to let it initially open
        viewModel.ItemCollection[0].OpenFlag = true;
        Device.StartTimer(TimeSpan.FromSeconds(1), TimerElapsed) ;
    }

    private bool TimerElapsed()
    {
        viewModel.ItemCollection[0].OpenFlag = false;
        return false;
    }
}

希望它有效！如果您有任何疑问，请随时问我。

Answer 3

小补充。在我看来，这是一种非常有用的技术，可以向用户展示应用程序的非显而易见的功能。

您可能会遇到以下错误CS0618

更换

Device.StartTimer(TimeSpan.FromSeconds(1), TimerElapsed) ;

与

IDispatcherTimer timer;
timer = Dispatcher.CreateTimer();
timer.Interval = TimeSpan.FromSeconds(1);
timer.Tick += (sender, e) => TimerElapsed();
timer.Start();