Share via

Sürükle ve bırak hareketini tanıma

  • Makale

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) sürükle ve bırak hareketi tanıyıcısı, öğelerin ve ilişkili veri paketlerinin sürekli hareket kullanılarak bir ekran konumundan başka bir konuma sürüklenmelerini sağlar. Sürükleyip bırakma tek bir uygulamada gerçekleşebileceği gibi, bir uygulamada başlayıp başka bir uygulamada da bitebilir.

Sürükleme hareketinin başlatıldığı öğe olan sürükleme kaynağı, veri paketi nesnesi doldurularak aktarılacak verileri sağlayabilir. Sürükleme kaynağı serbest bırakıldığında bırakma gerçekleşir. Sürükleme kaynağının altındaki öğe olan bırakma hedefi, veri paketini işler.

Bir uygulamada sürükle ve bırak özelliğini etkinleştirme işlemi aşağıdaki gibidir:

  1. Bir öğeye nesne ekleyerek DragGestureRecognizer öğe üzerinde sürüklemeyi GestureRecognizers etkinleştirin. Daha fazla bilgi için bkz . Sürüklemeyi etkinleştirme.
  2. [isteğe bağlı] Veri paketi oluşturma. .NET MAUI, görüntü ve metin denetimleri için veri paketini otomatik olarak doldurur, ancak diğer içerikler için kendi veri paketinizi oluşturmanız gerekir. Daha fazla bilgi için bkz . Veri paketi oluşturma.
  3. Bir öğeyi koleksiyonuna nesne ekleyerek DropGestureRecognizer bırakma özelliğini GestureRecognizers etkinleştirin. Daha fazla bilgi için bkz . Bırakma özelliğini etkinleştirme.
  4. [isteğe bağlı] Bırakma hedefi tarafından DropGestureRecognizer.DragOver izin verilen işlem türünü belirtmek için olayı işleyebilir. Daha fazla bilgi için bkz . DragOver olayını işleme.
  5. [isteğe bağlı] Bırakılan içeriği almak için veri paketini işleyin. .NET MAUI, veri paketinden görüntü ve metin verilerini otomatik olarak alır, ancak diğer içerik için veri paketini işlemeniz gerekir. Daha fazla bilgi için bkz . Veri paketini işleme.

Sürüklemeyi etkinleştir

.NET MAUI'de sürükleme hareketi tanıma sınıfı tarafından DragGestureRecognizer sağlanır. Bu sınıf aşağıdaki özellikleri tanımlar:

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

sınıfı ayrıca DragGestureRecognizer özelliği trueise tetikleyen ve DropCompleted olaylarını CanDrag tanımlarDragStarting. Bir DragGestureRecognizer nesne bir sürükleme hareketi algıladığında öğesini yürütür DragStartingCommand ve olayı çağırır DragStarting . Ardından nesne bırakma hareketinin tamamlanmasını algıladığında DragGestureRecognizer öğesini yürütür DropCompletedCommand ve olayı çağırır DropCompleted .

Olaya DragStartingEventArgs eşlik DragStarting eden nesne aşağıdaki özellikleri tanımlar:

  • Canceltüründe bool, olayın iptal edilip edilmeyeceğini gösterir.
  • Datatüründe DataPackage, sürükleme kaynağına eşlik eden veri paketini gösterir. Bu salt okunur bir özelliktir.
  • PlatformArgstüründe PlatformDragStartingEventArgs?, olayla ilişkili platforma özgü bağımsız değişkenleri temsil eder.

Android'de PlatformDragStartingEventArgs sınıfı aşağıdaki özellikleri tanımlar:

  • Sender, türündeki View, olaya eklenen yerel görünümü temsil eder.
  • MotionEventtüründe MotionEvent, sürükle ve bırak durumu bilgilerini içeren olayı temsil eder.

