In questo fine settimana ho deciso di approfondire la Ribbon toolbar di Office, per poterla riutilizzare nelle mie interfaccie.

Primo passo scaricare la ribbon toolbar disponibile su codeplex a questo indirizzo : WPF Ribbon Preview

Secondo passo da compiere è sicuramente scaricare l' handsOnLab presente nel sito dedicato al mondo client di microsoft(www.windowsClient.net) nella sezione learn che illustra,oltre alla Ribbon anche le nuove features del WPF Toolkit ed in particolare del Datagrid.

Iniziamo a capire il suo funzionamento.

Prima di tutto è necessario dire che la Ribbon è governata attraverso i Ribbon Command che permettono di impostare per ogni sua sezione
delle caratteristiche comuni. 
Le RibbonCommand sono composte da :

    a) LabelTitle
    b) LabelDescription

    c) ToolTipTitle

    d) ToolTipDescription

    e) ToolTipImageSource

    f) SmallImageSource

    g) LargeImageSource

    h) ToolTipFooterTitle

    i) ToolTipFooterDescription

    l) ToolTipFooterImageSource

     

Iniziamo ad analizzare le varie sezioni della Ribbon attraverso il suo codice XAML.

Istanziamo una nuova ribbon toolbar all'interno della nostra applicazione :

<r:Ribbon >

</r:Ribbon>

Una prima sezione è sicuramente la Application Menu , ovvero il pulsante dove sono possibili compiere le principali operazioni come il salvataggio del documento, la stampa ecc..
Vediamo come configurarla attraverso il codice :

<r:Ribbon.ApplicationMenu>

<r:RibbonApplicationMenu>

Definizione dei command per la Application Menu

<r:RibbonApplicationMenu.Command>

<r:RibbonCommand

Executed="OnCloseApplication"

LabelTitle="Application Button"

LabelDescription="Close the application."

SmallImageSource="images/Coins.png"

LargeImageSource="images/Coins.png"

ToolTipTitle="Personal Finance Manager"

ToolTipDescription="Click here to open or save a checkbook register." />

</r:RibbonApplicationMenu.Command>

</r:RibbonApplicationMenu>

</r:Ribbon.ApplicationMenu>

Come detto in precedenza ogni sezione della Ribbon viene configurata attraverso i RibbonComand che ne permettono una ampia personalizzazione.

Una volta definito l'aspetto del pulsante è necessario inserire al suo interno i vari Items che andranno a comporre il menù.

Per fare questo è necessario definire un RibbonApplicationMenuItem per ogni elemento del menù, ed attraverso i suoi RibbonCommand definirne il
suo aspetto.

<r:RibbonApplicationMenuItem>

<r:RibbonApplicationMenuItem.Command>

<r:RibbonCommand

LabelTitle="_Close"

LabelDescription="Close the Application"

Executed="OnCloseApplication" />

</r:RibbonApplicationMenuItem.Command>

</r:RibbonApplicationMenuItem>


Definito il menù principale, passiamo a definire la vera RibbonToolbar. La Toolbar si divide in Tabs - Group - Controls

Le Tabs vengono utilizzate per inserire delle funzionalità comuni ( come era per le voci File,Modifica,Visualizza dei vecchi menù)
I Groups vengono usati all'interno delle tabs per suddividere controlli che sono similiari nelle loro funzioni
Controls sono i veri e propri pulsanti che vengono visualizzati.

I Controls possono essere di diverso tipo :

  • RibbonButton
  • RibbonCheckBox
  • RibbonToggleButton
  • RibbonDropDownButton
  • RibbonSplitButton
  • RibbonComboBox
  • RibbonTextBox
  • RibbonLabel
  • RibbonSeparator
  • RibbonToolTip

I quali permettono di costruire delle Toolbar con il Look&Feel stile Office 2007 di alta qualità.

Come esempio andiamo ad inserire un RibbonButton all'interno della nostra ToolBar.

Per prima cosa è necessario creare un Tab

<r:RibbonTab Label="Banking">

</r:RibbonTab>


All'interno del Tab inseriamo il nostro Group

<r:RibbonTab Label="Banking">

<r:RibbonTab.Groups>

<r:RibbonGroup>

</r:RibbonGroup>

</r:RibbonTab.Groups>

I ribbon Group, possono essere formattati attraverso delle proprietà che ne consentono di definire come i controlli verranno
visualizzati al suo interno. Questo può essere effettuato attraverso la definizione dei GroupSizeDefinitions.

A questo punto inseriamo il nostro RibbonButton :

<r:RibbonButton Name="RibbonButton1" >
                                <r:RibbonButton.Command>
                                    <r:RibbonCommand
                                        LargeImageSource="/img/softwareD_32x32.png"
                                        LabelTitle="Help"
                                        >
            </r:RibbonCommand>
         </r:RibbonButton.Command>
</r:RibbonButton>


Così faccendo possiamo andare a costruirci la nostra Ribbon Toolbar che ci consente di dare un aspetto molto professionali alle nostre applicazioni.

Per  maggiori informazioni rimando al sito di windowsclient.net dove, come detto in precedenza, è possibile scaricare un piccolo Hands-On Lab e il suo
sorgente dove vengono descritte tutti i passaggi su come configurare il WPF Toolkit e la RibbonToolbar.

What’s Coming in WPF: Datagrid, Ribbon, and VSM