有两个列表视图,其中一个已分组,另一个未分组。我必须将项目从一个列表中拖放到另一个列表中。拖放应该是视觉上的,就像在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>