Drag and drop in Silverlight 4


  • Visual Studio 2010 Beta 2 หรือ Visual Web Developer Express 2010 Beta 2
  • Silverlight Tools for Visual Studio 2010
  • Developer runtimes
  •  

    การเข้าถึงระบบไฟล์ของ Silverlight เราได้เห็นกันไปบ้างแล้วใน Silverlight เวอร์ชันที่ผ่าน เช่น Silverlight 2: OpenFileDialog เราสามารถเปิดไฟล์ ได้, Silverlight 3: SaveFileDialog เราสามารถบันทึกไฟล์ ได้ แต่มาใน Silverlight 4 เราสามารถลาก-วางไฟล์ (Drag and drop) ได้ กล่าวคือเราสามารถลากไฟล์จาก Desktop หรือโฟลเดอร์ ไปวางบนหน้าจอแอปพลิเคชันของ Silverlight ได้ซึ่งเป็นอีกหนึ่งฟีเจอร์ใหม่ ที่มีใน Silverlight 4  และบทความนี้แสดงตัวอย่างการลากรูปภาพจากโฟลเดอร์ของเครื่องไคลเอ็นต์ ไปวางบนหน้าจอของโปรแกรม Silverlight โดยตัวอย่างหน้าจอแอปพลิเคชัน เป็นดังรูป

    0

     

    ขั้นตอนการพัฒนาแอปพลิเคชัน

    1. สร้างโปรเจ็กต์ Silverlight ด้วย Microsoft Visual Studio 2010 หรือ Microsoft Expression Blend Preview for .NET 4 ในบทความขอใช้ Microsoft Expression Blend Preview for .NET 4

    2. แบ่ง LayoutRoot (Grid) เป็นสอง Row โดยใช้เมาส์คลิกบนอาร์ดบอร์ด ดังรูป

    01

    3. ลากคอนโทรล label และ Canvas ไปวางดังรูป โดยคอนโทรล label ใส่ป้ายชื่อ(Content) เป็น Drag and drop in Silverlight 4

    1

     

    4. คอนโทรล Canvas เปลี่ยนสีพื้นเป็นสีเทา

    2

     

    5. บนคอนโทรล Canvas กำหนดให้สามารถวางอ็อบเจ็กต์ได้ (AllowDrop) โดยติ๊กเมาส์ถูกตรง Porperties AllowDrop

    3

     

    6. ดับเบิ้ลคลิกอีเวนท์ Drop บนคอนโทรล Canvas

    4

    7. ใส่โค้ด

     

    ใส่โค้ดสมบูรณ์:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    using System.IO;
    using System.Windows.Media.Imaging;
    
    namespace DragAndDropInSilverlight4
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Canvas_Drop(object sender, System.Windows.DragEventArgs e)
            {
                // TODO: Add event handler implementation here.
    
                dropImg(e);//เรียกเมธอด dropImg()
            }
          
            private void dropImg(DragEventArgs e)
            {
                //เก็บตำแหน่งการวางเมาส์
                Point dPoint = e.GetPosition(Canvas);
    
                if (e.Data.GetDataPresent(DataFormats.FileDrop))
                {
                    FileInfo[] fi = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
                    if (fi.Length > 0)
                    {
                        //ตรวจสอบประเภทไฟล์ 
                        //ต้องเป็นนามสกุล ".jpg", ".png", ".gif"
                        if (new string[] { ".jpg", ".png", ".gif" }.Contains(fi[0].Extension))
                        {
                            //สร้างอ็อบเจ็กต์ BitmapImage ชื่อ img
                            BitmapImage img = new BitmapImage();
    
                            //กำหนดแหล่งข้อมูลรูปภาพให้ อ็อบเจ็กต์ img 
                            //โดยการอ่านไฟล์จากการลากวางเมาส์ แล้ววาง (FileDrop) 
                            img.SetSource(fi[0].OpenRead());
    
                            //สร้างอ็อบเจ็กต์ Image ชื่อ newimg
                            Image newimg = new Image();
    
                            //กำหนดแหล่งข้อมูลรูปภาพ จากอ็อบเจ็กต์ img
                            newimg.Source = img;
    
                            //กำหนดความกว้าง-สูง 200 pixel 
                            newimg.Width = 200;
                            newimg.Height = 200;
    
                            //วางรูปภาพตรงตำแหน่ง ที่วางเมาส์
                            newimg.SetValue(Canvas.TopProperty, dPoint.Y);
                            newimg.SetValue(Canvas.LeftProperty, dPoint.X);
    
                            //ปรับขนาดรูปภาพให้พอดีกับขนาดปลายทางในขณะที่มันรักษาอัตราส่วนกว้างยาวของ รูปภาพเดิม
                            newimg.Stretch =  Stretch.Uniform;
    
                            //วาดอ็อบเจ็กต์ newimg บนคอนโทรล Canvas
                            Canvas.Children.Add(newimg);
    
                        }
                    }
                }
            }
    
         
        }
    }
    

     

    8. ทดสอบรันแอปพลิเคชัน โดยการคลิก – ลาก – วาง จะได้ผลดังรูป

    5

     

    ฟีเจอร์ใหม่ คลิก – ลาก – วาง ใน Silverlight 4 ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชัน Silverlight ในการเข้าถึงระบบไฟล์ได้ง่ายขึ้น และใกล้เคียงโปรแกรม Windows App. มากขึ้นเข้าทุกที  ขอให้สนุกกับการ คลิก – ลาก – วาง ครับ

    แหล่งข้อมูลดาวน์โหลด:
    http://cid-7d608959d854cb28.skydrive.live.com/embedicon.aspx/SourcesCode/12-08-2009_DragAndDropInSilverlight4.zip

     

    แหล่งข้อมูลอ้างอิง:

     

    ผู้เขียน:
    nano_mvp_2009_1

    เกี่ยวกับ

    Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

    เขียนใน Silverlight
    2 comments on “Drag and drop in Silverlight 4
    1. Narin พูดว่า:

      ฟีเจอร์นี้เจ๋งมากเลยครับ ว่าแต่… การลากจากโฟลเดอร์ไปวางที่ silverlight application นี่คือการเปิดแฟ้มรูปภาพเท่านั้นใช่ไหมครับ

    2. Nuchit พูดว่า:

      ไฟล์อื่นๆ ก็ได้ครับ

    ใส่ความเห็น

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

    Twitter picture

    You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

    Facebook photo

    You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

    Google+ photo

    You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

    Connecting to %s

    In Archive
    %d bloggers like this: