WPF Ribbon Controls


Усиленно пытался разобраться с Ribbon для WPF. Проект пока находится в CTP версии. Но если кому-то тоже хочется потрогать, то смотри сюда. Пока им пользоваться не очень удобно, но я надеюсь, что в финале будет удобнее.
Поделюсь опытом.
Для начала создадим WPF проект (я пользуюсь 2008 студией и языком C#) я назвал его
Ribbon.
Теперь добавляем в проект сборку (для этого её надо было скачать 🙂 ):
    В Обозревателе решений(Solution explorer) правой кнопкой кликаем по папке Ссылки(Referencies)
на вкладке Обзор(Browse) ищем куда мы установили скачанный нами проект, находим там RibbonControlsLibrary.dll и жмем OK.

Теперь переходим к окну. По умолчанию файл Window1.xaml
Открываем XAML-код и видим примерно следующее:

<Window x:Class="Ribbon.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot; Title="Window1" Height="300" Width="300">

<Grid> 

</Grid>

</Window>

Меняем тег Window на r:RibbonWindow, и в его атрибутах добовляем пространсво имен Ribbon:

<r:RibbonWindow x:Class="Ribbon.Window1" xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot; Title="Window1" Height="300" Width="300">

<Grid>

</Grid>

</r:RibbonWindow>

Теперь переходим в код на C# Window1.xaml.cs там тоже добавляем пространство имен:

using Microsoft.Windows.Controls.Ribbon;

и меняем родительски класс для нашего окна:

public partial class Window1 : RibbonWindow

Использование RibbonWindow  вместо обычного, позволяет полностью использовать возможности Ribbon-интерфейса.

теперь перейдем в XAML-код.
добавим вкладку
 

<Grid>

<r:Ribbon>

<r:RibbonTab Label="Вкладка" >

</r:RibbonTab>

</r:Ribbon>

</Grid>

</r:RibbonWindow>

И запустим для проверки(F5)
И мы не увидим никаких вкладок! Дело в том что если ширина окна меньше либо равна 300, то Ribbon просто скрывается (проверте в офисе 🙂 )
Чуть-чуть растянем окно, и увидим нашу вкладку.

Что ж теперь добавим на вкладку кнопку.
Внутрь RibbonTab:

<r:RibbonTab Label="Вкладка" >

 <r:RibbonGroup>

 <r:RibbonButton>

 </r:RibbonButton>

 </r:RibbonGroup>

 </r:RibbonTab>

после этого дизайнер может начать выдавать ошибки, но программа компилируется.
Вот теперь начинается самое хитрое, чтобы кнопке можно было добавить иконку, надпись, и функционал внутрь её нужно добавить команду:

<r:RibbonButton>

 <r:RibbonButton.Command>

 <r:RibbonCommand LabelTitle="кнопка" LargeImageSource="image.jpg" Executed="RibbonCommand_Executed" />

</r:RibbonButton.Command>

</r:RibbonButton>

Давайте разберемся LableTitle это надпись на кнопке, LargeImageSource – путь к картинке, которую поместим на кнопку. Картинка должна быть 32×32, есть еще и SmallImageSource для нее лучше подходит картинка 16×16. Executed – тут прописывается функция обработки нажатия. Если вы пишете сами, то функция вставиться сама, как сюда, так и в C# код:

private void RibbonCommand_Executed(object sender, ExecutedRoutedEventArgs e)

{

 

}

Ну что ж. Добавим сюда простой код:

MessageBox.Show("Hello world");

Запускаем. У меня все работает :).

Реклама
Comments
5 комментариев to “WPF Ribbon Controls”
  1. Коллега, спасибо огромное! Именно это я и искал, а то весь вечер нет лопатил, пока на твой пост не наткнулся! Спасибо..

    • Спасибо, но по-моему он уже немного не актуален 🙂

      • Не актуален он станет после того, как Майкрософт разработает новый интерфейс, а пока. =)

        • Нет, просто статья про ленту, которая представленна на codeplex. коро выйдет .NET4 и почти сразу с ним оффициальный Ribbon. Работа с ним может несколько отличаться.

          • Посмотрим.. хотя RibbonX я скачавал оффициально с Майкрософта.. Вместе с бетками .NET 4 и визуал студии 2010

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: