[Silverlight] 從本機拖曳圖片至Silverlight中顯示
2010/10/13
RIA (Rich Internet Application) 這名詞隨著
網路頻寬增長,記憶體很大,CPU 很快下…
一直都很紅,帶來網站新體驗…
我之前從Flex 出發,已經體驗到很多 User 看到原來網頁也可以這樣帶來的訝異..
其實Silverlight 帶來更多更屌的東西..讓我覺得超酷的..
有時候做檔案圖片上傳..
是不是還要向傳統一樣的瀏覽.選檔上傳..
而現在 新版的Skydirve 也都採用Silverlight 技術來做到多檔拖曳上傳…
下面設計一個ListBox 讓User可以拖曳圖片進來,然後並且顯示..
後面上傳部分就不贅述,因為就跟傳統上傳到ashx方式差不多..
(物件配置 就只有一個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); } } } }
結果測試..
範例結果:
讚一下:
範例下載:
標籤:
Silverlight
|
This entry was posted on 下午4:08
and is filed under
Silverlight
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
訂閱:
張貼留言 (Atom)
0 意見:
張貼留言