Ribbon is silverlight user interface component which organizes toolbar menu like ribbon.

Main classes

Ribbon classes are placed in comapping.silverlight.controls.ribbon.dll and in comapping.silverlight.controls.ribbon namespace.

Main classes:

  • RibbonTabControl is a main control and derives TabControl.
  • RibbonPane implements each tab.
  • RibbonGroup implements grouping of UI elements with a caption.

Usage

Below is an example of defining ribon menu structure in XAML file. It is XAML defining of class ConcreteRibbon that has two tabs and three groups on each tab.

CopyXAML
<UserControl 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:ribbon="clr-namespace:comapping.silverlight.controls.ribbon;assembly=comapping.silverlight.controls.ribbon" mc:Ignorable="d" x:Class="comapping.silverlight.examples.RibbonExample.ConcreteRibbon" d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
    <ribbon:RibbonTabControl>
      <ribbon:RibbonPane Header="First tab">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <ribbon:RibbonGroup x:Name="fileGroup" caption="File" />
          <ribbon:RibbonGroup caption="Second group" />
          <ribbon:RibbonGroup caption="Third group" />
        </StackPanel>
      </ribbon:RibbonPane>
      <ribbon:RibbonPane Header="Second tab">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <ribbon:RibbonGroup caption="First group" />
          <ribbon:RibbonGroup caption="Second group" />
          <ribbon:RibbonGroup caption="Third group" />
        </StackPanel>
      </ribbon:RibbonPane>
    </ribbon:RibbonTabControl>
    </Grid>
</UserControl>

In the constructor of ConcreteRibbon class it can insert some other controls (like buttons, listboxe and others) to ribbon menu. For example, ToolbarButton.

CopyC#
public ConcreteRibbon() {
    InitializeComponent();
    ToolbarButton newButton = new ToolbarButton(
        delegate() { ((Page)App.Current.RootVisual).results.Text += "New button has been clicked.\n"; },
        (Canvas)Utils.loadFromXaml(new Uri("/comapping.silverlight.examples.RibbonExample;component/New.xaml", UriKind.Relative)),
        "New");
    newButton.IsEnabled = true;
    fileGroup.addChild(newButton);

    ToolbarButton openButton = new ToolbarButton(
        delegate() { ((Page)App.Current.RootVisual).results.Text += "Open button has been clicked.\n"; },
        (Canvas)Utils.loadFromXaml(new Uri("/comapping.silverlight.examples.RibbonExample;component/Open.xaml", UriKind.Relative)),
        "Open");
    openButton.IsEnabled = true;
    fileGroup.addChild(openButton);
}

Sample

On our site there is an example of Ribbon's using.

Example project contains three classes:

  • App is the start class of application
  • Page implements main layout of application
  • ConcreteRibbon implements concrete Ribbon menu. General structure of it is described in XAML file.

See Also