Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

Drop your picture on me, please!

Memang judul yang sangat provokatif, se-provokatif fitur-fitur yang dimiliki oleh Silverlight 4.0 :)

Setelah pemanfaatan scroll mouse yang telah diceritakan di posting sebelumnya di sini, Fitur lain adalah Drop, yang memungkinkan aplikasi Silverlight menerima file dari desktop atau file explorer pada “badan” aplikasi Silverlight. Caranya tidaklah susah, cukup dengan menambahkan “atribut” AllowDrop dengan nilai True pada control yang akan menerima file tersebut. Pada contoh di bawah ini adalah pemberian “atribut” AllowDrop pada UserControl.

   1: <UserControl x:Class="SilverlightApplication3.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:     mc:Ignorable="d" AllowDrop="True" Drop="UserControl_Drop"
   7:     d:DesignHeight="600" d:DesignWidth="600" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
  10:     </Grid>
  11: </UserControl>

Pada baris ke-6 dapat dilihat contoh penggunaan “atribut” AllowDrop.  Bila ternyata area drop hanya dibagian tertentu saja, misalnya di suatu area Canvas maka dapat ditulis seperti contoh berikut ini.

   1: <UserControl x:Class="SilverlightApplication4.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:     mc:Ignorable="d"
   7:     d:DesignHeight="600" d:DesignWidth="600">
   8:  
   9:     <Canvas x:Name="LayoutRoot" Background="Black">
  10:         <Canvas x:Name="DropArea" AllowDrop="True" Drop="DropArea_Drop" Background="Red" Width="400" Height="400" Canvas.Top="13" Canvas.Left="13">
  11:         </Canvas>
  12:     </Canvas>
  13: </UserControl>

Pada baris ke-10 dapat dilihat area Drop.

Apa benar Silverlight 4.0 ini mempunyai fitur Drop? Kalau diperhatikan kedua contoh di atas yaitu baris ke-6 contoh pertama dan baris ke-10 contoh ke dua, dapat dilihat terdapat penambahan Event Drop, yang akan memanggil method yang menangani event tersebut. Sekarang akan ditambahkan sedikit kode pada method tersebut untuk membuktikan fitur Drop memang bisa dilakukan.

<UserControl x:Class="SilverlightApplication4.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="600" d:DesignWidth="600" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

<Canvas x:Name="LayoutRoot" Background="Black">
<Canvas x:Name="DropArea" AllowDrop="True" Drop="DropArea_Drop" Background="Red" Width="400" Height="400" Canvas.Top="13" Canvas.Left="13"></Canvas>
<dataInput:Label Canvas.Left="13" Canvas.Top="419" Height="28" Name="label1" Width="400" Background="White" HorizontalContentAlignment="Left" />
</Canvas>
</UserControl>

Dan berikut kode yang ditulis pada method DropArea_Drop.

   1: using System.Windows;
   2: using System.Windows.Controls;
   3:  
   4: namespace SilverlightApplication4
   5: {
   6:     public partial class MainPage : UserControl
   7:     {
   8:         int dropedItem = 0;
   9:  
  10:         public MainPage()
  11:         {
  12:             InitializeComponent();
  13:         }
  14:  
  15:         private void DropArea_Drop(object sender, DragEventArgs e)
  16:         {
  17:             dropedItem++;
  18:             label1.Content = dropedItem.ToString();
  19:         }
  20:     }
  21: }

Hasilnya dapat dilihat pada gambar berikut ini :

image

Ketika file di drop pada area berwarna merah maka nilai pada area berwarna putih akan bertambah. Bagaimana? Sudah percaya kalau fitur Drop ini benar ada dan bukan mitos? Belum?

Kalau begitu akan dicoba memberikan contoh yang lain, yaitu kode untuk menangkap nama file yang di Drop dan menampilkannya pada area merah.

private void DropArea_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

foreach (FileInfo fi in files)
{
label1.Content = fi.Name;
}
}
}

Dengan kode tersebut maka label1 akan dapat menampilkan nama file.

Benarkan fitur Drop itu ada? Masih belum percaya juga?

image

Hm….bagaimana kalau skenario pembuktiannya seperti berikut, file yang akan di Drop adalah hanya file gambar, ketika di Drop ke area merah selain menampilkan nama file pada area putih juga file gambar tersebut akan ditampilkan.

Berikut adalah kode yang bisa digunakan untuk maksud di atas.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.IO;
using System.Windows.Media.Imaging;

namespace SilverlightApplication4
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void DropArea_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

foreach (FileInfo fi in files)
{
DropArea.Children.Clear();

using (Stream stream = fi.OpenRead())
{
try
{
BitmapImage bi = null;

bi = new BitmapImage();
bi.SetSource(stream);

double cx = (double)bi.PixelWidth;
double cy = (double)bi.PixelHeight;

// resize ukuran gambar yang ditampilkan
if (cx >= cy)
{
cy *= 390.0 / cx;
cx = 390.0;
}
else
{
cx *= 390.0 / cy;
cy = 390.0;
}

Image image = new Image();
image.Source = bi;

WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
ScaleTransform transform = new ScaleTransform();
transform.ScaleX = cx / bi.PixelWidth;
transform.ScaleY = cy / bi.PixelHeight;
wb1.Render(image, transform);
wb1.Invalidate();

Image gambar = new Image();
gambar.Source = wb1;

label1.Content = fi.Name;
DropArea.Children.Add(gambar);
}
catch (Exception)
{
}
}
}
}
}
}
}

Hasilnya akan terlihat seperti gambang di bawah ini.

image image

Semoga dengan contoh-contoh di atas pembaca sudah bisa mempercayai fitur Drop yang dimiliki oleh Silverlight.

Selamat mencoba & selamat menikmati libur akhir pekan.

Share this post: | | | |
Posted: Feb 13 2010, 01:39 AM by reyza | with 4 comment(s)
Filed under:

Comments

Reyza said:

Setelah mencoba fitur Drop pada Silverlight 4.0 di sini , maka lucu rasanya kalau cuma ngedrop gambar

# February 15, 2010 11:22 PM

Agus Kurniawan said:

drop your voucher?

# February 17, 2010 2:47 PM

Reyza said:

CompositionTarget.Rendering adalah “kata” yang menarik hari ini. Kata lama bagi orang lain, tapi kata

# February 17, 2010 6:42 PM

Reyza said:

Setelah gambar sudah bisa di drop dan ditampilkan pada badan aplikasi Silverlight kemudian digerak-gerakan

# March 9, 2010 7:17 AM