[Silverlight] 從本機拖曳圖片至Silverlight中顯示

2010/10/13

RIA (Rich Internet Application) 這名詞隨著
網路頻寬增長,記憶體很大,CPU 很快下…
一直都很紅,帶來網站新體驗…

我之前從Flex 出發,已經體驗到很多 User 看到原來網頁也可以這樣帶來的訝異..
其實Silverlight 帶來更多更屌的東西..讓我覺得超酷的..

有時候做檔案圖片上傳..
是不是還要向傳統一樣的瀏覽.選檔上傳..
sshot-35

而現在 新版的Skydirve 也都採用Silverlight 技術來做到多檔拖曳上傳…
sshot-36


下面設計一個ListBox 讓User可以拖曳圖片進來,然後並且顯示..
後面上傳部分就不贅述,因為就跟傳統上傳到ashx方式差不多..
sshot-37
(物件配置 就只有一個ListBox 物件叫做 listImages 接收拖曳進來的圖檔)


<UserControl x:Class="DropOpenTXT.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="550" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="#FF272727">
        <ListBox HorizontalAlignment="Left" Margin="21,12,0,26" Name="listImages" Width="365" AllowDrop="True" Drop="listImages_Drop" />
        <sdk:Label Height="36" HorizontalAlignment="Left" Margin="389,142,0,0" Name="label1" VerticalAlignment="Top" Width="161" Content="請拖曳圖片至左方空白處" Foreground="White" FontSize="14" />
    </Grid>
</UserControl>


其中 加入一個很重要的屬性 AllowDrop="True” 還有一個事件  listImages_Drop

下面是C# Code :
首先記得先…
using System.IO;
using System.Windows.Media.Imaging;


下面為 listImages_Drop 的C# Code :
private void listImages_Drop(object sender, DragEventArgs e)
{
          //如果拖曳進來的不是null 才做..
          if (e.Data != null)
          {
              //資料放在e.Data 中所以從e.Data中取得
              IDataObject dataObject = e.Data as IDataObject;
              //有可能是多檔案
              FileInfo[] files = (FileInfo[])dataObject.GetData(DataFormats.FileDrop);

              foreach (var file in files)
              {
                  //如果是 .jpg 或是.png才進行讀取
                  if ((file.Extension == ".jpg") || (file.Extension == ".png"))
                  {
                      //下面就是把file 讀成 BitmapImage 然後再做成 Image 物件
                      BitmapImage bitmapImage = new BitmapImage();
                      bitmapImage.SetSource(file.OpenRead());
                      Image img = new Image();
                      img.Source = bitmapImage;
                      img.Width = 100;
                      img.Height = 100;
                      //放進listImages 之中
                      listImages.Items.Add(img);
                  }

              }
          }
 }


結果測試..
sshot-33

範例結果:

讚一下:

範例下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.