Útmutató: A húzd és ejtsd funkció engedélyezése a felhasználói vezérlőben

Ez az útmutató bemutatja, hogyan hozhat létre egyéni felhasználói vezérlőt, amely részt vehet a húzással végzett adatátvitelben a Windows Presentation Foundationben (WPF).

Ebben az áttekintésben létrehoz egy egyedi WPF UserControl-t, amely egy kör alakzatot jelöl. A vezérlő funkcióit a húzással történő adatátvitel engedélyezéséhez fogja implementálni. Ha például az egyik Kör vezérlőelemről a másikra húz, a kitöltőszín adatai a forráskörből a célba lesznek másolva. Ha egy Kör vezérlőelemről egy TextBox-ra húz valamit, akkor a kitöltőszín sztringreprezentációja át lesz másolva a TextBox-re. Emellett létre fog hozni egy kis alkalmazást is, amely két panelvezérlőt és egy TextBox tartalmaz a húzás és ejtés funkció teszteléséhez. Olyan kódot fog írni, amely lehetővé teszi a panelek számára az elhagyott köradatok feldolgozását, így áthelyezheti vagy másolhatja a köröket az egyik panel gyermek gyűjteményéből a másikba.

Ez az útmutató a következő feladatokat mutatja be:

Egyéni felhasználói vezérlő létrehozása.
Engedélyezze a felhasználói vezérlő húzási forrásként való használatát.
Engedélyezze, hogy a felhasználói vezérlő mint célhely működjön.
Engedélyezze a panelnek, hogy fogadja a felhasználói vezérlő által eldobott adatokat.

Előfeltételek

Az útmutató elvégzéséhez a Visual Studióra van szüksége.

Az alkalmazásprojekt létrehozása

Ebben a szakaszban az alkalmazásinfrastruktúra jön létre, amely egy két panelt tartalmazó főoldalt és egy TextBoxtartalmaz.

Hozzon létre egy új WPF-alkalmazásprojektet DragDropExamplenevű Visual Basic vagy Visual C# nyelven. További információ: Útmutató: Az első asztali WPF-alkalmazásom.
Nyissa meg a MainWindow.xaml fájlt.

Adja hozzá a következő jelölést a nyitó és a záró Grid címkék között.

Ez a korrektúra létrehozza a tesztalkalmazás felhasználói felületét.

<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0"
            Background="Beige">
    <TextBox Width="Auto" Margin="2"
             Text="green"/>
</StackPanel>
<StackPanel Grid.Column="1"
            Background="Bisque">
</StackPanel>

Új felhasználói vezérlő hozzáadása a projekthez

Ebben a szakaszban egy új felhasználói vezérlőt fog hozzáadni a projekthez.

A Project menüben válassza a Felhasználói vezérlő hozzáadásalehetőséget.
Az Új elem hozzáadása párbeszédpanelen módosítsa a nevet Circle.xaml, és kattintson a Hozzáadásgombra.

A Circle.xaml és a mögöttes kód hozzáadódik a projekthez.
Nyissa meg a Circle.xaml fájlt.

Ez a fájl tartalmazza a felhasználói vezérlő felhasználói felületének elemeit.
Adja hozzá a következő jelölést a root Grid-hoz, hogy egy egyszerű felhasználói vezérlőt hozzon létre, amelynek felülete egy kék kör.
```
<Ellipse x:Name="circleUI" 
         Height="100" Width="100"
         Fill="Blue" />
```
Nyissa meg Circle.xaml.cs vagy Circle.xaml.vb.
A C#-ban adja hozzá a következő kódot a paraméter nélküli konstruktor után egy példánykonstruktor létrehozásához. A Visual Basicben adja hozzá a következő kódot egy paraméter nélküli konstruktor és egy példánykonstruktor létrehozásához.

A felhasználói vezérlő másolásának engedélyezéséhez egy másolási konstruktormetódust kell hozzáadnia a kód mögötti fájlhoz. Az egyszerűsített Kör felhasználói vezérlőben csak a kitöltést és a felhasználói vezérlő méretét másolja ki.
```
public Circle(Circle c)
{
    InitializeComponent();
    this.circleUI.Height = c.circleUI.Height;
    this.circleUI.Width = c.circleUI.Height;
    this.circleUI.Fill = c.circleUI.Fill;
}
```
```
Public Sub New()
    ' This call is required by the designer.
    InitializeComponent()
End Sub

Public Sub New(ByVal c As Circle)
    InitializeComponent()
    Me.circleUI.Height = c.circleUI.Height
    Me.circleUI.Width = c.circleUI.Height
    Me.circleUI.Fill = c.circleUI.Fill
End Sub
```

Felhasználói vezérlő hozzáadása a főablakhoz

Nyissa meg a MainWindow.xaml fájlt.
Adja hozzá a következő XAML-t a nyitó Window címkéhez, és hozzon létre egy XML-névtérhivatkozást az aktuális alkalmazáshoz.
```
xmlns:local="clr-namespace:DragDropExample"
```

Az első StackPanel-ben adja hozzá a következő XAML-t, hogy létrehozza a Circle felhasználói vezérlő két példányát az első panelen.

<local:Circle Margin="2" />
<local:Circle Margin="2" />

A panel teljes XAML-je így néz ki.

<StackPanel Grid.Column="0"
            Background="Beige">
    <TextBox Width="Auto" Margin="2"
             Text="green"/>
    <local:Circle Margin="2" />
    <local:Circle Margin="2" />
</StackPanel>
<StackPanel Grid.Column="1"
            Background="Bisque">
</StackPanel>

Húzásforrás események implementálása a felhasználói vezérlőben

Ebben a szakaszban felülbírálja a OnMouseMove metódust, és elindítja a húzás és ejtés műveletet.

Ha elindít egy húzást (lenyomja az egérgombot és az egeret mozgatja), akkor az adatokat csomagolja egy DataObject-ba. Ebben az esetben a Kör vezérlőelem három adatelemet fog csomagolni; a kitöltés színének sztringes ábrázolása, a magasságának kettős ábrázolása, és egy másolata önmagáról.

Húzás és ejtés művelet kezdeményezése

Nyissa meg Circle.xaml.cs vagy Circle.xaml.vb.

Adja hozzá a következő OnMouseMove felülbírálást, hogy osztálykezelést biztosítson az MouseMove eseményhez.

protected override void OnMouseMove(MouseEventArgs e)
{
    base.OnMouseMove(e);
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        // Package the data.
        DataObject data = new DataObject();
        data.SetData(DataFormats.StringFormat, circleUI.Fill.ToString());
        data.SetData("Double", circleUI.Height);
        data.SetData("Object", this);

        // Initiate the drag-and-drop operation.
        DragDrop.DoDragDrop(this, data, DragDropEffects.Copy | DragDropEffects.Move);
    }
}

Protected Overrides Sub OnMouseMove(ByVal e As System.Windows.Input.MouseEventArgs)
    MyBase.OnMouseMove(e)
    If e.LeftButton = MouseButtonState.Pressed Then
        ' Package the data.
        Dim data As New DataObject
        data.SetData(DataFormats.StringFormat, circleUI.Fill.ToString())
        data.SetData("Double", circleUI.Height)
        data.SetData("Object", Me)

        ' Inititate the drag-and-drop operation.
        DragDrop.DoDragDrop(Me, data, DragDropEffects.Copy Or DragDropEffects.Move)
    End If
End Sub

Ez a OnMouseMove felülbírálás a következő feladatokat hajtja végre:

Ellenőrzi, hogy a bal egérgomb lenyomva van-e az egér mozgása közben.
A Circle-adatokat becsomagolja a DataObjectcsomagba. Ebben az esetben a Kör vezérlő három adatelemet tartalmaz; a kitöltés színének sztringes ábrázolása, a magasságának kettős ábrázolása, és egy másolata önmagáról.
Meghívja a statikus DragDrop.DoDragDrop függvényt a húzás és ejtés művelet elindításához. A következő három paramétert adja át a DoDragDrop metódusnak:
- dragSource – Hivatkozás erre a vezérlőre.
- data – Az előző kódban létrehozott DataObject.
- allowedEffects – Az engedélyezett húzás és ejtés műveletek, amelyek Copy vagy Move.

