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.

 

Commands

As they are going to disappear, just short overview. You can get a lot of example on the net.

Commands are defined in the Window.Resources dictionary and contain properties which are going to be mapped to the controls they bind to, so you don’t have to define the label of each controls where associate the command

1.      Define some commands like bellow in the resource dictionary

<Window.Resources>

 

<!– APPLICATION COMMANDS–>

<r:RibbonCommand

          x:Key=”AppCommand”

          LabelTitle=”NPerf”

          ToolTipFooterDescription=”Press F1 for help”

          ToolTipDescription=”Click here to open, save, close or print projects”

          ToolTipTitle=”NPerf button”

          ToolTipImageSource=”Resources\Images\Autres\main_menu.png”

          LargeImageSource=”Resources\Images\32×32\build.png”

          CanExecute=”CanExecuteAppCommand”

        />

<r:RibbonCommand

          x:Key=”QuitCommand”

          LabelTitle=”Quit”

          ToolTipDescription=”Quit NPerf.”

          ToolTipTitle=”Quit”

          LargeImageSource=”Resources\Images\32×32\exit.png”

          SmallImageSource=”Resources\Images\32×32\exit.png”

          CanExecute=”CanExecuteAppCommand”

          Executed=”OnQuitCommand”

        />

 Application menu

The application menu is the big rounded button on the left/top part of the ribbon. It can contains a tooltip, a command, a menu with commands, a recent file list

Just after the ribbon tag <r:Ribbon, define the following xaml depending your need

2.      Define the following xaml to start the menu

<r:Ribbon.ApplicationMenu>

   

    <r:RibbonApplicationMenu Command=”{StaticResource AppCommand}”>

 

3.      Inside, add this for a recent item list

        <r:RibbonApplicationMenu.RecentItemList>

            <r:RibbonHighlightingList

                MostRecentFileSelected=”ribbonApplicationMenu_MostRecentFileSelected”

                ItemsSource=”{Binding RecentFiles}”

                DisplayMemberPath=”Name” />

        </r:RibbonApplicationMenu.RecentItemList>

 

4.      In the code behind, define the datacontext of the window to the object that contain a “RecentFiles” property. Adjust event handler and “DisplayMemberPath”

             this.DataContext = WorspaceManager.Instance;

5.      Then add “MenuItem” binded to command to define the main application menu

        <r:RibbonApplicationMenuItem Command=”{StaticResource NewProjectCommand}”/>

        <r:RibbonApplicationMenuItem Command=”{StaticResource OpenProjectCommand}”/>

        <r:RibbonApplicationMenuItem Command=”{StaticResource SaveProjectCommand}”/>

        <r:RibbonSeparator/>

        <r:RibbonApplicationMenuItem Command=”{StaticResource QuitCommand}”/>

 

6.     Finish the application menu by the footer definition

        <r:RibbonApplicationMenu.Footer>

            <DockPanel LastChildFill=”False” >

                <r:RibbonButton DockPanel.Dock=”Right” Margin=”2″ Command=”{StaticResource QuitCommand}” />

                <r:RibbonButton DockPanel.Dock=”Right” Margin=”2″ Command=”{StaticResource SaveProjectCommand}” />

            </DockPanel>

        </r:RibbonApplicationMenu.Footer>

 

    </r:RibbonApplicationMenu>

 

 

Quick access toolbar

7.      Then, you can define the Quick Access toolbar

</r:Ribbon.ApplicationMenu>

 

<!– Quick pick menu –>

<r:Ribbon.QuickAccessToolBar>

    <r:RibbonQuickAccessToolBar CanUserCustomize=”True”>

        <r:RibbonButton Command=”{StaticResource NewProjectCommand}” r:RibbonQuickAccessToolBar.Placement=”InCustomizeMenuAndToolBar” />

        <r:RibbonButton Command=”{StaticResource OpenProjectCommand}” r:RibbonQuickAccessToolBar.Placement=”InCustomizeMenuAndToolBar” />

        <r:RibbonButton Command=”{StaticResource SaveProjectCommand}” r:RibbonQuickAccessToolBar.Placement=”InCustomizeMenuAndToolBar” />

        <r:RibbonButton Command=”{StaticResource CloseProjectCommand}”  r:RibbonQuickAccessToolBar.Placement=”InCustomizeMenuAndToolBar” />

    </r:RibbonQuickAccessToolBar>

</r:Ribbon.QuickAccessToolBar>

The property “CanUserCustomize” will display the little arrow next to the quick bar. The placement property allows defining where you want the command to appear.

Tabs, Group, Sizing an layout

<r:RibbonTab Name=”ribbonTabProject” Label=”Project” 

       GroupSizeReductionOrder=”Help,Project,Commands,Assemblies”>

       <r:RibbonGroup Name=”Project” HasDialogLauncher=”True”

                    GroupSizeDefinitions=”{StaticResource RibbonLayout}”>

 

        <r:RibbonGroup.Command>

            <r:RibbonCommand LabelTitle=”Project”/>

        </r:RibbonGroup.Command>

 

        <r:RibbonButton Command=”{StaticResource NewProjectCommand}” />

        <r:RibbonButton Command=”{StaticResource OpenProjectCommand}” />

        <r:RibbonButton Command=”{StaticResource SaveProjectCommand}” />

        <r:RibbonButton Command=”{StaticResource CloseProjectCommand}” />

    </r:RibbonGroup>

The property “HasDialogLauncher” will display the little bottom/right arrow that allow to respond to a dialog corresponding to the “Group

The “GroupSizeReductionOrder” define the group order to reduce or enlarge them when the window size is modified. It’s linked to the “GroupSizeDefinition”, which define different layouts to resize the commands in the group.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s