Visual Studio 2010 공식 팀 블로그 @vsts2010

Posted by 비회원

오피스 2007 부터 적용되어온 리본 UI에 대해서는 이제 모르는 분이 없을 정도로 많이 대중화 되었습니다.

윈도우 7에서는 그림판, 워드패드 등의 기본 프로그램에도 리본 UI가 적용되어서 사용자에게 편리함을 주고 있습니다.

이러한 리본 UI를 적용해서 개발을 하고 싶을 때는 MFC를 이용한 방법이 있습니다.

  

MFC 프로젝트를 생성하고 마법사에서 오피스 스타일의 프로젝트를 선택하면 리본 UI가 적용되어 사용 할 수 있습니다.

이렇게 프로젝트를 생성하고 실행시켜보면 리본 UI가 적용된 것을 확인 할 수 있습니다.

MFC에서는 이렇게 기본적으로 지원을 해주었지만 또 다른 윈도우 어플리케이션 개발 방법인 WPF에서는 지금까지 정식으로 지원을 하지 못했습니다.

기본 컨트롤에서는 제공하지 못하고 따로 컨트롤이 제작되어 지원을 준비하고 있었는데 이번에 RTW 버전이 출시되어 WPF 기반의 응용 프로그램 개발에서 리본 UI를 쉽게 사용할 수 있게 되었습니다.

RTW 출시 이전 단계에서는 .dll 파일을 수동으로 참조해서 번거롭게 작업을 해야 했었는데 이번 RTW부터 많은 편의성이 향상되었습니다.

첫째,  .MSI 인스톨러를 지원하여 번거로운 작업을 하지 않아도 쉬운 설치로 사용 할 수 있게 개선되었습니다.

둘째, WPF 개발에 많이 사용되는 MVVM 패턴을 지원하여 최신의 개발 방법을 지원하고 있습니다.

셋째, WPF 개발을 할 때 Expression Blend 사용이 거의 필수적인데 Blend에서 디자인 타임에서 리본 UI를 지원하여 편리한 UI 개발을 할 수 있게 되었습니다.

넷째, Visual Studio와 Expression Blend에서 프로젝트 템플릿을 지원하여 리본 UI 스타일 개발을 쉽고 빠르게 해줍니다.

 

   1: <ribbon:RibbonWindow x:Class="WpfRibbonApplication1.MainWindow"
   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:         xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
   5:         Title="MainWindow"
   6:         x:Name="RibbonWindow"
   7:         Width="640" Height="480">

프로젝트를 생성하고 xaml 코드를 살펴보면 ribbon 네임스페이스에 관련 컨트롤이 추가된 것을 볼 수 있습니다.

리본 UI 컨트롤은 ribbon 접두어를 사용하면 해당 컨트롤이 표시되게 됩니다.

그리고 일반 WPF 프로젝트는 루트 엘리먼트가 Window인데 리본 UI가 적용되면 RibbonWindow가 사용되는 것을 알 수 있습니다.

   1: <ribbon:Ribbon x:Name="Ribbon">
   2:     <ribbon:Ribbon.ApplicationMenu>
   3:         <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
   4:             <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
   5:                                               x:Name="MenuItem1"
   6:                                               ImageSource="Images\LargeIcon.png"/>
   7:         </ribbon:RibbonApplicationMenu>
   8:     </ribbon:Ribbon.ApplicationMenu>
   9:     <ribbon:RibbonTab x:Name="HomeTab" 
  10:                       Header="Home">
  11:         <ribbon:RibbonGroup x:Name="Group1" 
  12:                             Header="Group1">
  13:             <ribbon:RibbonButton x:Name="Button1"
  14:                                  LargeImageSource="Images\LargeIcon.png"
  15:                                  Label="Button1" />
  16:  
  17:             <ribbon:RibbonButton x:Name="Button2"
  18:                                  SmallImageSource="Images\SmallIcon.png"
  19:                                  Label="Button2" /> 
  20:         </ribbon:RibbonGroup>
  21:         
  22:     </ribbon:RibbonTab>
  23: </ribbon:Ribbon> 

실제 UI부분의 코드를 보면 이전에는 일일이 직접 코딩을 해줘야 했던 부분이 자동적으로 가능하게 되어 정말 편리하게 변했습니다. 이제 리본 컨트롤을 사용하여 WPF 환경에서도 편리하게 UI 개발을 할 수 있게 되었습니다.

이번에는 간단한 소개 정도로 마치고 다음부터는 WPF에서 리본 컨트롤을 사용하는 세부적인 내용을 차근차근 알아가도록 하겠습니다.

※ WPF Ribbon 컨트롤 다운로드

크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 버그인지 아니면 쓰지 말라고 대충 만들다가 그만 둔건지..
    리본탭을 생성한 뒤에.. 전혀 디자인?모드에서 조작이 안되는군요..
    탭마다 어떤버튼을 배치했는지 볼수도 없고... 탭선택도 안되고....정식버전치고는 테마? 변경하는 기능도 없고..그냥 포샵질만 해서 내놓은듯한.. WPF는 7.0 정도 나오면 좀 써볼만 할지도 모르겠군요... 윈도7처럼...

    아직은.. 그냥 윈폼이... 편하네요.. WPF는 기본적인 컨트롤(거의 HTML수준...)밖에 없고... 이쁘긴 해서 좋은것 같은데.. 아직은 완성도가 너무 -_-;

  2. 언젠가 리본 메뉴로 아주 간단한 프로그램 만들어 보고 싶은데, MFC, WPF 중 어떤걸 이용해야 하나요??? 복잡하고 어렵네요.

  3. 비밀댓글입니다

  4. BlueUnicon 2011/04/27 20:21

    쉽게 구성하여 사용 할수 있지만
    문제는 탭을눌렀을 경우의 이벤트를 어떻게 핸들링 할수 있는지가
    관건인듯
    탭의 해더 부분에 클릭 이벤트 메서드를 만들기도 힘들고 만들어도
    속칭 야매로 만들어야 하고 갑갑합니다.
    아무래도 더 버전업을 해야 할듯 하군요