Az alkalmazás létrehozásához és futtatásához nyomja le F5.
Kattintson az egyik Kör vezérlőre, és húzza át a panelek fölött, a másik Kör vezérlő fölött és a TextBoxfölött. A TextBoxhúzásakor a kurzor az áthelyezés jelzésére változik.
Húzza a kört a TextBoxfelett, miközben nyomja le a Ctrl billentyűt. Figyelje meg, hogyan változik a kurzor a másolat jelzésére.
Húzzon és helyezzen el egy kört a TextBox-ra. A kör kitöltési színének szöveges ábrázolása hozzáfűzve van a TextBox-hoz.

Alapértelmezés szerint a kurzor egy húzási művelet során megváltozik, hogy jelezze, milyen hatással lesz az adatok elvetése. A felhasználónak küldött visszajelzést testre szabhatja a GiveFeedback esemény kezelésével és egy másik kurzor beállításával.

Visszajelzés küldése a felhasználónak

Nyissa meg Circle.xaml.cs vagy Circle.xaml.vb.

Adja hozzá a következő OnGiveFeedback felülbírálást, hogy osztálykezelést biztosítson az GiveFeedback eseményhez.

protected override void OnGiveFeedback(GiveFeedbackEventArgs e)
{
    base.OnGiveFeedback(e);
    // These Effects values are set in the drop target's
    // DragOver event handler.
    if (e.Effects.HasFlag(DragDropEffects.Copy))
    {
        Mouse.SetCursor(Cursors.Cross);
    }
    else if (e.Effects.HasFlag(DragDropEffects.Move))
    {
        Mouse.SetCursor(Cursors.Pen);
    }
    else
    {
        Mouse.SetCursor(Cursors.No);
    }
    e.Handled = true;
}

Protected Overrides Sub OnGiveFeedback(ByVal e As System.Windows.GiveFeedbackEventArgs)
    MyBase.OnGiveFeedback(e)
    ' These Effects values are set in the drop target's
    ' DragOver event handler.
    If e.Effects.HasFlag(DragDropEffects.Copy) Then
        Mouse.SetCursor(Cursors.Cross)
    ElseIf e.Effects.HasFlag(DragDropEffects.Move) Then
        Mouse.SetCursor(Cursors.Pen)
    Else
        Mouse.SetCursor(Cursors.No)
    End If
    e.Handled = True
End Sub

Ez a OnGiveFeedback felülbírálás a következő feladatokat hajtja végre:

Az elejtési célpont Effects eseménykezelőjében beállított DragOver értékeket ellenőrzi.
Egyéni kurzort állít be a Effects érték alapján. A kurzor vizuális visszajelzést ad a felhasználónak arról, hogy milyen hatással lesz az adatok elvetése.

Az alkalmazás létrehozásához és futtatásához nyomja le F5.
Húzza az egyik Kör vezérlőt a Panelek fölé, a másik Kört és a TextBoxfölé is. Figyelje meg, hogy a kurzorok most azok az egyéni kurzorok, amelyeket a OnGiveFeedback felülírásban megadott.
Jelölje ki a green szöveget a TextBoxközül.
Húzza a green szöveget egy Kör vezérlőelemre. Figyelje meg, hogy az alapértelmezett kurzorok a húzási művelet hatásait jelzik. A visszajelzési kurzort mindig a húzási forrás állítja be.

Leejtési célpont események implementálása a felhasználói vezérlőben

Ebben a szakaszban meg kell adnia, hogy a felhasználói vezérlőelem egy dobási célpont, felül kell bírálnia azokat a metódusokat, amelyek lehetővé teszik, hogy a felhasználói vezérlőelem dobási célpontként működjön, és feldolgozzuk a rajta elvetett adatokat.

Annak engedélyezése, hogy a felhasználói vezérlő ejtési cél legyen

