WPF + Ribbon

As it was not easy to find documentation about the Microsoft ribbon, find bellow a synthesis off all I got on internet. Thanks to all contributors. check http://nperf.codeplex.com

The different parts

We will see in details all the ribbon parts as presented below. First of all, we will have a short look at the command definition because it must disappear in the final version as it is not compliant with actual Net commands.

Then, how to define the application menu and the quick access toolbar followed by tabs, group, group sizing and layout, and finally the command controls.

WPF + Theme management

Theme management

 

1.      Create a structure like the next one in the Resource folder of your solution.

<Resources>

                <Themes>

                               <ThemeBlue>

                                               Use here the xaml you need

                               <ThemeRed>

                                               Use here the xaml you need

                               ThemeBlue.xml

                               ThemeRed.xml

 

2.      Fill the ThemeBlue.xml by registering the xaml of the corresponding folder:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;

       <ResourceDictionary.MergedDictionaries>

             <ResourceDictionary                      Source="/RibbonControlsLibrary;component/Themes/Office2007Black.xaml" />

             <ResourceDictionary Source="Black\ExpressionDark.xaml" />

             <ResourceDictionary Source="Black\Windows.xaml" />

       </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

 

3.      Be sure that xaml properties are Page + Do not copy + MSBuild:Compile, so that xaml will be integrated in the final assembly.

 

4.      Load the theme with a function like this, just by passing the required color as a string:

static public void LoadTheme(string themeColor)

{

       Application.Current.Resources =

        (ResourceDictionary)Application.LoadComponent(

                    new Uri(string.Format("Resources\\Themes\\{0}.xaml",

                                                      themeColor), UriKind.Relative));

}

 This works also for files. So you can choose to externalize the xaml, discover by code the files and folder in the <Theme> subdirectory of the application running path

I have updated the code, so that I discover the theme embedded in the resources, and then fill the menu item. No more hard coded

 

check http://nperf.codeplex.com/

WPF + Office Style

I went in trouble for several days with the WPF ribbon and not getting the "office look" because of the rounded border, the title bar, the grip in the status bar….

After several steps forwards or backwards, I finally got a solution! The code is certainly not perfect but the style is quite good!  Check the project ==> http://nperf.codeplex.com/

Office style: the window, the ribbon

1.      Include the library in the main form header

xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

 

2.      In the form, define a grid with 3 rows for ribbon, controls in the middle, status bar at bottom

<Grid>

       <Grid.RowDefinitions>

             <RowDefinition Height="Auto" MinHeight="142.071" />

             <RowDefinition Height="*" />

             <RowDefinition Height="Auto" MinHeight="24.679" />

       </Grid.RowDefinitions>

 

3.      Add the following xaml :

<Border Grid.Row="0" Grid.RowSpan="3" Background="{DynamicResource

       WindowBackgroundBrush}" CornerRadius="5"

       VerticalAlignment="Stretch"       MouseLeftButtonDown="Window_MouseLeftButtonDown"

       BorderThickness="1" BorderBrush="Black"></Border>

This border fills the form with rounded corners.

 

4.      Add the following xaml for the 3 title bar buttons

        <Button Panel.ZIndex="100" Style="{DynamicResource closeButton}" Height="11" Margin="0,7,11,0" Name="closeButton"

                HorizontalAlignment="Right" VerticalAlignment="Top" Click="closeButton_Click"

                ToolTip="Exit"></Button>

        <Button Panel.ZIndex="100" Style="{DynamicResource maximizeButton}" Height="11" Margin="0,7,24,0" Name="maximizeButton"

                HorizontalAlignment="Right" VerticalAlignment="Top" Width="11" Click="maximizeButton_Click"

                ToolTip="Exit"></Button>

        <Button Panel.ZIndex="100" Style="{DynamicResource minimizeButton}" Height="11" Margin="0,7,38,0" Name="minimizeButton"

                HorizontalAlignment="Right" VerticalAlignment="Top" Width="11" Click="minimizeButton_Click"

                ToolTip="Exit"></Button>

 

5.      Handle the events on the ribbon to get the move or expand/reduce event.

private void closeButton_Click(object sender, RoutedEventArgs e)

{

       this.Close();

}

 

private void maximizeButton_Click(object sender, RoutedEventArgs e)

{

       if( this.WindowState == WindowState.Maximized )

             this.WindowState = WindowState.Normal;

       else

             this.WindowState = WindowState.Maximized;

}

 

private void minimizeButton_Click(object sender, RoutedEventArgs e)

{

       this.WindowState = WindowState.Minimized;

}

 

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

       this.DragMove();

}

 

private void TitleBarBorder_MouseDoubleClick(object sender, MouseButtonEventArgs e)

{

       if (this.WindowState == WindowState.Maximized)

             this.WindowState = WindowState.Normal;

       else

             this.WindowState = WindowState.Maximized;

}

 

6.     Add the xaml for the ribbon, the content, etc…

        <r:Ribbon Grid.Row="0" Margin="3,3,3,0" HorizontalAlignment="Stretch" Name="ribbonMain" Title="{Binding Title}"

 

That’s all. You’ve got it.

 If someone find how to put all this in a style, publish ! J

 check the project ==> http://nperf.codeplex.com/