VB.NET WPF에서 리본 툴바 만드는 진짜 방법

VB.NET WPF에서 리본 툴바 만드는 진짜 방법

2024. 3. 15. 15:11ㆍVB.NET/WPF

MS-Office에서 사용되는 리본은 예쁜 모양과 편리함으로 인해 여러 분야에서 다양하게 사용되는 컨트롤 중 하나이다.

이 리본 컨트롤을 WPF에서는 기본 제공하니 이번 시간에는 WPF에서 리본 툴바 만드는 방법에 대해 알아보도록 하자. 차근차근 따라서 다 만들면 아래 이미지와 같은 화면이 나오게 된다.

1. 프로젝트 생성

이번 강좌는 Visual Studio 2022 Community로 생성됐으며 새 프로젝트 만들기에서 아래 그림처럼 반드시 "WPF 앱(.NET Framework)"를 선택해야 한다. 그 위에 있는 "WPF 애플리케이션"을 선택하면 안되니 주의하도록 하자. 이유는 .NET Framework 4.8.1을 사용해야 하기 때문이다.

2. 참조 추가

참조 관리자 > 어셈블리 > System.Windows.Controls.Ribbon 을 추가하자. 윈도우에서 기본 제공하는 리본 컨트롤이다.

System.Windows.Controls.Ribbon 어셈블리 참조 추가

3. 리소스에 버튼 이미지 추가

32x32 크기의 버튼 이미지를 리소스에 추가하자. 리소스에 버튼 이미지를 추가하는 방법은 프로젝트 > 속성 > 리소스 에서 추가하면 된다. 리소스에 추가된 화면은 아래 그림을 확인하자.

4. 리소스 이미지를 프로젝트에 포함

이 과정이 아주 중요하다. 리소스 이미지를 프로젝트에 포함시켜야 추후 배포시 이미지를 별도로 배포하지 않아도 리본의 버튼 이미지가 제대로 나오게 된다. 방법은 솔루션 탐색기 > 프로젝트 > Resources > 각 이미지의 속성 > 빌드 작업의 값을 Resource로 만들어 주면 된다.

5. 메인 윈도우에 리본 컨트롤 추가

기본 생성된 MainWindow.xaml의 <Grid>...</Grid> 사이에 아래 리본 컨트롤 관련 소스를 넣는다.

<Grid>
    <Ribbon>
        <RibbonTab Header="1번탭">
            <RibbonGroup Header="1번그룹">
                <RibbonButton x:Name="ButtonStart" LargeImageSource="/Resources/Play32x32.png" Label="Start" />
                <RibbonButton x:Name="ButtonStop" LargeImageSource="/Resources/Stop32x32.png" Label="Stop"/>
                <RibbonButton x:Name="ButtonExit" LargeImageSource="/Resources/End32x32.jpg" Label="Exit"/>
            </RibbonGroup>
        </RibbonTab>
    </Ribbon>
</Grid>

직관적인 XML문서이니 개념만 받아들이면 어렵지 않게 이해가 가능할 것이다. 핵심은 <Ribbon> 태그로 리본을 추가하고, <RibbonTab>으로 리본 안에 탭을 하나 추가한 후, <RibbonGroup>으로 탭 안에 그룹을 추가하는 것이다.

그후 이 그룹에 버튼을 3개 넣어주고, 각 버튼의 이미지를 리소스에서 불러와서 넣어주면 된다. 각 버튼을 눌렀을때의 동작은 조금 후에 알아보자.

6. 메인 윈도우를 리본 윈도우로 변경

이 시점에 실행해보면 아래 그림과 같이 타이틀바와 리본 툴바가 서로 어울리지 못해서 아주 어색한 화면이 나오게 된다. 이유는 일반 윈도우에 리본을 올렸기 때문이며, 이 문제를 해결하기 위해 메인 윈도우를 리본 윈도우로 변경해야 한다.

방법은 간단하다. MainWindow.xaml의 맨 앞에 있는 <Window...>...</Window>를 <RibbonWindow...>...</RibbonWindow>으로만 변경해주면 된다. 이로써 리본 툴바와 어울리는 윈도우로 변경되었다. 아래는 MainWindow.xaml 전체 소스이다.

<RibbonWindow x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfRibbonTest"
        mc:Ignorable="d"
        Title="Ribbon Test" Height="450" Width="500">
    <Grid>
        <Ribbon>
            <RibbonTab Header="1번탭">
                <RibbonGroup Header="1번그룹">
                    <RibbonButton x:Name="ButtonStart" LargeImageSource="/Resources/Play32x32.png" Label="Start" />
                    <RibbonButton x:Name="ButtonStop" LargeImageSource="/Resources/Stop32x32.png" Label="Stop"/>
                    <RibbonButton x:Name="ButtonExit" LargeImageSource="/Resources/End32x32.jpg" Label="Exit"/>
                </RibbonGroup>
            </RibbonTab>
        </Ribbon>
    </Grid>
</RibbonWindow>

7. 버튼 클릭 동작

MainWindow.xaml.vb에서 각 버튼을 눌렀을때 이벤트를 작성하자.

Private Sub ButtonStart_Click(sender As Object, e As RoutedEventArgs) Handles ButtonStart.Click
    MsgBox("Start Clicked!!!")
End Sub

Private Sub ButtonStop_Click(sender As Object, e As RoutedEventArgs) Handles ButtonStop.Click
    MsgBox("Stop Clicked!!!")
End Sub

Private Sub ButtonExit_Click(sender As Object, e As RoutedEventArgs) Handles ButtonExit.Click
    MsgBox("Exit Clicked!!!")
End Sub

마치며...

이렇게 WPF에서 리본 컨트롤을 사용하는 방법에 대해서 간략히 알아봤다. 여기서는 리본 버튼만 해봤지만, 콤보상자나 체크박스 등 리본에 들어갈 수 있는 모든 컨트롤의 사용이 가능하니 관심 있으신 분들께서는 하나씩 직접 구현하며, 리본 컨트롤과 익숙해지도록 해보자.

ps. 리본탭과는 별개로 1번탭 왼쪽 옆에 붙어있는 아래쪽 화살표를 누르면 나오는 부분을 리본 어플리케이션 메뉴라고 하는데 이 부분의 소스는 간략하게 추가하니 이 부분도 참고해보도록 하자. XAML 소스의 <Ribbon> 태그 아래, <RibbonTab> 태그 바로 위에 적어주면 된다.

<Ribbon.ApplicationMenu>
   <RibbonApplicationMenu>
      <RibbonApplicationMenuItem Header="Start" ImageSource="/Resources/Play32x32.png"/>
      <RibbonApplicationMenuItem Header="Stop" ImageSource="/Resources/Stop32x32.png"/>
      <RibbonApplicationMenuItem Header="End" ImageSource="/Resources/End32x32.jpg"/>
   </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>

ps2. 버튼 이미지는 아래 이미지를 사용하면 된다.

저작자표시

VB.NET