Ayrıca, Android'de PlatformDragStartingEventArgs sınıfı aşağıdaki yöntemleri tanımlar:

  • SetDragShadowBuilder, sürükleme başladığında kullanılacak şekilde ayarlar View.DragShadowBuilder .
  • SetClipData, öğesini sürükleme başladığında kullanılacak şekilde ayarlar ClipData .
  • SetLocalData, sürükleme başladığında kullanılacak yerel verileri ayarlar.
  • SetDragFlags, sürükleme başladığında kullanılacak şekilde ayarlar DragFlags .

Örneğin, sürüklenen SetClipData öğeyle ilişkilendirmek ClipData için yöntemini kullanın:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
#if ANDROID
    string content = "insert your content here";
    e.PlatformArgs.SetClipData(Android.Content.ClipData.NewPlainText("Drag data", content));
#endif
}

Olaya DropCompletedEventArgs eşlik DropCompleted eden nesne, olayla ilişkili platforma özgü bağımsız değişkenleri temsil eden türünde PlatformDropCompletedEventArgs?bir PlatformArgs özellik tanımlar.

Android'de PlatformDropCompletedEventArgs sınıfı aşağıdaki özellikleri tanımlar:

  • Sender, türündeki View, olaya eklenen yerel görünümü temsil eder.
  • DragEventtüründe DragEvent, sürükle ve bırak işlemi sırasında çeşitli zamanlarda gönderilen olayı temsil eder.

Aşağıdaki XAML örneğinde bir öğesine eklenmiş bir DragGestureRecognizerImagegösterilmektedir:

<Image Source="monkeyface.png">
    <Image.GestureRecognizers>
        <DragGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

Bu örnekte, üzerinde Imagebir sürükleme hareketi başlatılabilir.

İpucu

Sürükleme hareketi, uzun basılarak ve ardından sürüklenerek başlatılır.

Veri paketi oluşturma

.NET MAUI, aşağıdaki denetimler için sürükleme başlatıldığında sizin için otomatik olarak bir veri paketi oluşturur:

Aşağıdaki tabloda, metin denetiminde sürükleme başlatıldığında okunan özellikler ve denenen dönüştürmeler gösterilmektedir:

Denetim Özellik Dönüştürme
CheckBox IsChecked bool öğesine stringdönüştürüldü.
DatePicker Date DateTime öğesine stringdönüştürüldü.
Editor Text
Entry Text
Label Text
RadioButton IsChecked bool öğesine stringdönüştürüldü.
Switch IsToggled bool öğesine stringdönüştürüldü.
TimePicker Time TimeSpan öğesine stringdönüştürüldü.

Metin ve resim dışındaki içerikler için kendiniz bir veri paketi oluşturmanız gerekir.

Veri paketleri, aşağıdaki özellikleri tanımlayan sınıfı tarafından DataPackage temsil edilir:

sınıfı, DataPackagePropertySet olarak Dictionary<string,object>depolanan bir özellik paketini temsil eder. sınıfı hakkında DataPackageView bilgi için bkz . Veri paketini işleme.

Görüntü veya metin verilerini depolama

Görüntü veya metin verileri, veya DataPackage.Text özelliğinde DataPackage.Image depolanarak bir sürükleme kaynağıyla ilişkilendirilebilir. Olay için DragStarting işleyiciye verileri ekleyebilirsiniz.

Aşağıdaki XAML örneği, olay için DragStarting bir işleyici kaydeden bir gösterirDragGestureRecognizer:

<Path Stroke="Black"
      StrokeThickness="4">
    <Path.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Path.GestureRecognizers>
    <Path.Data>
        <!-- PathGeometry goes here -->
    </Path.Data>
</Path>

Bu örnekte, DragGestureRecognizer nesnesine Path eklenir. olay DragStarting işleyicisini yürüten OnDragStarting üzerinde Pathbir sürükleme hareketi algılandığında olay oluşturulur:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    e.Data.Text = "My text data goes here";
}