Nyissa meg a Circle.xaml fájlt.

A UserControl nyitó címkében adja hozzá a AllowDrop tulajdonságot, és állítsa azt true-re.

<UserControl x:Class="DragDropWalkthrough.Circle"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             AllowDrop="True">

A OnDrop metódus akkor kerül meghívásra, amikor a AllowDrop tulajdonság true-re van állítva, és a húzási forrás adatai a Circle felhasználói vezérlőre kerülnek. Ebben a módszerben feldolgozzuk az elvetett adatokat, és az adatokat a Körre fogjuk alkalmazni.

Az elvetett adatok feldolgozása

Nyissa meg Circle.xaml.cs vagy Circle.xaml.vb.

Adja hozzá a következő OnDrop felülbírálást, hogy osztálykezelést biztosítson az Drop eseményhez.

protected override void OnDrop(DragEventArgs e)
{
    base.OnDrop(e);

    // If the DataObject contains string data, extract it.
    if (e.Data.GetDataPresent(DataFormats.StringFormat))
    {
        string dataString = (string)e.Data.GetData(DataFormats.StringFormat);

        // If the string can be converted into a Brush,
        // convert it and apply it to the ellipse.
        BrushConverter converter = new BrushConverter();
        if (converter.IsValid(dataString))
        {
            Brush newFill = (Brush)converter.ConvertFromString(dataString);
            circleUI.Fill = newFill;

            // Set Effects to notify the drag source what effect
            // the drag-and-drop operation had.
            // (Copy if CTRL is pressed; otherwise, move.)
            if (e.KeyStates.HasFlag(DragDropKeyStates.ControlKey))
            {
                e.Effects = DragDropEffects.Copy;
            }
            else
            {
                e.Effects = DragDropEffects.Move;
            }
        }
    }
    e.Handled = true;
}

Protected Overrides Sub OnDrop(ByVal e As System.Windows.DragEventArgs)
    MyBase.OnDrop(e)
    ' If the DataObject contains string data, extract it.
    If e.Data.GetDataPresent(DataFormats.StringFormat) Then
        Dim dataString As String = e.Data.GetData(DataFormats.StringFormat)

        ' If the string can be converted into a Brush, 
        ' convert it and apply it to the ellipse.
        Dim converter As New BrushConverter
        If converter.IsValid(dataString) Then
            Dim newFill As Brush = converter.ConvertFromString(dataString)
            circleUI.Fill = newFill

            ' Set Effects to notify the drag source what effect
            ' the drag-and-drop operation had.
            ' (Copy if CTRL is pressed; otherwise, move.)
            If e.KeyStates.HasFlag(DragDropKeyStates.ControlKey) Then
                e.Effects = DragDropEffects.Copy
            Else
                e.Effects = DragDropEffects.Move
            End If
        End If
    End If
    e.Handled = True
End Sub

Ez a OnDrop felülbírálás a következő feladatokat hajtja végre:

A GetDataPresent metódussal ellenőrzi, hogy a húzott adatok tartalmaznak-e sztringobjektumot.
A GetData metódus használatával nyeri ki a sztringadatokat, ha vannak ilyenek.
Megpróbálja a sztringet BrushConverter használatával Brush-é konvertálni.
Ha az átalakítás sikeres, az ecsetet a Fill azon Ellipse elemére alkalmazza, amely a Kör vezérlőelem felhasználói felületét biztosítja.
Megjelöli a Drop eseményt kezeltként. A drop eseményt kezelendőként kell megjelölnie, hogy az eseményt fogadó többi elem tudja, hogy a Circle felhasználói vezérlő kezelte.

