如何在两个ListView控件之间拖放项目?

时间:2019-08-05 17:38:01

标签: xamarin.forms touch

有两个列表视图,其中一个已分组,另一个未分组。我必须将项目从一个列表中拖放到另一个列表中。拖放应该是视觉上的,就像在UI上实际看到项目一样。经过一番搜索,我找到了本教程TouchTrackingEffect Demos,并认为可以将相同的逻辑应用于Listview控件。我已经设法设法将触摸效果应用于ListView,并且它触发了诸如按下,移动和释放之类的事件。我还设法将项目添加到分组的listview中。但是,它没有在屏幕上显示拖放。我以为我做错了什么,但是我对Xamarin还是陌生的,所以请尽我最大的努力使其正常工作。随附的图像显示UI,2显示启动屏幕,3显示“已移动”效果中的X和Y坐标,4显示在分组的ListView中添加了“新单词”在发布事件上。下面是代码,如果有人可以在这方面帮助我,我将不胜感激。

Page2Grid.Xaml.cs

 using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using TouchTrackingEffect.Models;
    using System.Collections.ObjectModel;

    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    using TouchTracking;
    using SkiaSharp;
    using SkiaSharp.Views.Forms;
    namespace TouchTrackingEffect
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class Page2Grid : ContentPage
        {

            //public ObservableCollection<GroupedStructureModel> grouped { get; set; }

            ObservableCollection<GroupedStructureModel> grouped = new ObservableCollection<GroupedStructureModel>();
            public ObservableCollection<GroupedStructureModel> grouped1 { get { return grouped; } }

            // Drag and Drop Class
            class DragInfo
            {
                public DragInfo(long id, Point pressPoint, AbsoluteLayout absoluteLayout)
                {
                    Id = id;
                    PressPoint = pressPoint;
                    absoluteLayoutID = absoluteLayout;
                }

                public long Id { private set; get; }

                public AbsoluteLayout absoluteLayoutID { set; get; }

                public Point PressPoint { private set; get; }

            }

            // dictionary for ListViews
            Dictionary<ListView, DragInfo> lstStructDragDictionary = new Dictionary<ListView, DragInfo>();

            Dictionary<ListView, DragInfo> lstWordsDragDictionary = new Dictionary<ListView, DragInfo>();


            Random random = new Random();


            public Page2Grid()
            {
                InitializeComponent();
                populateRhymeListView();


                // adding effects to ListViews
                // Main List
                TouchEffect touchEffect1 = new TouchEffect();
                touchEffect1.TouchAction += OnTouchEffectAction;
                lstViewMain.Effects.Add(touchEffect1);

                // Word List
                TouchEffect touchEffect2 = new TouchEffect();
                touchEffect2.TouchAction += OnTouchEffectAction;
                lstViewWords.Effects.Add(touchEffect2);
            }


            void OnTouchEffectAction(object sender, TouchActionEventArgs args)
            {
                lstViewWords = sender as ListView;
                switch (args.Type)
                {
                    case TouchActionType.Pressed:
                        // don't allow a second touch on an already touched boxview
                        if (!lstWordsDragDictionary.ContainsKey(lstViewWords))
                        {
                            lstWordsDragDictionary.Add(lstViewWords, new DragInfo(args.Id, args.Location, absLayout));

                            // set capture property to true
                            TouchEffect toucheffect = (TouchEffect)lstViewWords.Effects.FirstOrDefault(e => e is TouchEffect);
                            toucheffect.Capture = true; 
                        }
                        break;

                    case TouchActionType.Moved:
                        if (lstWordsDragDictionary.ContainsKey(lstViewWords) && lstWordsDragDictionary[lstViewWords].Id == args.Id)
                        {

                            //lstViewMain.TranslateTo
                            headerLbl.Text = " listWords is moved";

                            Rectangle rect = AbsoluteLayout.GetLayoutBounds(lstViewWords);
                            Point initialLocation = lstWordsDragDictionary[lstViewWords].PressPoint;
                            rect.X += args.Location.X - initialLocation.X;
                            rect.Y += args.Location.Y - initialLocation.Y;
                            AbsoluteLayout.SetLayoutBounds(lstViewWords, rect);
                            headerLbl.Text = "X = " + args.Location.X + " Y = " + args.Location.Y;  
                        }
                        break;

                    case TouchActionType.Released:
                        if (lstWordsDragDictionary.ContainsKey(lstViewWords) && lstWordsDragDictionary[lstViewWords].Id == args.Id)
                        {

                            grouped1.FirstOrDefault().Add(new StructureModel { word = "New Word" }); 
                        }
                        break;
                }
            }

            // Create a Grouped ListView from a Rhyme Description
            void populateRhymeListView()
            {
                // defining two lines
                GroupedStructureModel list1Group = new GroupedStructureModel() { LongName = "Line1" };
                GroupedStructureModel list2Group = new GroupedStructureModel() { LongName = "Line2" };
                // words for List 1
                //List<WordList> wordLst1 = new List<WordList>();
                list1Group.Add(new StructureModel { word = "first"});
                // words for List 
                list2Group.Add(new StructureModel { word = "second1" });  
                grouped1.Add(list1Group);
                grouped1.Add(list2Group);
                // binding list itemsource
                lstViewMain.ItemsSource = grouped1;
            }

            async void BtnNext_Clicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new Page3());
            }


        }
    }

**** Page2Grid.Xaml ****

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="TouchTrackingEffect.Page2Grid">
<ContentPage.Content>
<AbsoluteLayout x:Name="absLayout">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<Grid x:Name="gridLayout">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label x:Name="headerLbl" Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand" 
HorizontalOptions="CenterAndExpand" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button x:Name="btnNext" Grid.Row="0" Grid.Column="2" Text="Next" Clicked="BtnNext_Clicked"></Button>
<!--Main ListView containing structure -->
<ListView x:Name ="lstViewMain" Grid.Row="1" Grid.Column="0" IsGroupingEnabled="true" GroupDisplayBinding="{Binding LongName}" WidthRequest="200" BackgroundColor="Azure">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label x:Name="lblItem" Text="{Binding word}"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--2nd Column-->
<BoxView x:Name="test" Grid.Row="1" Grid.Column="1"></BoxView>
<!-- Word List Views-->
<ListView x:Name="lstViewWords" Grid.Row="1" Grid.Column="2" BackgroundColor="AliceBlue">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</Grid>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>

0 个答案:

没有答案