Microsoft released the Office UI licensing program for software developers who wish to implement the Office UI as a software component and/or incorporate the Office UI into their own applications. You can use the ribbon control in your WPF/ Silverlight apps to get all the features of office 2010 UI ribbon control in your applications. We’ll see some of these features and samples to create a similar UI in a WPF application. I have used MVVM light as an MVVM framework in my samples.
The UI ribbon control is available for free download from this link. Once you have downloaded the source code or binaries, add a reference to the RibbonControlsLibrary to your WPF project. You can now use the controls that are part of this library in your application to create the UI. In this post we’ll see how to use the ribbon control and create an Application menu in a WPF application.
In your XAML code add a new DockPanel and a ribbon control with Dock=Top to dock the ribbon to the top of the window.
<Window x:Class=”Office2010RibbonUI.Samples.OfficeUISampleView”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:my=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon”
Title=”Office2010 UI”
Height=”500″ ResizeMode=”NoResize”
Width=”600″
DataContext=”{Binding [OfficeUISample], Source={StaticResource Locator}}” Icon=”/Office2010RibbonUI.Samples;component/Images/Santa-Claus.png”>
<DockPanel LastChildFill=”True”>
<my:Ribbon Height=”100″ DockPanel.Dock=”Top”>
</my:Ribbon>
<Grid DockPanel.Dock=”Bottom”>
</Grid>
</DockPanel>
</Window>
Next add application menu items to the ribbon control.
<my:Ribbon Height=”100″ DockPanel.Dock=”Top”>
<my:Ribbon.ApplicationMenu>
<my:RibbonApplicationMenu SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/Sphere_Glossy.png” AllowDrop=”True” KeyTip=”C” Height=”25″ Width=”40″>
<my:RibbonApplicationMenuItem ImageSource=”/Office2010RibbonUI.Samples;component/Images/Santa%27s-Hat.png”
Command=”{Binding XmasCapCommand}” Width=”140″ Header=”XMas Cap”
HorizontalAlignment=”Left”
Margin=”10 0 0 0″/>
<my:RibbonApplicationMenuItem ImageSource=”/Office2010RibbonUI.Samples;component/Images/Rudolph.png”
Command=”{Binding RudolphCommand}” Width=”140″ Header=”Rudolph”
HorizontalAlignment=”Left”
Margin=”10 0 0 0″/>
<!–Ribbon seperator–>
<my:RibbonSeparator />
<my:RibbonApplicationMenuItem ImageSource=”/Office2010RibbonUI.Samples;component/Images/SantasBag.png”
Command=”{Binding SantasBagCommand}” Width=”140″ Header=”Santas Bag”
HorizontalAlignment=”Left”
Margin=”10 0 0 0″/>
</my:RibbonApplicationMenu>
</my:Ribbon.ApplicationMenu>
</my:Ribbon>
You can also add split menu items to the main group.
If you also use the code given below to show items in the auxiliary panel of the application menu.
<my:RibbonApplicationMenu.AuxiliaryPaneContent>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”20″ />
<RowDefinition Height=”*” />
</Grid.RowDefinitions>
<my:RibbonSeparator Label=”Recent Commands” />
<ItemsControl Grid.Row=”1″ ItemsSource=”{Binding RecentCommands}”>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text=”{Binding}” Margin=”5″ />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</my:RibbonApplicationMenu.AuxiliaryPaneContent>
My View model for the view looks like
public class OfficeUISampleViewModel : ViewModelBase
{
public OfficeUISampleViewModel() { }
public ICommand XmasCapCommand
{
get
{
if (_xmasCapCommand == null)
_xmasCapCommand = new RelayCommand(() => MessageBox.Show(“XMas command executing…”));
return _xmasCapCommand;
}
}
public ObservableCollection<string> RecentCommands
{
get
{
return new ObservableCollection<string> { “Santas Bag”, “Rudolp” };
}
}
ICommand _xmasCapCommand;
}

The Office 2010 UI Ribbon control is similar to the Tab container and contains tabs, you can use to group your commands/ module commands into these ribbon tabs. The ribbon tab supports usage of ribbon implementation of almost all the controls in the library. To add a ribbon tab to the application we created in the previous post you need to add a ribbon tab below the application menu item.
<my:RibbonTab Header=”Gifts” KeyTip=”G” Height=”95″>
</my:RibbonTab>
Inside the tab you can have groups with controls inside each group.
<my:RibbonGroup Height=”83″ VerticalAlignment=”Top” >
<my:RibbonButton LargeImageSource=”/Office2010RibbonUI.Samples;component/Images/Christmas-Bells.png” Label=”Bells” />
<my:RibbonButton LargeImageSource=”/Office2010RibbonUI.Samples;component/Images/Star.png” Label=”Golden Star” />
<StackPanel Orientation=”Vertical”>
<my:RibbonButton SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/Sphere_Glow.png” Label=”Sphere” />
<my:RibbonButton SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/SantasBag.png” Label=”Bag” />
<my:RibbonButton SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/Sock.png” Label=”Sock” />
</StackPanel>
<my:RibbonSplitButton LargeImageSource=”/Office2010RibbonUI.Samples;component/Images/Gift.png” Label=”Gifts”>
<my:RibbonMenuItem Header=”Gift1″ />
<my:RibbonMenuItem Header=”Gift2″ />
<my:RibbonMenuItem Header=”Gift3″ />
</my:RibbonSplitButton>
</my:RibbonGroup>
I have added some buttons and a split button to this group. You can also embed combo boxes and checkboxes inside ribbon groups like.
<my:RibbonGroup Width=”176″ Height=”83″ VerticalAlignment=”Top”>
<StackPanel Orientation=”Horizontal” VerticalAlignment=”Center”>
<StackPanel Orientation=”Vertical”>
<my:RibbonComboBox ItemsSource=”{Binding FormattingOptions}” DisplayMemberPath=”Option”></my:RibbonComboBox>
<my:RibbonCheckBox Label=”Check one” />
<my:RibbonCheckBox Label=”Check two” />
</StackPanel>
<StackPanel Orientation=”Vertical”>
<my:RibbonToggleButton Label=”Bold” VerticalAlignment=”Top” Margin=”10 0 0 0″ HorizontalAlignment=”Left” />
<my:RibbonToggleButton Label=”Italics” VerticalAlignment=”Top” Margin=”10 0 0 0″ HorizontalAlignment=”Left” />
<my:RibbonToggleButton Label=”Strikeout” VerticalAlignment=”Top” Margin=”10 0 0 0″ HorizontalAlignment=”Left” />
</StackPanel>
</StackPanel>
</my:RibbonGroup>
The final implementation looks like
Quick access toolbar buttons are added as
<my:Ribbon.QuickAccessToolBar>
<my:RibbonQuickAccessToolBar>
<my:RibbonButton SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/Gift.png” />
<my:RibbonButton SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/Star.png” />
<my:RibbonButton SmallImageSource=”/Office2010RibbonUI.Samples;component/Images/SantasBag.png” Label=”Pick from bag” />
</my:RibbonQuickAccessToolBar>
</my:Ribbon.QuickAccessToolBar>
