WPF 리본 컨트롤 RTW 출시

오피스 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 컨트롤 다운로드