2010.01.13 17:38

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events

5.MouseWheel API
6.Using Silverlight Controls As Drop Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content
10.Accessing the Global Clipboard Programmatically 
11.Using the ViewBox Control 
12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010   

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 

Drag and Drop 기능은 직관적인 기능을 구현할 수 있는 인터페이스 중에 하나 입니다. Silverlight에서도 Drag and Drop을 통해서 괜찮은 인터페이스를 만들 수 있도록 하는 기능이 추가 되었습니다. 물론 이전 버전에서도 안되었던 것은 아닙니다만 Silverlight 4에서는 강화된 Out of browser 기능과 맞물려서 좀 더 강력하게 사용할 수 있는 방법들이 제공되고 있습니다.

 

이번 강좌에서는 <그림1>과 같은 샘플을 만들어 볼 예정입니다. XAML파일, Image, 동영상 등을 Drop on me라는 버튼에 Drag 하게 되면 아래에 추가 되는 형태로 동작할 예정입니다.

<그림1> 완성된 샘플 프로그램

 

버튼과 같은 컨트롤에는 모두 Drop, DragEnter, EragLeave, AllowDrop와 같은 속성들이 포함되어 있습니다. 먼저 Drag and Drop 기능을 사용하기 위해서는 AllowDrop = true로 설정해서 활성화 시켜줘야 합니다.

 

ButtonDropTarget.Drop += doDrop;

ButtonDropTarget.DragEnter += doDragEnter;

ButtonDropTarget.DragLeave += doDragLeave;

ButtonDropTarget.AllowDrop = true;

ButtonDropTarget.Click += ButtonDropTargetClick;

 

이벤트에서 DragEnter는 Drag해서 해당 컨트롤 위에 왔을 경우를 의미하고 DragLeave는 들어왔다가 나갈 때 발생하는 이벤트이다. 마지막으로 Drop은 해당 객체 위에 끌고 온 것을 놨을 때(Drop) 발생하는 이벤트 입니다.

우선 DragEnter와 DragLeave 이벤트에서는 간단하게 지금 해당 컨트롤 위에 올라오거나 올라왔다가 나간 객체에 대한 정보를 리스트 박스에 보여주려고 합니다.

 

private void doDragEnter( object sender, DragEventArgs e )
{
  string senderName = GetSenderName( sender );
  listBox.Items.Add( "Drag enter by " + senderName );
}

 

private void doDragLeave( object sender, DragEventArgs e )
{
  string senderName = GetSenderName( sender );
  listBox.Items.Add( "Media drag leave by " + senderName );
}

 

두 개의 이벤트 핸들의 내용을 보면 내용이 거의 유사한 것을 볼 수 있습니다. 둘 다 senderName을 GetSenderName( )을 통해서 얻어내서 이것을 리스트 박스에 추가 하고 있습니다. GetSenderName( )은 단순히 sender의 이름을 리턴 해주는 함수로 되어 있습니다.

 

private static string GetSenderName( object sender )
{
  FrameworkElement fe = sender as FrameworkElement;
  return fe.Name;
}

 

실제 기능은 모두  doDrop 이벤트 핸들러에 포함되어 있습니다.

Drag and Drop에 관련된 이벤트 Args는 DragEventArgs로 여기에 Data라는 속성에 현재 Drag 혹은 Drop한 객체에 대한 정보가 들어 있습니다.

 

아래와 같이 dataObject를 생성해서 Data속성에 있는 값을 받을 수 있습니다.

 

IDataObject dataObject = e.Data as IDataObject;

 

추가된 것이 어떤 것인지 분명해 지면 해당 포멧에 맞추어서 각각의 동작 방식을 기술해 줍니다. xaml 파일의 경우는 해당 파일을 열어서 사용할 수 있게 되어 있고 mp4는 MediaElement를 사용해서 실행 시키는 것을 볼 수 있습니다. 또 이미지의 경우는 이미지를 열어서 볼 수 있게 되어 있습니다.

 

    if ( file.Extension.Equals( ".xaml" ) )
    {
      string contents;
      using ( Stream stream = file.OpenRead() )
      {
        using ( StreamReader reader = new StreamReader( stream ) )
        {
          contents = reader.ReadToEnd();
        }
      }
      UIElement uiElement = XamlReader.Load( contents ) as UIElement;
      this.xamlViewer.Children.Add( uiElement );
    }
    else if ( file.Extension.Equals( ".mp4" ) )
    {
      var me = new MediaElement();
      me.Width = 400;  // mp4 ratio is 4:3
      me.Height = 300;
      me.Source = new Uri( file.Name, UriKind.RelativeOrAbsolute );
      this.xamlViewer.Children.Add( me );
      me.Play();
    }
    else  // not xml and not mp4
    {
      try  // so we assume it is an image
      {
        using ( var stream = file.OpenRead() )
        {
          var imageSource = new BitmapImage();
          imageSource.SetSource( stream );
          image.Source = imageSource;
        }
      }
      catch ( Exception )
      {
        listBox.Items.Add( "Oops, " + file.Name + " is not an image file" );
      }   // end catch
    }     // end else not .xaml

실제 Drag and Drop을 구현하는 코드는 몇 줄에 불과한 것을 알 수 있습니다.
소스코드는 아래에서 다운로드 받을 수 있습니다.

Download C# Source Code

신고