Az alkalmazás létrehozásához és futtatásához nyomja le F5.
Jelölje ki a green szöveget a TextBox-ben.
Húzza a szöveget egy Kör vezérlőelemre, és ejtse el. A Kör kékről zöldre változik.
Írja be a green szöveget a TextBoxmezőbe.
Jelölje ki a gre szöveget a TextBox-ben.
Húzza egy Kör vezérlőelemre, és engedje el. Figyelje meg, hogy a kurzor úgy változik, hogy a dobás engedélyezett, de a kör színe nem változik, mert gre nem érvényes szín.
Húzza a zöld Kör vezérlőelemet, és helyezze a kék Kör vezérlőelemre. A Kör kékről zöldre változik. Vegye észre, hogy melyik kurzor jelenik meg, attól függően, hogy a TextBox vagy a Kör a húzási forrás.

A AllowDrop tulajdonság true-re történő beállítása és az eldobott adatok feldolgozása az egyetlen szükséges lépés ahhoz, hogy egy elem fogadóként működjön. A jobb felhasználói élmény érdekében azonban a DragEnter, DragLeaveés DragOver eseményeket is kezelnie kell. Ezekben az eseményekben ellenőrzéseket hajthat végre, és további visszajelzést adhat a felhasználónak az adatok elvetése előtt.

Ha az adatok áthúzva lesznek a Circle felhasználói vezérlőn, a vezérlőnek értesítenie kell a húzási forrást, hogy képes-e feldolgozni a húzással érintett adatokat. Ha a vezérlő nem tudja, hogyan kell feldolgozni az adatokat, akkor el kell utasítania az elvetést. Ehhez kezelnie kell a DragOver eseményt, és be kell állítania a Effects tulajdonságot.

Annak ellenőrzése, hogy az adatátvitel engedélyezett-e

Nyissa meg Circle.xaml.cs vagy Circle.xaml.vb.

Adja hozzá a következő OnDragOver felülbírálást, hogy osztálykezelést biztosítson az DragOver eseményhez.

protected override void OnDragOver(DragEventArgs e)
{
    base.OnDragOver(e);
    e.Effects = DragDropEffects.None;

    // If the DataObject contains string data, extract it.
    if (e.Data.GetDataPresent(DataFormats.StringFormat))
    {
        string dataString = (string)e.Data.GetData(DataFormats.StringFormat);

        // If the string can be converted into a Brush, allow copying or moving.
        BrushConverter converter = new BrushConverter();
        if (converter.IsValid(dataString))
        {
            // Set Effects to notify the drag source what effect
            // the drag-and-drop operation will have. These values are
            // used by the drag source's GiveFeedback event handler.
            // (Copy if CTRL is pressed; otherwise, move.)
            if (e.KeyStates.HasFlag(DragDropKeyStates.ControlKey))
            {
                e.Effects = DragDropEffects.Copy;
            }
            else
            {
                e.Effects = DragDropEffects.Move;
            }
        }
    }
    e.Handled = true;
}

Protected Overrides Sub OnDragOver(ByVal e As System.Windows.DragEventArgs)
    MyBase.OnDragOver(e)
    e.Effects = DragDropEffects.None

    ' If the DataObject contains string data, extract it.
    If e.Data.GetDataPresent(DataFormats.StringFormat) Then
        Dim dataString As String = e.Data.GetData(DataFormats.StringFormat)

        ' If the string can be converted into a Brush, allow copying or moving.
        Dim converter As New BrushConverter
        If converter.IsValid(dataString) Then
            ' Set Effects to notify the drag source what effect
            ' the drag-and-drop operation will have. These values are 
            ' used by the drag source's GiveFeedback event handler.
            ' (Copy if CTRL is pressed; otherwise, move.)
            If e.KeyStates.HasFlag(DragDropKeyStates.ControlKey) Then
                e.Effects = DragDropEffects.Copy
            Else
                e.Effects = DragDropEffects.Move
            End If
        End If
    End If
    e.Handled = True
End Sub

Ez a OnDragOver felülbírálás a következő feladatokat hajtja végre:

Beállítja a Effects tulajdonságot None-re.
Ugyanazokat az ellenőrzéseket hajtja végre, amelyeket a OnDrop metódusban hajt végre annak megállapításához, hogy a Circle felhasználói vezérlő képes-e feldolgozni az áthúzott adatokat.
Ha a felhasználói vezérlő feldolgozhatja az adatokat, a Effects tulajdonságot Copy vagy Moveértékre állítja.

