Styling the Ribbon Control

Apr 1, 2010 at 6:40 PM

I am evaluating the Fluent Ribbon, and so far, I am impressed. Nice work! I have one question: Let's say I want to restyle the Ribbon so that has a background gradient similar to the Word 2010 Ribbon. I already have the gradient I need--I grabbed it from Word using Expression Blend's eyedropper. So, my question relates only to the Fluent Ribbon: How do I restyle the Ribbon to apply my gradient to all tabs (other than the backstage tab)? Thanks for your help.

Apr 1, 2010 at 8:09 PM
Edited Apr 1, 2010 at 10:00 PM

I think I found my answer--the Theme packaged in the Fluent Ribbon is actually an Office 2010 theme, with variations for Blue, Silver, and Black (the Office 2010 colors). So, the simplest way to style the toolbar for Office 2010 blue is to change the Resource Dictionary specified in the App.xaml pack URL from Silver.xaml to Blue.xaml.

I noticed that the ColorsBlue.xaml resource dictionary was empty, so I populated it with some brushes sampled from Office 2010. It's a pretty close match for Office 2010:

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="RibbonTopBorderBrush" Color="#FFEEF5FD"/>
    <LinearGradientBrush x:Key="RibbonBackgoundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFEBF3FC" Offset="0"/>
        <GradientStop Color="#FFD8E4F2" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ActiveTabBackgroundBrush" Color="#FFEEF5FD"/>
    <LinearGradientBrush x:Key="GroupSeparatorBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE2ECF7" Offset="0"/>
        <GradientStop Color="#FF93A7C3" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GroupSeparatorBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF0F6FC" Offset="0"/>
        <GradientStop Color="#FFEBF1F7" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="DefaultFontBrush" Color="#FF1E395B"/>
    <SolidColorBrush x:Key="GroupBoxFontBrush" Color="#FF384E73"/>
    <LinearGradientBrush x:Key="GroupHoverBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFEDF4FC" Offset="0"/>
        <GradientStop Color="#FFDCE7F4" Offset="1"/>
    </LinearGradientBrush>

</ResourceDictionary>
Coordinator
Apr 6, 2010 at 10:15 AM

You may be interested that the latest release v1.1 (http://fluent.codeplex.com/releases/view/43145) includes all Office 2010 styles (silver, blue and black).

Daniel

Apr 6, 2010 at 11:43 AM

That's great--thanks. I think I am going to use the Ribbon in my next WPF project