Using the Office 2010 Ribbon UI in WPF applications – Part 1

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"/>

           

            <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;

}

Next post we’ll see how to add ribbon tabs and items to the ribbon control