Az alkalmazás létrehozásához és futtatásához nyomja le F5.
Jelölje ki a gre szöveget a TextBox-ben.
Húzza a szöveget egy kör vezérlőelemre. Figyelje meg, hogy a kurzor most úgy változik, hogy az esés nem engedélyezett, mert gre nem érvényes szín.

A felhasználói élményt tovább javíthatja a húzási művelet előnézetének alkalmazásával. A Circle felhasználói vezérlőnél a OnDragEnter és OnDragLeave metódusokat kell felülírni. Amikor az adatokat áthúzzák a vezérlőn, az aktuális Fill háttér egy helyőrző változóba kerül mentésre. Ezután a karakterlánc ecsetté alakul, és alkalmazva van a Kör felhasználói felületét biztosító Ellipse elemére. Ha az adatokat a rendszer kihagyás nélkül húzza ki a körből, az eredeti Fill érték ismét a Körre lesz alkalmazva.

A húzási művelet effektusainak előnézete

Nyissa meg Circle.xaml.cs vagy Circle.xaml.vb.

A Circle osztályban deklaráljon egy Brush nevű privát _previousFill változót, és inicializálja azt null.

public partial class Circle : UserControl
{
    private Brush _previousFill = null;

Public Class Circle
    Private _previousFill As Brush = Nothing

Adja hozzá a következő OnDragEnter felülbírálást, hogy osztálykezelést biztosítson az DragEnter eseményhez.

protected override void OnDragEnter(DragEventArgs e)
{
    base.OnDragEnter(e);
    // Save the current Fill brush so that you can revert back to this value in DragLeave.
    _previousFill = circleUI.Fill;

    // If the DataObject contains string data, extract it.
    if (e.Data.GetDataPresent(DataFormats.StringFormat))
    {
        string dataString = (string)e.Data.GetData(DataFormats.StringFormat);

        // If the string can be converted into a Brush, convert it.
        BrushConverter converter = new BrushConverter();
        if (converter.IsValid(dataString))
        {
            Brush newFill = (Brush)converter.ConvertFromString(dataString.ToString());
            circleUI.Fill = newFill;
        }
    }
}

Protected Overrides Sub OnDragEnter(ByVal e As System.Windows.DragEventArgs)
    MyBase.OnDragEnter(e)
    _previousFill = circleUI.Fill

    ' If the DataObject contains string data, extract it.
    If e.Data.GetDataPresent(DataFormats.StringFormat) Then
        Dim dataString As String = e.Data.GetData(DataFormats.StringFormat)

