I’ve been spending some time recently to learn WPF a bit better including the MVVM pattern to encourage the separation of concerns between the view and the logic behind it.

It’s been a steep learning curve (to say the least!) but today I spent a bit of time looking into getting an Office-esque ribbon bar onto the main window of my dummy application. At first I wasn’t too sure, but I soon realised it’s not too dissimilar to any other button.

First of all, you need to add the Ribbon bar onto the screen (or enter the following XAML:

<Ribbon>
    <RibbonTab header="A random tab name">
        <RibbonGroup header="A random group name">
            <RibbonButton largeimagesource="ImageLocation\Image.png" label="Button caption" command="{Binding ClickTheButton}">
        </RibbonGroup>
    </RibbonTab>
</Ribbon>

Of course, the binding to the ViewModel is already configured for the View at this stage :-)

Then, I added the following C# code to the ViewModel:

public ICommand ClickTheButton
{
    get { return new RelayCommand(new Action(this.ClickTheButtonExecute), this.CanClickTheButtonExecute); }
}

private void ClickTheButtonExecute()
{
    // Your code goes here to respond to the button click
}

private bool CanClickTheButtonExecute()
{
    // Logic would go here to decide whether the button should be enabled or not.
    // Hard coding a return value of true will mean the button will always be enabled.
    return true;
}

You’ll notice that I’ve been using a class called “RelayCommand”. I got this from an article by Josh Smith for MSDN Magazine.

Hopefully this will help a few people out.