Telerik RadRibbonView Example (리본바 메뉴 예제)

Telerik을 리본바 메뉴 윈도우를 만들어 보았다.

홈페이지의 Getting Started를 보면 쉽게 만들수 있지만 나처럼 WPF, Telerik 초보자를 위해서 만드는 과정을 정리해 본다. 잊으면 나중에 다시 볼 수 있도록~

https://docs.telerik.com/devtools/wpf/controls/radribbonview/gettingstarted

WPF RibbonView | Getting Started | Telerik UI for WPF

1. 새 프로젝트 생성

MSVS 2017 사용, Telerik 버전 2021.3.1109.42 사용

빈 프로젝트를 만든다.

 

2. 소스 코드 확인

namespace TelerikWpfRadRibbonView
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

위와 같이 만들어진다. 

우리는 RadRibbonWindow를 사용하기 때문에 아래와 같이 소스코드를 변경한다.

    public partial class MainWindow : RadRibbonWindow
    {
        static MainWindow()
        {
            RadRibbonWindow.IsWindowsThemeEnabled = false;
        }

        public MainWindow()
        {
            InitializeComponent();
        }
    }

3. XAML 확인

초기 생성된 소스는 아래와 같다.

<Window x:Class="TelerikWpfRadRibbonView.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Height="350" Width="525">
        <Grid>
                
        </Grid>
</Window>

소스 수정 전에 참조에 필요한 DLL을 추가한다.

Window를 RadRibbonWindow로 변경을 한다. 아래와 같이 수정을 한다.

그리고 예제 페이지(https://docs.telerik.com/devtools/wpf/controls/radribbonview/gettingstarted)에 있는 소스를 복사 한다.

<telerik:RadRibbonWindow x:Class="TelerikWpfRadRibbonView.MainWindow"
                       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                       xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                       xmlns:local="clr-namespace:TelerikWpfRadRibbonView"
                       Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <telerik:RadRibbonView ApplicationButtonContent="File"                                
                               ApplicationName="RadRibbonView Sample" 
                               Title="Untitled">
            <telerik:RadRibbonView.QuickAccessToolBar>
                <telerik:QuickAccessToolBar>
                    <telerik:RadRibbonButton SmallImage="images/save.png" telerik:RadToolTipService.ToolTipContent="Save"/>
                    <telerik:RadRibbonButton SmallImage="images/undo.png" telerik:RadToolTipService.ToolTipContent="Undo"/>
                    <telerik:RadRibbonButton SmallImage="images/print.png" telerik:RadToolTipService.ToolTipContent="Print"/>
                </telerik:QuickAccessToolBar>
            </telerik:RadRibbonView.QuickAccessToolBar>
            <telerik:RadRibbonView.Backstage>
                <telerik:RadRibbonBackstage>
                    <telerik:RadRibbonBackstageItem Header="Save" IsSelectable="False" />
                    <telerik:RadRibbonBackstageItem Header="Open" IsSelectable="False" />
                    <telerik:RadRibbonBackstageItem Header="Recent">
                        <StackPanel Margin="10">
                            <TextBlock Text="Recent files:" Margin="0 0 0 5" />
                            <telerik:RadListBox>
                                <telerik:RadListBoxItem Content="Document 1" />
                                <telerik:RadListBoxItem Content="Document 2" />
                                <telerik:RadListBoxItem Content="Document 3" />
                                <telerik:RadListBoxItem Content="Document 4" />
                            </telerik:RadListBox>
                        </StackPanel>
                    </telerik:RadRibbonBackstageItem>
                </telerik:RadRibbonBackstage>
            </telerik:RadRibbonView.Backstage>
            <telerik:RadRibbonView.Items>
                <telerik:RadRibbonTab Header="Home">
                    <telerik:RadRibbonGroup Header="Clipboard">
                        <telerik:RadRibbonButton Text="Copy" />
                        <telerik:RadRibbonSplitButton Text="Paste">
                            <telerik:RadRibbonSplitButton.DropDownContent>
                                <telerik:RadMenu>
                                    <telerik:RadMenuItem Header="Paste" />
                                    <telerik:RadMenuItem Header="Paste from" />
                                </telerik:RadMenu>
                            </telerik:RadRibbonSplitButton.DropDownContent>
                        </telerik:RadRibbonSplitButton>
                    </telerik:RadRibbonGroup>
                    <telerik:RadRibbonGroup Header="Font">
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="View" />
            </telerik:RadRibbonView.Items>
        </telerik:RadRibbonView>

        <Grid x:Name="gridMain" Grid.Row="1" Margin="10">

        </Grid>

        <Grid x:Name="gridStatus" Grid.Row="2">
            <StatusBar>
                <StatusBar.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </StatusBar.ItemsPanel>
                <StatusBarItem>
                    <TextBlock Name="lblCursorPosition" />
                </StatusBarItem>
                <Separator Grid.Column="1" />
                <StatusBarItem Grid.Column="2">
                    <TextBlock Text="c:\path\of\current\file.txt" />
                </StatusBarItem>
                <Separator Grid.Column="3" />
                <StatusBarItem Grid.Column="4">
                    <ProgressBar Value="50" Width="90" Height="16" />
                </StatusBarItem>
            </StatusBar>
        </Grid>
    </Grid>
</telerik:RadRibbonWindow>

위의 소스에는 StatusBar도 함께 추가를 했다.

WPF StatusBar 참고 사이트는 아래의 내용을 이용했다.

https://wpf-tutorial.com/common-interface-controls/statusbar-control/

The WPF StatusBar control - The complete WPF tutorial

image은 프로젝트에 images 폴더를 만들어서 추가를 한다.

이 상태로 빌드를 하면 리본바 메뉴와 상태바가 존재하는 기본 프로그램이 실행된다.

 

4. Theme (테마) 추가

테마를 추가하는 방법은 샘플에도 표기가 되어 있다.

먼저 사용할 테마 DLL을 참조해야 한다.

자동 업데이트를 해서 최신 버전이 아래 경로에 설치가 되어져 있다. 설치 경로는 TELERIK 옵션을 통해 확인한다.

C:\Users\user\AppData\Roaming\Telerik\Updates\Telerik_UI_for_WPF_2021_3_1109_Dev_Hotfix\Binaries.NoXaml\WPF40

 

위의 폴더에 들어가면 Telerik.Windows.Themes.XXX.dll 파일이 존재한다.

사용하고자 하는 파일을 선택해서 Bin/Debug 폴더에 복사한다. 실행파일과 같은 위치에 놓은 것이다.

그리고 참조에 그 파일을 추가한다.

 

아래 소스는 App에 적용하는 부분이다.

<Application x:Class="TelerikWpfRadRibbonView.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    StartupUri="MainWindow.xaml">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.RibbonView.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

위에서 사용한 테마는 Office2019 이다. 다른 테마를 사용하고 싶으면 dll의 이름과 같이 변경을 하면 된다.

 

아래는 샘플 코드이다.

TelerikWpfRadRibbonView.zip

7.80MB