영욱닷컴(http://youngwook.com)

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

6.Using Silveright 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

일반적인 Windows 응용 프로그램들과 웹 프로그램의 가장 큰 차이점이 무엇일까요? 여러 가지 이야기를 할 수 있지만 인터페이스적인 면으로 보면 가장 큰 차이가 바로 마우스 오른쪽 버튼의 사용 여부가 가장 큰 차이점이라고 할 수 있습니다. 웹이 아닌 일반적은 응용 프로그램에서는 마우스 오른쪽 버튼을 사용해서 상황에 맞는 기능들을 호출 할 수 있지만 웹에서는 웹 브라우저에 관련된 기능들이 실행되거나 Flash나 혹은 Silverlight의 경우는 그냥 해당 런타임 정보를 보여주는 용도로만 활용되고 있는 실정입니다.

Silverlight 4에서는 마우스 오른쪽 버튼을 사용할 수 있게 해주었는데 그냥 마우스 오른쪽 버튼을 사용할 수 있게 되었다는 정도의 의미가 아니라 웹에서 데스크 탑 응용 프로그램의 경험을 체험할 수 있게 해 주었다는 점에서 접근하게 되면 훨씬 많은 아이디어와 좋은 방법들을 구성할 수 있을 것 같습니다.

서두는 이렇게 시작하지만 실제로 구현하는 방식은 아주 간단하다.

1. 오른쪽 마우스 버튼을 사용하기 위해서는 이벤트 핸들러를 활성화 시켜야 한다.

버튼과 관련된 처음 작업은 바로 이벤트 핸들러를 작성하는 것입니다.

ChangingRectangle.MouseRightButtonDown += new MouseButtonEventHandler(RectangleContextDown);
ChangingRectangle.MouseRightButtonUp += new MouseButtonEventHandler(RectangleContextUp);

SimpleButton.MouseRightButtonDown += new MouseButtonEventHandler(ButtonContextDown);
SimpleButton.MouseRightButtonUp += new MouseButtonEventHandler(ButtonContextUp);

이렇게 마우스 오른쪽 버튼의 이벤트 두 개를 모두 핸들링 합니다. 마우스와 키보드 관련 이벤트는 항상 Down, Up 이렇게 두 개가 함께 있는데 누를 때가 Down 버튼을 놓을 때가 Up 이렇게 두 가지가 함께 공존하기 때문에 그렇습니다.

마우스 오른쪽 버튼을 사용하기 위해서 주로 사용되는 방법은 Down 이벤트시에 오른쪽 마우스 버튼 이벤트를 활성화 시키는 방법입니다.

e.Handled = true;

이벤트 핸들러의 MouseButtonEventArgs 객체로 리턴되는 e의 Handled 속성을 true 로 설정하는 순간 오른쪽 마우스 버튼을 누를 때 Silverlight라는 조그만 버튼이 나타나지 않게 됩니다.

2. 팝업 메뉴를 사용하기 위해서는 팝업 메뉴를 만들어야 한다.

일반적인 Windows 응용 프로그램에서 오른 쪽 마우스를 사용해서 팝업 메뉴를 불러 낼 경우에는 대부분 기본으로 제공하는 메뉴 객체를 사용해서 표현하는 경우가 대부분 입니다. 하지만 Silverlight에서는 팝업과 관련된 용도로 제공하는 컨트롤은 없습니다. 기본적으로 관련된 컨트롤을 제공하지 않는 이유는 Silverlight의 높은 자유도와 관련되어 있습니다.

팝업 메뉴를 특정 형태로 제공하지 않고 원하는 디자인으로 쉽게 구성해서 사용할 수 있게 있게 해 준 것입니다.

팝업과 관련된 클래스를 하나 추가해야 하는데 여기서는 가장 간단한 디자인으로 구성하고 있지만 실 프로젝트에서는 디자이너의 손을 거치면 좀 더 간지나는 팝업 메뉴로 만들 수 있습니다.

public class ColorChangeContextMenu : Dialog
{
    Rectangle _rectangle;

    public ColorChangeContextMenu(Rectangle rectangle)
    {
        _rectangle = rectangle;
    }

    protected override void OnClickOutside()
    {
        Close();
    }

    protected override FrameworkElement GetContent()
    {
        Grid grid = new Grid() { Width = 100, Height = 115 };
        Border border = new Border() { BorderBrush = new SolidColorBrush(Colors.Black), BorderThickness = new Thickness(1), Background = new SolidColorBrush(Colors.LightGray) };
        grid.Children.Add(border);

        TextBlock red = new TextBlock() { Text = "Red", Width = 90 };
        red.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorRed);

        TextBlock blue = new TextBlock() { Text = "Blue", Width = 90 };
        blue.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorBlue);

        TextBlock green = new TextBlock() { Text = "Green", Width = 90 };
        green.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorGreen);

        TextBlock yellow = new TextBlock() { Text = "Yellow", Width = 90 };
        yellow.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorYellow);

        TextBlock cancel = new TextBlock() { Text = "Cancel Menu", Width = 90 };
        cancel.MouseLeftButtonUp += new MouseButtonEventHandler(CancelContextMenu);

        ListBox options = new ListBox();
        options.Items.Add(red);
        options.Items.Add(blue);
        options.Items.Add(green);
        options.Items.Add(yellow);
        options.Items.Add(cancel);

        grid.Children.Add(options);

        return grid;
    }

    void CancelContextMenu(object sender, MouseButtonEventArgs e)
    {
        Close();
    }

    void ChangeColorYellow(object sender, MouseButtonEventArgs e)
    {
        SolidColorBrush solidColor = new SolidColorBrush();
        solidColor.Color = Colors.Yellow;
        _rectangle.Fill = solidColor;
        Close();
    }

    void ChangeColorGreen(object sender, MouseButtonEventArgs e)
    {
        SolidColorBrush solidColor = new SolidColorBrush();
        solidColor.Color = Colors.Green;
        _rectangle.Fill = solidColor;
        Close();
    }

    void ChangeColorBlue(object sender, MouseButtonEventArgs e)
    {
        SolidColorBrush solidColor = new SolidColorBrush();
        solidColor.Color = Colors.Blue;
        _rectangle.Fill = solidColor;
        Close();
    }

    void ChangeColorRed(object sender, MouseButtonEventArgs e)
    {
        SolidColorBrush solidColor = new SolidColorBrush();
        solidColor.Color = Colors.Red;
        _rectangle.Fill = solidColor;
        Close();
    }
}

좀 내용이 길기는 하지만 간단한 내용입니다. ListBox 컨트롤에 TextBlock을 추가해서 버튼처럼 사용할 수 있게 하고 있습니다. 그리고 이벤트 핸들러를 걸어 놓은 형태 입니다. 처음에는 이렇게 좀 길게 소스를 써야 하겠지만 자주 사용되는 기능인 만큼 컨트롤로 잘 만들어 두면 편리하게 사용할 수 있을 것 같습니다.

이 클래스를 불러와서 사용하기 위해서는 아래와 같이 사용할 수 있습니다.

ColorChangeContextMenu contextMenu = new ColorChangeContextMenu(ChangingRectangle);
contextMenu.Show(e.GetPosition(LayoutRoot));

e.GetPosition( )을 사용하는 이유는 현재 마우스 위치를 파악해서 해당 되는 위치에 팝업 메뉴를 보여 주기 위해서 입니다. 여기까지 했다면 다음과 F5번을 눌러서 실행 시켜 보면 다음과 같은 결과를 볼 수 있습니다.

First Look Silverlight 4 19-4 Right Button Event Handle.zip