        ' If the string can be converted into a Brush, convert it.
        Dim converter As New BrushConverter
        If converter.IsValid(dataString) Then
            Dim newFill As Brush = converter.ConvertFromString(dataString)
            circleUI.Fill = newFill
        End If
    End If
    e.Handled = True
End Sub

Ez a OnDragEnter felülbírálás a következő feladatokat hajtja végre:

Mentésre kerül a Fill tulajdonság a Ellipse objektumban a _previousFill változóban.
Ugyanazokat az ellenőrzéseket hajtja végre, mint amiket a OnDrop metódus végez annak érdekében, hogy megállapítsa, konvertálhatók-e az adatok Brush-é.
Ha az adatokat érvényes Brush-vá alakítják, alkalmazza a Fill-re a Ellipse-t.

Adja hozzá a következő OnDragLeave felülbírálást, hogy osztálykezelést biztosítson az DragLeave eseményhez.

protected override void OnDragLeave(DragEventArgs e)
{
    base.OnDragLeave(e);
    // Undo the preview that was applied in OnDragEnter.
    circleUI.Fill = _previousFill;
}

Protected Overrides Sub OnDragLeave(ByVal e As System.Windows.DragEventArgs)
    MyBase.OnDragLeave(e)
    ' Undo the preview that was applied in OnDragEnter.
    circleUI.Fill = _previousFill
End Sub

Ez a OnDragLeave felülbírálás a következő feladatokat hajtja végre:

A Brush értéket, amely a _previousFill változóban van mentve, alkalmazza a Fill Ellipse-jára, amely a Kör felhasználói vezérlő felhasználói felületét biztosítja.

Az alkalmazás létrehozásához és futtatásához nyomja le F5.
Jelölje ki a green szöveget a TextBox-ben.
Húzza a szöveget egy Kör vezérlőelem fölé anélkül, hogy elengedné. A Kör kékről zöldre változik.
Húzza el a szöveget a Kör vezérlőelemtől. A Kör zöldről kékre változik.

Elvetett adatok fogadásának engedélyezése panelen

Ebben a szakaszban engedélyezheti, hogy a húzott Kör adatokhoz célként szolgáljanak a Kör felhasználói vezérlőket tartalmazó panelek. Olyan kódot fog implementálni, amely lehetővé teszi a kör egyik panelről a másikra való áthelyezését, vagy a Kör vezérlőelem másolatának készítését a kör húzása és húzása közben a Ctrl billentyű lenyomásával.

Nyissa meg a MainWindow.xaml fájlt.

Az alábbi XAML-ben látható módon az egyes StackPanel vezérlőkben adjon hozzá kezelőket a DragOver és Drop eseményekhez. Nevezze el az DragOver eseménykezelőt, panel_DragOver, és nevezze el a Drop eseménykezelőt, panel_Drop.

Alapértelmezés szerint a panelek nem kijelölt célpontok a húzás és ejtés műveletekhez. Ezek engedélyezéséhez adja hozzá a AllowDrop tulajdonságot mindkét panelhez, és állítsa az értéket trueértékre.

<StackPanel Grid.Column="0"
            Background="Beige"
            AllowDrop="True"
            DragOver="panel_DragOver"
            Drop="panel_Drop">
    <TextBox Width="Auto" Margin="2"
             Text="green"/>
    <local:Circle Margin="2" />
    <local:Circle Margin="2" />
</StackPanel>
<StackPanel Grid.Column="1"
            Background="Bisque"
            AllowDrop="True"
            DragOver="panel_DragOver"
            Drop="panel_Drop">
</StackPanel>

Nyissa meg MainWindows.xaml.cs vagy MainWindow.xaml.vb.

Adja hozzá a következő kódot az DragOver eseménykezelőhöz.

private void panel_DragOver(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent("Object"))
    {
        // These Effects values are used in the drag source's
        // GiveFeedback event handler to determine which cursor to display.
        if (e.KeyStates == DragDropKeyStates.ControlKey)
        {
            e.Effects = DragDropEffects.Copy;
        }
        else
        {
            e.Effects = DragDropEffects.Move;
        }
    }
}

Private Sub panel_DragOver(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs)
    If e.Data.GetDataPresent("Object") Then
        ' These Effects values are used in the drag source's
        ' GiveFeedback event handler to determine which cursor to display.
        If e.KeyStates = DragDropKeyStates.ControlKey Then
            e.Effects = DragDropEffects.Copy
        Else
            e.Effects = DragDropEffects.Move
        End If
    End If
End Sub

Ez a DragOver eseménykezelő a következő feladatokat hajtja végre:

Ellenőrzi, hogy az áthúzott adatok tartalmazzák-e az "Objektum" adatokat, amelyeket a Kör felhasználói vezérlő a DataObject-ban csomagolta be, és amelyeket a DoDragDrophívása során adtak át.
Ha az "Objektum" adatok szerepelnek, ellenőrizze, hogy a Ctrl billentyű lenyomva van-e.
Ha a Ctrl billentyű lenyomva van, a Effects tulajdonságot Copyértékre állítja. Ellenkező esetben állítsa a Effects tulajdonságot Moveértékre.

Adja hozzá a következő kódot az Drop eseménykezelőhöz.