Olaya DragStartingEventArgs eşlik DragStarting eden nesnenin türünde DataPackagebir Data özelliği vardır. Bu örnekte, nesnesinin TextDataPackage özelliği olarak stringayarlanır. DataPackage Daha sonra, öğesini almak stringiçin bırakma sonrasında öğesine erişilebilir.

Verileri özellik paketinde depolama

Resimler ve metinler de dahil olmak üzere tüm veriler, verileri koleksiyonda DataPackage.Properties depolayarak bir sürükleme kaynağıyla ilişkilendirilebilir. Olay için DragStarting işleyiciye verileri ekleyebilirsiniz.

Aşağıdaki XAML örneği, olay için DragStarting bir işleyici kaydeden bir gösterirDragGestureRecognizer:

<Rectangle Stroke="Red"
           Fill="DarkBlue"
           StrokeThickness="4"
           HeightRequest="200"
           WidthRequest="200">
    <Rectangle.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Rectangle.GestureRecognizers>
</Rectangle>

Bu örnekte, DragGestureRecognizer nesnesine Rectangle eklenir. olay DragStarting işleyicisini yürüten OnDragStarting üzerinde Rectanglebir sürükleme hareketi algılandığında olay oluşturulur:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    Shape shape = (sender as Element).Parent as Shape;
    e.Data.Properties.Add("Square", new Square(shape.Width, shape.Height));
}

Olaya DragStartingEventArgs eşlik DragStarting eden nesnenin türünde DataPackagebir Data özelliği vardır. Properties Bir koleksiyon olan Dictionary<string, object> nesnesinin DataPackage koleksiyonu, gerekli verileri depolamak için değiştirilebilir. Bu örnekte sözlük, Properties "Kare" anahtarıyla boyutunu temsil eden bir Square nesneyi depolamak Rectangle için değiştirilmiştir.

Bırakmayı etkinleştir

.NET MAUI'de bırakma hareketi tanıma sınıfı tarafından DropGestureRecognizer sağlanır. Bu sınıf aşağıdaki özellikleri tanımlar:

  • AllowDrop, türündedir bool. Bu, hareket tanıyıcının bağlı olduğu öğenin bir bırakma hedefi olup olmadığını gösterir. Bu özelliğin varsayılan değeridir true.
  • DragOverCommand, türündedir ICommandve sürükleme kaynağı bırakma hedefinin üzerine sürüklendiğinde yürütülür.
  • DragOverCommandParameter, türündeki objectparametresine DragOverCommandgeçirilir.
  • DragLeaveCommand, türündedir ICommand. Bu, sürükleme kaynağı bırakma hedefinin dışına sürüklendiğinde yürütülür.
  • DragLeaveCommandParameter, türündeki objectparametresine DragLeaveCommandgeçirilir.
  • DropCommand, türündedir ICommandve sürükleme kaynağı bırakma hedefinin üzerine bırakıldığında yürütülür.
  • DropCommandParameter, türündeki objectparametresine DropCommandgeçirilir.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

sınıfı, DropGestureRecognizer özelliği trueise tetikleyen , DragLeaveve Drop olaylarını AllowDrop da tanımlarDragOver. bir DropGestureRecognizer , bırakma hedefinin üzerindeki bir sürükleme kaynağını tanıdığında öğesini yürütür DragOverCommand ve olayı çağırır DragOver . Ardından, sürükleme kaynağı bırakma hedefinin dışına sürüklenirse DropGestureRecognizer , öğesini yürütür DragLeaveCommand ve olayı çağırır DragLeave . Son olarak, bırakma hedefi üzerinde bir bırakma hareketi algıladığında DropGestureRecognizer , öğesini yürütür DropCommand ve olayı çağırır Drop .

