WPF Ribbon interface

Много раз пытался создать приложение с Ribbon интерфейсом - уж очень приятно на него смотреть в том же MS Word, да и внешний вид приложения не нужно перегружать кучей кнопок. Все разделено на вкладки и группы, которые способствуют легкому пониманию какая кнопка за что отвечает.
Во времена Delphi такой интерфейс был весьма удобен, но как и всегда, за такие компоненты компании хотели денежку, не позволительную студенту. Сейчас времена деления на языки и платформы уходят в прошлое. Все стараются дать возможность программисту писать на любой языке, благо, всяческие фреймворки этому способствуют.
Отступлю от ностальгии и вернусь к продуктам Microsoft, поскольку и интерфейс их и компоненты заточены под их студию.

Практика

Подготовка

Теперь о главном! Для создания приложения с Ribbon интерфейсом нам понадобится:

1. Visual studio или любой другой редактор, позволяющий писать WPF приложения
2. Как минимум - начальные познания в WPF
3. Библиотека с Ribbon интерфейсом (можно скачать здесь: http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=11877)

Step-by-step создания приложения

Шаг 1. Для начала запустим Microsoft Visual Studio и создадим новый проект WPF. Поскольку эта статья родилась в процессе работы над проектом, то и названия будут вполне себе настоящие. Проект я назвал GMail.

Шаг 2. Далее, что нужно сделать, что бы все получилось - это добавить ссылку на библиотеку с Ribbon интерфейсом. Нажимаем "Add reference" и ищем system.windows.controls.ribbon dll.

Шаг 3. Следующий шаг - добавим сам Ribbon интерфейс. Для этого в код XAML добавим кусок, который сделает вывод ленты

<Window x:Class="GMail.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Ribbon x:Name="RibbonWin"  SelectedIndex="0">
        </Ribbon>
    </Grid>
</Window>

Шаг 4. Немного разнообразим ленту - добавим много кнопок. Единственное что - картинка будет у всех одна. Это сделано просто для наглядности.

<Window x:Class="GMail.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Ribbon x:Name="RibbonWin"  SelectedIndex="0">
            <!-- Help Pane, located at the right-hand side -->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="Images\gmail.png" />
            </Ribbon.HelpPaneContent>
            <!-- Quick Access Toolbar - located at the upper-left corner -->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton x:Name ="Save" SmallImageSource="Images\gmail.png" />
                    <RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\gmail.png">
                        <RibbonSplitMenuItem Header="Undo 1" />
                        <RibbonSplitMenuItem Header="Undo 2" />
                        <RibbonSplitMenuItem Header="Undo 3" />
                    </RibbonSplitButton>
                    <RibbonSplitButton x:Name="Redo" SmallImageSource="Images\gmail.png" >
                        <RibbonSplitMenuItem Header="Redo 1" />
                        <RibbonSplitMenuItem Header="Redo 2" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <!-- Application Menu, located at the left-hand side (down arrow) -->
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F">
                    <RibbonApplicationMenuItem Header="Options" ImageSource="Images\gmail.png" />
                    <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\gmail.png" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <!-- Ribbon Tab #1: Home -->
            <RibbonTab Header="Home" KeyTip="H" >
                <!-- Home  group-->
                <RibbonGroup x:Name="ClipboardGroup" Header="Home">
                    <RibbonMenuButton LargeImageSource="Images\gmail.png" Label="Paste" KeyTip="V">
                        <RibbonMenuItem ImageSource="Images\gmail.png" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Images\gmail.png" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Images\gmail.png" Label="Cut" KeyTip="X" />
                    <RibbonButton SmallImageSource="Images\gmail.png" Label="Copy" KeyTip="C" />
                    <RibbonButton SmallImageSource="Images\gmail.png" Label="Format Painter" KeyTip="FP" />
                </RibbonGroup>
                <!-- Employee And Payroll group-->
                <RibbonGroup x:Name="Employee" Header="Employee And Payroll">
                    <RibbonMenuButton LargeImageSource="Images\gmail.png" Label="Employee" KeyTip="V">
                        <RibbonMenuItem ImageSource="Images\gmail.png" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Images\gmail.png" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Images\gmail.png" Label="Save" KeyTip="X" />
                    <RibbonButton SmallImageSource="Images\gmail.png" Label="Add" KeyTip="C" />
                </RibbonGroup>
            </RibbonTab>
            <!-- Ribbon Tab #2: -->
            <RibbonTab Header="Insert" KeyTip="I">
            </RibbonTab>
            <!-- Ribbon Tab #3: -->
            <RibbonTab Header="PageLayout" KeyTip="L">
            </RibbonTab>
        </Ribbon>
    </Grid>
</Window>

 Получилось вот что:

Понятно, что не совсем то, что у MS Word.

Шаг 5. Последний штрих - нужно объединить верхнюю полоску меню(кнопки быстрого доступа) с заголовком окна. Это не сложно - всего 4 исправления

1, 2 - Заменить теги <Window> </Window> на <RibbonWindow> </RibbonWindow>

3 - Добавить использование библиотеки  Ribbon

4 - Унаследовать главное окно программы не от Window, а от RibbonWindow

В итоге получим то, к чему стремились:

 Единственное, что не очень удобно - придется отказаться от визуального добавления кнопок в эту ленту. Все придется добавлять через код XAML

Заключение

Вот таким не хитрым способом и почти без кода можно сделать Ribbon интерфейс для своего WPF приложения