Przygotowanie Ribbona krok po kroku.

Stwórzmy najpierw testową aplikację WPF i zmodyfikujmy nieco główny widok:

<Window x:Class="RibbonExampleApplication.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>
   </Grid>
</Window>

Po pobraniu i rozpakowaniu Ribbona z CodePlex powinniśmy otrzymać bibliotekę RibbonControlsLibrary.dll. Należy ją dodać do referencji naszej aplikacji.

W widoku natomiast należy dodać nowy namespace:

xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

Od tej pory powinniśmy mieć możliwość dodania Ribbona:

<Window x:Class="RibbonExampleApplication.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
   Title="MainWindow" Height="350" Width="525">
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="auto" />
         <RowDefinition />
      </Grid.RowDefinitions>

      <r:Ribbon />
   </Grid>
</Window>

Po wpisaniu powyższego kodu na podglądzie zobaczymy:

Ribbon jako UserControl.

Poniższa wstążka zajmuje ok. 400 linii kodu w xaml’u.

By nie dokładać kolejnych linii kodu do (i tak już pewnie przepełnionego) widoku proponuję przenieść całego Ribbona do UserControl, dzięki czemu w widoku ograniczymy się do jednej linii odpowiedzialnej za wstawienie wstążki, a cały jej projekt i metody znajdą się w kodzie kontrolki.

Opis elementów.

Każda wstążka składa się z:

• Przycisku aplikacyjnego (Application button),
• Paska narzędziowego szybkiego dostępu (Quick access toolbar),
• Zakładek (Tabs).

Zakładki składają się z grup (Groups). W grupach natomiast mogą znaleźć się:

• RibbonButton,
• RibbonCheckBox,
• RibbonComboBox,
• RibbonControlGroup,
• RibbonDropDownButton,
• RibbonLabel,
• RibbonSeparator,
• RibbonSplitButton,
• RibbonToggleButton,
• RibbonTextBox.

Themes.

Ribbon standardowo przyjmuje motyw z Windows 7. Jeśli chcemy korzystać z motywów Office 2007 do Resource’ów Window/UserControl należy dopisać:

<Window.Resources>
   <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml"/>
      </ResourceDictionary.MergedDictionaries>
   </ResourceDictionary>
</Window.Resources>

Do wyboru mamy:

• Office2007Blue.xaml,
• Office2007Black.xaml,
• Office2007Silver.xaml.

Budujemy Ribbona.

Oto co chcielibyśmy uzyskać:

Najpierw w UserControl.Resources zdefiniujmy sobie komendy, z których chcielibyśmy korzystać, np.:

<r:RibbonCommand
   x:Key="NewCommand"
   LabelTitle="New"
   CanExecute="RibbonCommand_CanExecute"
   LargeImageSource="Images/1272714616_document_48.png"
 />

<r:RibbonCommand
   x:Key="CopyCommand"
   LabelTitle="Copy"
   CanExecute="RibbonCommand_CanExecute"
   SmallImageSource="Images/1272714797_right_64.png"
 />

RibbonButton.

RibbonButton to podstawowy przycisk. Pierwsza zakładka:

<r:Ribbon>
  <r:RibbonTab Label="Main">
    <r:RibbonGroup Command="{StaticResource FileGroupCommand}">
      <r:RibbonButton Command="{StaticResource NewCommand}" />
      <r:RibbonButton Command="{StaticResource OpenCommand}" />
      <r:RibbonButton Command="{StaticResource SaveCommand}" />
    </r:RibbonGroup>
  </r:RibbonTab>
</r:Ribbon>

Kod ten spowoduje powstanie pierwszej grupy przycisków. Prawda, że proste?

RibbonDropDownButton.

RibbonDropDownButton to przycisk zawierający listę rozwijaną. Można go utworzyć za pomocą:

<r:RibbonDropDownButton Command="{StaticResource PasteListCommand}">
  <r:RibbonMenuItem Command="{StaticResource PasteCommand}"/>
  <r:RibbonMenuItem Command="{StaticResource PasteSpecialCommand}"/>
</r:RibbonDropDownButton>

Rozmiar przycisków.

Przyciski domyślnie mają rozmiar large, ale można to zmienić, by uzyskać efekt pokazany na grupie Clipboard:

<r:RibbonGroup Command="{StaticResource ClipboardGroupCommand}">
  <r:RibbonGroup.GroupSizeDefinitions>
    <r:RibbonGroupSizeDefinitionCollection>
      <r:RibbonGroupSizeDefinition>
        <r:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
        <r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
        <r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
        <r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
      </r:RibbonGroupSizeDefinition>
    </r:RibbonGroupSizeDefinitionCollection>
  </r:RibbonGroup.GroupSizeDefinitions>

  <r:RibbonDropDownButton Command="{StaticResource PasteListCommand}" />

  <r:RibbonButton Command="{StaticResource CopyCommand}" />
  <r:RibbonButton Command="{StaticResource CutCommand}" />
  <r:RibbonButton Command="{StaticResource PaintCommand}" />
</r:RibbonGroup>

RibbonWindow.

Jako ostatni element chciałbym wymienić RibbonWindow. Z kontrolki nie trzeba korzystać, ale pozwala m.in na dodanie toolbar‘a do okna aplikacji. Poniżej przedstawiam dwa screen’y, pierwszy przedstawia RibbonWindow, natomiast drugi – tradycyjne Window:

Podsumowanie.

Zaprezentowany RibbonControlsLibrary jest tylko przykładową implementacją Ribbona. Brakuje jej kilku elementów m.in. galerii, ale cytując Ribbon V1 Roadmap:

The WPF controls team is currently hard at work completing V1 of the Ribbon control. In addition to the features already completed in the CTP, V1 will include new features and design change.

wpf.codeplex.com

Pod powyższym linkiem można przeczytać o kilku dość istotnych zmianach, które autorzy chcieliby wprowadzić m.in.: usunięcie RibbonComman, dodanie nowych kontrolek (Gallery, SplitButton, Spinner), Key Tips oraz wiele innych.

Mimo dość optymistycznego wpisu autorów, od ponad roku nie pojawiła się żadna aktualizacja (powyższy wpis powstał 7. stycznia 2009). Jak tylko dowiem się o jakiś aktualizacjach to na pewno o nich tutaj wspomnę .

Jako alternatywę mogę podać Fluent Ribbon Control Suite, który posiada np. galerię (oraz pewnie kilka innych elementów) przy czym zdaje się być rozwijany (ostatnia wersja ujrzała światło dzienne 19. kwietnia br.).

To byłoby zasadniczo wszystko, czym chciałbym się podzielić w tym poście . Powodzenia w tworzeniu Ribbonowych aplikacji!