DragEventArgs ve DragLeave olaylarına DragOver eşlik eden sınıfı aşağıdaki özellikleri tanımlar:

  • Data, türündedir DataPackage. Bu, sürükleme kaynağıyla ilişkili verileri içerir. Bu özellik salt okunur durumdadır.
  • AcceptedOperation, türüne DataPackageOperationgöre, bırakma hedefi tarafından izin verilen işlemleri belirtir.
  • PlatformArgstüründe PlatformDragEventArgs?, olayla ilişkili platforma özgü bağımsız değişkenleri temsil eder.

Android'de PlatformDragEventArgs sınıfı aşağıdaki özellikleri tanımlar:

  • Sender, türündeki View, olaya eklenen yerel görünümü temsil eder.
  • DragEventtüründe DragEvent, sürükle ve bırak işlemi sırasında çeşitli zamanlarda gönderilen olayı temsil eder.

Numaralandırma hakkında DataPackageOperation bilgi için bkz . DragOver olayını işleme.

Olaya DropEventArgs eşlik Drop eden sınıf aşağıdaki özellikleri tanımlar:

  • Data, veri paketinin salt okunur bir sürümü olan türündedir DataPackageView.
  • Handledtüründe bool, olay işleyicisinin olayı işleyip işlemediğini veya .NET MAUI'nin kendi işlemeye devam edip etmeyeceğini gösterir.
  • PlatformArgstüründe PlatformDropEventArgs?, olayla ilişkili platforma özgü bağımsız değişkenleri temsil eder.

Android'de PlatformDropEventArgs sınıfı aşağıdaki özellikleri tanımlar:

  • Sender, türündeki View, olaya eklenen yerel görünümü temsil eder.
  • DragEventtüründe DragEvent, sürükle ve bırak işlemi sırasında çeşitli zamanlarda gönderilen olayı temsil eder.

Aşağıdaki XAML örneğinde bir öğesine eklenmiş bir DropGestureRecognizerImagegösterilmektedir:

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

Bu örnekte, sürükleme kaynağı bırakma hedefine Image bırakıldığında, sürükleme kaynağı bir ImageSourceise, sürükleme kaynağı bırakma hedefine kopyalanır. .NET MAUI, sürüklenen görüntüleri ve metinleri uyumlu bırakma hedeflerine otomatik olarak kopyalar.

DragOver olayını işleme

Olay DropGestureRecognizer.DragOver isteğe bağlı olarak, bırakma hedefi tarafından izin verilen işlem türlerini belirtmek için işlenebilir. olaya eşlik DragOver eden nesnede DragEventArgs türündeki DataPackageOperationözelliğini ayarlayarak AcceptedOperation izin verilebilen işlemleri belirtebilirsiniz.

Numaralandırma DataPackageOperation aşağıdaki üyeleri tanımlar:

  • None, hiçbir eylemin gerçekleştirilmeyecek olduğunu gösterir.
  • Copy, sürükleme kaynağı içeriğinin bırakma hedefine kopyalandığını gösterir.

Önemli

Bir DragEventArgs nesne oluşturulduğunda, AcceptedOperation özelliği varsayılan olarak olarak DataPackageOperation.Copyayarlanır.

Aşağıdaki XAML örneği, olay için DragOver bir işleyici kaydeden bir gösterirDropGestureRecognizer:

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer DragOver="OnDragOver" />
    </Image.GestureRecognizers>
</Image>

Bu örnekte, DropGestureRecognizer nesnesine Image eklenir. Bir DragOver sürükleme kaynağı bırakma hedefinin üzerine sürüklendiğinde, ancak bırakılmadığında olay işleyicisini OnDragOver yürüten olay oluşturulur:

void OnDragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.None;
}

Bu örnekte, nesnesinin AcceptedOperationDragEventArgs özelliği olarak DataPackageOperation.Noneayarlanır. Bu değer, bir sürükleme kaynağı bırakma hedefinin üzerine bırakıldığında hiçbir işlem yapılmamasını sağlar.

Veri paketini işleme

Bir Drop sürükleme kaynağı bırakma hedefi üzerinden serbest bırakıldığında olay tetikleniyor. Bir sürükleme kaynağı aşağıdaki denetimlere bırakıldığında .NET MAUI otomatik olarak veri paketinden veri almaya çalışır:

Aşağıdaki tabloda ayarlanan özellikler ve metin tabanlı bir sürükleme kaynağı bir metin denetimine bırakıldığında denenen dönüştürmeler gösterilmektedir:

Denetim Özellik Dönüştürme
CheckBox IsChecked string , öğesine booldönüştürülür.
DatePicker Date string , öğesine DateTimedönüştürülür.
Editor Text
Entry Text
Label Text
RadioButton IsChecked string , öğesine booldönüştürülür.
Switch IsToggled string , öğesine booldönüştürülür.
TimePicker Time string , öğesine TimeSpandönüştürülür.

Metin ve resim dışındaki içerikler için veri paketini kendiniz işlemeniz gerekir.

DropEventArgs Olaya eşlik Drop eden sınıf türünde DataPackageViewbir Data özellik tanımlar. Bu özellik, veri paketinin salt okunur bir sürümünü temsil eder.

Resim veya metin verilerini alma

Görüntü veya metin verileri, sınıfında tanımlanan yöntemler kullanılarak olay işleyicisindeki Drop bir veri paketinden DataPackageView alınabilir.

DataPackageView sınıfı ve GetTextAsync yöntemlerini içerirGetImageAsync. yöntemi, GetImageAsync özelliğinde DataPackage.Image depolanan veri paketinden bir görüntü alır ve döndürür Task<ImageSource>. Benzer şekilde, GetTextAsync yöntemi özelliğinde DataPackage.Text depolanan veri paketinden metin alır ve döndürür Task<string>.

Aşağıdaki örnekte, bir Drop için veri paketinden metin alan bir olay işleyicisi gösterilmektedir Path:

async void OnDrop(object sender, DropEventArgs e)
{
    string text = await e.Data.GetTextAsync();

    // Perform logic to take action based on the text value.
}

Bu örnekte, metin verileri yöntemi kullanılarak GetTextAsync veri paketinden alınır. Daha sonra metin değerini temel alan bir eylem yapılabilir.

Özellik paketinden veri alma

Herhangi bir veri paketi koleksiyonuna erişerek Properties olay işleyicisindeki Drop bir veri paketinden alınabilir.

DataPackageView sınıfı türünde DataPackagePropertySetViewbir Properties özellik tanımlar. sınıfı, DataPackagePropertySetView olarak Dictionary<string, object>depolanan salt okunur özellik paketini temsil eder.

Aşağıdaki örnekte, bir Drop veri paketinin özellik paketinden veri alan bir Rectangleolay işleyicisi gösterilmektedir:

void OnDrop(object sender, DropEventArgs e)
{
    Square square = (Square)e.Data.Properties["Square"];

    // Perform logic to take action based on retrieved value.
}

Bu örnekte, Square nesnesi veri paketinin özellik paketinden "Kare" sözlük anahtarı belirtilerek alınır. Daha sonra alınan değeri temel alan bir eylem yapılabilir.

Hareket konumunu alma

Sürükle veya bırak hareketinin gerçekleştiği konum, bir DragEventArgs, DragStartingEventArgsveya DropEventArgs nesnesinde GetPosition yöntemi çağrılarak elde edilebilir. GetPosition yöntemi bir Element? bağımsız değişken kabul eder ve nesne olarak bir Point? konum döndürür:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    // Position relative to screen
    Point? screenPosition = e.GetPosition(null);

    // Position relative to specified element
    Point? relativeToImagePosition = e.GetPosition(image);
}

Element? bağımsız değişkeni, konumun göreli olarak alınması gereken öğeyi tanımlar. Bu bağımsız değişken olarak bir null değer sağlamak, yöntemin GetPosition ekrana göre sürükleme veya bırakma hareketinin konumunu tanımlayan bir Point? nesne döndürdüğü anlamına gelir.