-
[실버라이트4 Beta] File Drop 기능 알아보기Silverlight 2009. 11. 24. 13:45
안녕하세요. 승미입니다.
실버라이트 3가 나온 지 얼마 되지 않아 실버라이트 4 베타가 발표되었습니다.
버전업 속도가 빠른 느낌도 있지만 매 버전마다 놀랄만한 이슈를 가져오기에 버전업이 싫지만은 않군요 ^^.
실버라이트 4에서는 다양한 이슈가 있지만 이번 강좌에서는 그 중 하나인 File Drop 기능에 대해서 알아보겠습니다.
예제 다운로드
1. File Drop?
File Drop 기능은 컴퓨터에 존재하는 파일을 사용자가 Drag & Drop을 이용해 실버라이트 App. 에서 접근할 수 있는 기능을 의미합니다.
간단한 예로, 과거에 한 메일에서 첨부 파일을 추가할 때 로컬에 있는 파일을 Drag & Drop을 이용해서 첨부할 수 있었습니다. 당시에는 새로운 UX로 저에겐 신선하게 다가왔던 기억이 나는군요 ^^
하지만 이 기능을 이용하기 위해서는 ‘Active X’를 설치해야 했습니다. 그렇기 때문에 IE에서만 작동했으며, Firefox, Chrome등 ‘Active X’를 지원하지 않는 브라우저에서는 사용할 수 없었습니다.
<한 메일 Active X 설치화면>
실버라이트 4에서는 File Drop 기능을 지원함으로써 위와 같은 기능을 Active X 없이 구현할 수 있을 뿐만 아니라, 실버라이트의 크로스 브라우저 특징을 이용해 다양한 브라우저에서 동일한 기능을 제공할 수 있습니다.
2. File Drop과 관련된 프로퍼티와 이벤트
File Drop 기능을 지원하기 위해 프로퍼티와 이벤트가 추가되었습니다.
l AllowDrop 프로퍼티
Drop을 사용하기 위해서는 Drop을 지원하기 원하는 컨트롤에 [AllowDrop = true]와 같이 설정해야 합니다. AllowDrop을 True로 설정하지 않으면 Drop과 관련된 이벤트를 사용할 수 없습니다.
AllowDrop 프로퍼티는 UIElement 클래스에 정의되어 있기 때문에 실버라이트에서 화면에 보이는 모든 컨트롤에서 사용할 수 있습니다.
ex)
<Grid AllowDrop=”True”>…</Grid>
l DragEnter 이벤트
사용자가 Drag 중인 마우스 포인터가 UIElement (AllowDrop 프로퍼티가 True로 설정된) 에 들어왔을 때 발생하는 이벤트입니다
l DragLeave 이벤트
사용자가 Drag 중인 마우스 포인터가 UIElement (AllowDrop 프로퍼티가 True로 설정된) 에서 나갔을 때 발생하는 이벤트입니다
l DragOver 이벤트
사용자가 Drag 중인 마우스 포인터가 UIElement (AllowDrop 프로퍼티가 True로 설정된) 위에서 이동할 때 발생하는 이벤트입니다
l Drop 이벤트
UIElement (AllowDrop 프로퍼티가 True로 설정된)에 파일이 Drop된 경우 발생하는 이벤트입니다.
3. File Drop 사용하기
이제 File Drop 기능을 직접 사용해보겠습니다. 이어지는 예제를 따라 하기 위해서는 [실버라이트 4 베타 개발 환경]이 설치되어 있어야 합니다.
예제에서는 사용자가 Drop한 파일들의 이름을 화면에 출력해보도록 하겠습니다.
먼저 UI를 다음과 같이 구성하도록 하겠습니다.
[화면]
[XAML]<UserControl x:Class="DropExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- 왼쪽 영역 -->
<Grid Grid.Column="0"
AllowDrop="True"
x:Name="_DropGrid"
>
<Rectangle x:Name=”_DropBackground” Fill="Beige"/>
<TextBlock
Text="이 곳에 파일을 드랍해주세요"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<!-- 오른쪽 영역 -->
<StackPanel Grid.Column="1" Orientation="Vertical">
<TextBlock HorizontalAlignment="Center">드랍된 파일 이름 리스트</TextBlock>
<ListBox x:Name="_ListBox"/>
</StackPanel>
</Grid>
</UserControl>
예제에는 크게 2공간으로 나뉩니다. 왼쪽 공간은 사용자가 선택한 파일을 Drop하는 공간이며, 오른쪽 공간은 Drop된 파일의 경로를 출력하는 공간입니다.
위 XAML을 살펴보면 왼쪽 공간(Grid)에 Drop 이벤트를 처리하기 위해 [AllowDrop=True]로 설정한 것을 확인할 수 있습니다.
다음으로 C# 코드를 살펴보겠습니다.
[C#]
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;
namespace DropExample
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
// _DropGrid(왼쪽 영역)에 Drop 이벤트 핸들러 연결
_DropGrid.Drop += new DragEventHandler(_DropGrid_Drop); ------ 1
}
void _DropGrid_Drop(object sender, DragEventArgs e)
{
// 사용자가 Drop한 데이터 정보를 가져옴
IDataObject dataObject = e.Data; ------ 2
// 사용자가 File을 Drop했는지 체크
if (dataObject.GetDataPresent(DataFormats.FileDrop)) ------ 3
{
// Drop한 파일 리스트를 가져옴
FileInfo[] files = dataObject.GetData(DataFormats.FileDrop) as FileInfo[]; -- 4
foreach (FileInfo fileInfo in files)
{
// ListBox에 파일 이름 추가
_ListBox.Items.Add(
fileInfo.Name
); -- 5
}
}
}
}
}
1. _DropGrid에 Drop 이벤트를 처리하기 위해 핸들러를 연결합니다.
2. Drop 이벤트가 발생했을 때 Drop된 정보를 가져오기 위해 DragEventArgs의 Data 프로퍼티를 가져옵니다. Data 프로퍼티는 IDataObject 타입으로 Drop된 데이터 정보를 가지고 있습니다.
3. Drop된 데이터가 File인지 체크합니다. File이 아니라면 False를 리턴해 이벤트 핸들러가 종료됩니다. 실버라이트에서는 File Drop만을 지원합니다. 디렉토리 Drop은 지원하지 않습니다.
4. Drop된 File 정보를 가져옵니다. 다수의 File이 Drop될 수 있기 때문에 FileInfo의 배열 형태로 데이터가 리턴 됩니다.
5. 파일의 이름을 구해 _ListBox(오른쪽 영역)의 아이템으로 추가합니다.
추가로, FileInfo 클래스를 얻었기 때문에 Open() 메서드를 이용해 파일 스트림과 관련된 작업(업로드, 열기 등)을 수행할 수 있습니다.
작성된 예제를 실행해 파일을 Drop한 결과는 다음과 같습니다.
<예제 실행 화면>
4. DragEnter, DragLeave 사용하기
마지막으로 DragEnter와 DragLeave 이벤트를 사용해보겠습니다. 사용자가 파일을 Drag해서 왼쪽 영역에 들어오면 오렌지 색으로 배경을 바꾸고, Drop하거나 Drag 마우스 포인터가 왼쪽 영역을 벗어나는 경우 다시 기존 색으로 배경을 바꾸도록 하겠습니다.
C# 코드를 다음과 같이 수정합니다.
[C#]
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;
namespace DropExample
{
public partial class MainPage : UserControl
{
private Brush oldBrush; -- 1
public MainPage()
{
InitializeComponent();
// _DropGrid(왼쪽 영역)에 Drop 이벤트 핸들러 연결
_DropGrid.Drop += new DragEventHandler(_DropGrid_Drop);
_DropGrid.DragEnter += new DragEventHandler(_DropGrid_DragEnter); -- 2
_DropGrid.DragLeave += new DragEventHandler(_DropGrid_DragLeave);
}
void _DropGrid_DragLeave(object sender, DragEventArgs e)
{
_DropBackground.Fill = oldBrush; -- 3
}
void _DropGrid_DragEnter(object sender, DragEventArgs e)
{
oldBrush = _DropBackground.Fill;
_DropBackground.Fill = new SolidColorBrush(Colors.Orange); -- 4
}
void _DropGrid_Drop(object sender, DragEventArgs e)
{
_DropBackground.Fill = oldBrush;
// 사용자가 Drop한 데이터 정보를 가져옴
IDataObject dataObject = e.Data;
// 사용자가 File을 Drop했는지 체크
if (dataObject.GetDataPresent(DataFormats.FileDrop))
{
// Drop한 파일 리스트를 가져옴
FileInfo[] files = dataObject.GetData(DataFormats.FileDrop) as FileInfo[];
foreach (FileInfo fileInfo in files)
{
// ListBox에 파일 이름 추가
_ListBox.Items.Add(
fileInfo.Name
);
}
}
}
}
}
1. 기존 배경색을 저장할 Brush 변수를 선언
2. DragEnter와 DragLeave 이벤트 핸들러 연결합니다
3. DragLeave 이벤트가 발생하면 기존 배경색으로 변환합니다
4. DragEnter 이벤트가 발생하면 기존 배경색을 저장하고, 배경색으로 Orange 색으로 변환합니다
작성된 예제를 실행해 파일을 Drag하면 다음 결과 화면처럼 왼쪽 배경이 Orange 색으로 변환되는 것을 확인할 수 있습니다
<예제 실행 화면>
[주의]
DragEnter와 DragLeave의 이벤트 핸들러 인자는 Drop 이벤트와 동일하게 DragEventArgs를 가집니다. 하지만 MSDN에서는 DragEventArgs의 Data 프로퍼티는 Drop 이벤트 핸들러에서만 접근이 허가된다고 나와있습니다. 구현 시 참고하세요 ^^.
이상으로 Drop에 대한 설명을 마칩니다.
DropExample.zip
