सिल्वरलाइट कुकबुक: ड्रैग एंड ड्रॉप रेसिपी

इस लेख में मैं ऐसे अनुप्रयोग के उदाहरण का उपयोग करके ड्रैग एंड ड्रॉप के साथ काम का विश्लेषण करूंगा:



विचार यह है कि सभी उपयोगकर्ताओं की सूची से हम व्यक्तिगत रूप से (ड्रैग एंड ड्रॉप का उपयोग करके) उपयोगकर्ताओं को दो समूहों में विभाजित कर सकते हैं। इसके अलावा, नकारात्मक कर्म वाले उपयोगकर्ताओं को श्वेत सूची में नहीं जोड़ा जा सकता है।

लेकिन बिंदु के करीब। मैं बिल्ली माँगता हूँ।

तो, परिचय।

बॉक्स से बाहर, हम तुरंत ड्रैग एंड ड्रॉप कार्यक्षमता का उपयोग नहीं कर सकते हैं और शुरू कर सकते हैं (हमें खुद को सब कुछ लागू करना होगा), लेकिन हमारे जीवन को आसान बनाने के लिए, माइक्रोसॉफ्ट में सिल्वरलाइट टीम से विशेष रूप से प्रशिक्षित लोग पहले से ही सिल्वरलाइट टूलकिट में सब कुछ लागू कर चुके हैं।
इस कार्यक्षमता को नियंत्रण के नाम के साथ कुछ बेसिक कंट्रोल (यूजर कंट्रोल) के लिए रैपर के रूप में प्रस्तुत किया जाता है + ड्रैगड्रॉपटार्ग ( लिस्टबॉक्स के लिए यह लिस्टबॉक्सड्रैगड्रॉपटार्ट ) है। यह एक लिस्टबॉक्स या कई लिस्टबॉक्स के उदाहरण पर है, कि ड्रैग एंड ड्रॉप का प्रदर्शन किया जाएगा।

चलो एक नया सिल्वरलाइट एप्लिकेशन बनाएं।

मैंने इसे DragAndDropTestApp कहा, जो वास्तव में बिल्कुल भी मायने नहीं रखता।
अगले संवाद बॉक्स में, सब कुछ छोड़ दें और ठीक पर क्लिक करें।

टूलकिट के लिए तुरंत एक लिंक जोड़ें:



यह माना जाता है कि इसे पहले ही डाउनलोड और इंस्टॉल किया जा चुका है।

निम्नलिखित नामस्थानों को MainPage.xaml में जोड़ें:

xmlns:toolkit= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:my= "clr-namespace:DragAndDropTestApp"
* All source code (under and below) was highlighted with Source Code Highlighter .

टूलकिट पर। और नाम स्थान जिसमें हमारा आवेदन निहित है।

स्केच xaml।
तीन सूचियों में से प्रत्येक को निम्नलिखित मार्कअप द्वारा दर्शाया गया है:

< TextBlock
Text ="Users:"
Style ="{StaticResource Header}" />
< toolkit:ListBoxDragDropTarget
Grid . Row ="1"
HorizontalContentAlignment ="Stretch"
VerticalContentAlignment ="Stretch" >
< ListBox >
< ListBox.ItemTemplate >
< DataTemplate >
< my:UCUser />
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ toolkit:ListBoxDragDropTarget >

तत्वों की एक सूची के लिए एक शीर्षक के साथ टेक्स्टबॉक्स (सभी शैलियों के साथ जिन्हें मैंने App.xaml में डब किया था)। और, वास्तव में, ListBox स्वयं, ListBoxDragDropTarget में लिपटे हुए हैं। ItemTemplate उपयोगकर्ताओं को प्रदर्शित करने के लिए नए सिरे से परिभाषित किया गया है। UCUser मेरा अपना नियंत्रण है। अंदर कुछ भी अलौकिक नहीं है, अपने लिए देखें।

1. < ग्रिड
2. x: नाम = "लेआउटरूट"
3. पृष्ठभूमि = "पारदर्शी" >
4. < Grid.ColumnDefinitions >
5. < ColumnDefinition Width = "ऑटो" />
6. < ColumnDefinition Width = "4 *" />
7. < ColumnDefinition Width = "6 *" />
8. </ Grid.ColumnDefinitions >
9. < Grid.RowDefinitions >
10. < रोवफिनिशन हाइट = "ऑटो" />
11. < रोवफिनिशन हाइट = "ऑटो" />
12. </ Grid.RowDefinitions >
13. < छवि
14. स्रोत = "../ छवियाँ / gnome_face_devilish.png"
15. चौड़ाई = "48"
16. ऊँचाई = "48"
17. मार्जिन = "15, 0, 20, 0"
18. ग्रिड । रोवस्पैन = "2" />
19. < TextBlock
20. पाठ = "उपनाम:"
21. ग्रिड । कॉलम = "1" />
22. < TextBlock
23. पाठ = "{बाइंडिंग पथ = निकनेम, मोड = वनवे}"
24. ग्रिड । कॉलम = "2"
25. FontWeight = "बोल्ड" />
26. < TextBlock
27. पाठ = "कर्म:"
28. ग्रिड । रो = "1"
29. ग्रिड । कॉलम = "1" />
30. < TextBlock
31. पाठ = "{बंधन पथ = कर्म, विधा = OneWay}"
32. ग्रिड । रो = "1"
33. ग्रिड । कॉलम = "2"
34. FontWeight = "बोल्ड" />
35. </ ग्रिड >
    

स्रोत चित्र के लिए सेट किया गया है और डेटा बाइंडिंग (बाइंडिंग) पंजीकृत है।
वैसे, उपयोगकर्ता के लिए एक अलग वर्ग है। यहाँ उनका विचार है:

public class User
{
public string NickName { get ; set ; }
public int Karma { get ; set ; }
}

अब प्रत्येक सूची के लिए एक संग्रह बनाएं और उपयोगकर्ता लोडिंग का अनुकरण करें:

1. सार्वजनिक आंशिक वर्ग मेनपेज: UserControl
2. {
3. सार्वजनिक मेनपेज ()
4. {
5. इनिशियलाइकम्पोनेंट ();
6. यह .DataContext = यह ;
7. इनिशियलाइज़ कॉलेक्शन ();
8. लोडयूजर ();
9. }
11. // संग्रह की घोषणा करें
12. सार्वजनिक प्रेक्षण योग्य अवलोकन <उपयोगकर्ता> उपयोगकर्ता { प्राप्त करें ; सेट ; }
13. सार्वजनिक प्रेक्षण योग्य साहित्य <उपयोगकर्ता> व्हाइटलिस्ट { प्राप्त करें ; सेट ; }
14. सार्वजनिक प्रेक्षण योग्य साहित्य <उपयोगकर्ता> ब्लैकलिस्ट { प्राप्त करें ; सेट ; }
16. // प्रारंभिक संग्रह
17. निजी शून्य प्रारंभकलेक्शन ()
18. {
19. उपयोगकर्ता = नया ऑब्ज़र्वेबल कॉलेक्शन <उपयोगकर्ता> ();
20. श्वेतसूची = नया प्रेक्षण योग्य सिद्धांत <उपयोगकर्ता> ();
21. BlackList = नया वेधशाला का चयन <<>;
22. }
24. // विधि जो उपयोगकर्ता संग्रह में डेटा लोड करने का अनुकरण करती है
25. निजी शून्य लोडर ()
26. {
27. var r = new random ();
29. // एक यादृच्छिक कर्म मूल्य के साथ 20 उपयोगकर्ता जोड़ें।
30. for ( int i = 1; मैं <21; i ++)
31. {
32. var newUser = नया उपयोगकर्ता
33. {
34. NickName = "उपयोगकर्ता नाम" + i,
35. कर्म = r.Next (200) - 100
36. };
38. Users.Add (newUser);
39. }
40. }
41. }

MainPage के लिए DataContext के रूप में , MainPage को ही स्थापित करें। मैंने ऐसा इसलिए किया ताकि मैं डेटा से आसानी से जुड़ सकूं। यह इस तरह दिखता है:

< ListBox ItemsSource ="{Binding Path=Users, Mode=TwoWay}" >

अंतिम स्पर्श कार्य के लिए ड्रैग एंड ड्रॉप के लिए अनुपलब्ध है:

AllowDrop ="True"

इस संपत्ति को सही पर सेट करके, हम तत्व को ड्रैग एंड ड्रॉप का उपयोग करके डेटा स्वीकार करने की अनुमति देते हैं। इसके अलावा, आप इसे ListBox और ListBoxDragDropTarget दोनों में इंस्टॉल कर सकते हैं।

यहाँ क्या हुआ:



अब आप किसी भी सूची में नकारात्मक कर्म वाले उपयोगकर्ता को खींच सकते हैं।
योजना के अनुसार, आपको एक को व्हाइट लिस्ट में खींचने पर रोक लगाने की आवश्यकता है।

सबसे पहले, उन घटनाओं को देखें, जो ड्रैग-एन-ड्रॉप'ई से उत्पन्न होती हैं:



DragEnter तब होता है जब घसीटा गया कंटेनर गंतव्य तत्व की सीमा को पार कर जाता है (DragOver घटना से पहले आग)।
DragLeave - घसीटा गया कंटेनर स्रोत तत्व से खींचा गया था।
ड्रैगऑवर - जब गंतव्य स्थान पर घसीटा कंटेनर चलता है तो आग लग जाती है।
ड्रॉप - घसीटा गया कंटेनर गंतव्य तत्व तक "गिरा" दिया गया था।