private void panel_Drop(object sender, DragEventArgs e)
{
    // If an element in the panel has already handled the drop,
    // the panel should not also handle it.
    if (e.Handled == false)
    {
        Panel _panel = (Panel)sender;
        UIElement _element = (UIElement)e.Data.GetData("Object");

        if (_panel != null && _element != null)
        {
            // Get the panel that the element currently belongs to,
            // then remove it from that panel and add it the Children of
            // the panel that its been dropped on.
            Panel _parent = (Panel)VisualTreeHelper.GetParent(_element);

            if (_parent != null)
            {
                if (e.KeyStates == DragDropKeyStates.ControlKey &&
                    e.AllowedEffects.HasFlag(DragDropEffects.Copy))
                {
                    Circle _circle = new Circle((Circle)_element);
                    _panel.Children.Add(_circle);
                    // set the value to return to the DoDragDrop call
                    e.Effects = DragDropEffects.Copy;
                }
                else if (e.AllowedEffects.HasFlag(DragDropEffects.Move))
                {
                    _parent.Children.Remove(_element);
                    _panel.Children.Add(_element);
                    // set the value to return to the DoDragDrop call
                    e.Effects = DragDropEffects.Move;
                }
            }
        }
    }
}

Private Sub panel_Drop(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs)
    ' If an element in the panel has already handled the drop,
    ' the panel should not also handle it.
    If e.Handled = False Then
        Dim _panel As Panel = sender
        Dim _element As UIElement = e.Data.GetData("Object")

        If _panel IsNot Nothing And _element IsNot Nothing Then
            ' Get the panel that the element currently belongs to,
            ' then remove it from that panel and add it the Children of
            ' the panel that its been dropped on.

            Dim _parent As Panel = VisualTreeHelper.GetParent(_element)
            If _parent IsNot Nothing Then
                If e.KeyStates = DragDropKeyStates.ControlKey And _
                    e.AllowedEffects.HasFlag(DragDropEffects.Copy) Then
                    Dim _circle As New Circle(_element)
                    _panel.Children.Add(_circle)
                    ' set the value to return to the DoDragDrop call
                    e.Effects = DragDropEffects.Copy
                ElseIf e.AllowedEffects.HasFlag(DragDropEffects.Move) Then
                    _parent.Children.Remove(_element)
                    _panel.Children.Add(_element)
                    ' set the value to return to the DoDragDrop call
                    e.Effects = DragDropEffects.Move
                End If
            End If
        End If
    End If
End Sub

Ez a Drop eseménykezelő a következő feladatokat hajtja végre:

Ellenőrzi, hogy a Drop esemény kezelése már megtörtént-e. Ha például egy kör egy másik, az Drop eseményt kezelő körre kerül, akkor nem szeretné, hogy a kört tartalmazó panel is kezelje azt.
Ha a Drop esemény nincs kezelve, ellenőrzi, hogy a Ctrl billentyű le van-e nyomva.
Ha a Ctrl billentyű lenyomva van a Drop esetén, készítsen másolatot a Kör vezérlőelemről, és adja hozzá a Children StackPanel gyűjteményéhez.
Ha a Ctrl billentyű nincs lenyomva, áthelyezi a kört a szülőpanel Children gyűjteményéből annak a panelnek a Children gyűjteményébe, ahova ejtették.
Beállítja a Effects tulajdonságot, hogy értesítse a DoDragDrop metódust, hogy végrehajtottak-e áthelyezési vagy másolási műveletet.

Az alkalmazás létrehozásához és futtatásához nyomja le F5.
Jelölje ki a green szöveget a TextBoxközül.
Húzza a szöveget egy Kör vezérlőelem fölé, és engedje el.
Húzza a kör vezérlőelemet a bal oldali panelről a jobb oldali panelre, és engedje el. A kör el lesz távolítva a bal oldali panel Children gyűjteményéből, és hozzáadódik a jobb oldali panel Gyermek gyűjteményéhez.
Húzza a kör vezérlőelemet a panelről a másik panelre, és húzza el a Ctrl billentyű lenyomása közben. A kör ki lesz másolva, és a rendszer hozzáadja a másolatot a fogadó panel Children gyűjteményéhez.

Lásd még

Húzás és ledobás áttekintése

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-07