श्वेतसूची के लिए DragEnter ईवेंट हैंडलर जोड़ें।

1. < टूलकिट: लिस्टबॉक्सड्राड्रॉपट्रेट
2. AllowDrop = "ट्रू"
3. ग्रिड । रो = "1"
4. ग्रिड । कॉलम = "1"
5. क्षैतिजसंबंधी आरेखण = "खिंचाव"
6. वर्टिकलकंटेंट ऑलिनेमेंट = "स्ट्रेच"
7. DragEnter = "ListBoxDragDropTarget_DragEnter" >
8. < लिस्टबॉक्स
9. ItemSource = "{बाइंडिंग पथ = श्वेतसूची, मोड = TwoWay}"
10. x: नाम = "lbWhiteList" >
11. < ListBox.ItemTemplate >
12. < DataTemplate >
13. < my: UCUser />
14. </ DataTemplate >
15. </ ListBox.ItemTemplate >
16. </ ListBox >
17. </ टूलकिट: ListBoxDragDropTarget >

और ListBox को एक नाम दें, यह काम में आएगा।

हैंडलर खुद:

1. निजी शून्य ListBoxDragDropTarget_DragEnter ( ऑब्जेक्ट प्रेषक, Microsoft। Windows.DragEventArgs ई)
2. {
3. // प्रारूप का पता चला
4. var dataFormat = e.Data.GetFormats () [0];
6. // आइटम में एक ऑब्जेक्ट मिला है ItemDragEventArgs
7. var DragEventArgs = e.Data.GetData (dataFormat) ItemDragEventArgs के रूप में ;
9. // ड्रैग करने योग्य वस्तुओं का एक संग्रह मिला
10. SelectionCollection sc = dragEventArgs.Data SelectionCollection के रूप में ;
12. // संग्रह में प्रत्येक आइटम की जाँच करें
13. foreach (sc में var आइटम)
14. {
15. // यदि कम से कम एक घसीट आइटम (उपयोगकर्ताओं) में नकारात्मक कर्म है
16. // इन वस्तुओं को श्वेत सूची में जोड़ने पर रोक।
17. अगर (आइटम। उपयोगकर्ता के रूप में यह )। कर्म <0)
18. {
19. lbWhiteList.AllowDrop = false ;
20. तोड़ना ;
21. }
22. }
23. }

DragEventArgs.Data एक IDataObject देता है जिसमें संबंधित ड्रैग इवेंट के साथ जुड़ा डेटा होता है। लेकिन डेटा को सीधे एक्सेस नहीं किया जा सकता है, उन्हें गैर-सार्वजनिक के रूप में चिह्नित किया जाता है:



इस डेटा को प्राप्त करने के लिए, GetData () पद्धति का उपयोग किया जाता है, जो पैरामीटर के रूप में पारित प्रारूप में डेटा लौटाता है (प्रारूप को स्ट्रिंग या प्रकार के रूप में निर्दिष्ट किया जा सकता है)। और आप GetFormats () विधि का उपयोग करके प्रारूप का पता लगा सकते हैं।

परिणाम ItemDragEventArgs वर्ग का एक उदाहरण है। इस वर्ग में एक UIElement पर एक ड्रैग इवेंट का वर्णन करने वाली जानकारी है। इसमें एक डेटा प्रॉपर्टी है जो पहले से ही ड्रैगेबल कंटेनर से सीधे संबंधित है। हम इस ऑब्जेक्ट को SelectionCollection में लाते हैं।
संग्रह का उपयोग यहां किया गया है क्योंकि हम एक साथ कई वस्तुओं को खींच और छोड़ सकते हैं।
(यह बहुत सरलता से सूचीबद्ध किया जा सकता है, लिस्टबॉक्स के लिए, SelectionMode गुण को एकाधिक में सेट करें)।
यह पूरे संग्रह के माध्यम से चलता रहता है और जांचता है कि घसीटे गए उपयोगकर्ताओं में नकारात्मक कर्म वाले लोग हैं या नहीं। अगर वहाँ है, तो हम बस उन्हें "छोड़ने" से सफेद सूची में जाने से रोकते हैं।

आप MouseLeave ईवेंट हैंडलर में अपने पिछले मान (True में) के लिए AllowDrop को वापस कर सकते हैं।

और अंत में, ड्रैग-एन-ड्रॉप का उपयोग करके किसी एक सूची के भीतर आइटम को सॉर्ट करने की क्षमता का एहसास करने के लिए, यह केवल आइटमपैनल के लिए टेम्पलेट को फिर से परिभाषित करने के लिए पर्याप्त है:

< ListBox.ItemsPanel >
< ItemsPanelTemplate >
< StackPanel />
</ ItemsPanelTemplate >
</ ListBox.ItemsPanel >

आप यहां प्रोजेक्ट डाउनलोड कर सकते हैं ।