La diffusione dell’informatica è ormai capillare, dove i più disparati dispositivi come personal computer, tablet e cellulari permettono di utilizzare applicazioni ed accedere ad Internet in modo semplice e veloce. Il progresso tecnologico ha portato ad avere hardware sempre più compatto, integrato, potente ed efficiente. I cambiamenti e miglioramenti si possono vedere anche per quanto riguarda l’interazione uomo macchina. I benefici maggiori dei miglioramenti delle interfacce si possono vedere soprattutto nelle app per tablet e dispositivi mobili, dove spesso l’interazione con l’utente risulta così semplice ed intuitiva da rendere le funzioni ed i contenuti immediatamente usufruibili.

Per quanto riguarda le applicazioni per personal computer, l’interfaccia è migliorata molto, almeno per le software house che hanno saputo investire nel tempo per aggiornare i propri prodotti alle ultime tecnologie. Uno dei miglioramenti più controversi è stata l’introduzione da parte di Microsoft dell’interfaccia Ribbon in Office 2007. Inizialmente l’accoglienza da parte degli utenti è stata fredda per vari motivi. Dal punto di vista personale credo che, una volta dimenticati i vecchi menù e preso abitudine con il Ribbon, la nuova interfaccia risulta più comoda e funzionale oltre che esteticamente imparagonabile.

In questo articolo andrò a esporre come utilizzare l’interfaccia Ribbon con applicazioni Windows Presentation Foundation (WPF) in linguaggio C#. Come ambiente di sviluppo utilizzo Visual Studio Community Edition 2015 su Windows 10. La versione del .Net framework è 4.6.1, l’ultima disponibile al momento della scrittura dell’articolo. Il controllo Ribbon è direttamente integrato nel .Net framework a partire dalla versione 4.5.

 

Applicazione di esempio

Avviare Visual Studio e creare un nuovo progetto WPF (File – Nuovo – Progetto … – Applicazione WPF) di nome “RibbonApp”. La prima cosa da fare è aggiungere un nuovo riferimento all’assembly con il controllo Ribbon. In “Esplora soluzioni” fare click con il pulsante destro del mouse su “Riferimenti” e selezionare “Aggiungi riferimento …” dal menu.

Ribbon in WPF - Visual Studio Community Edition 2015 - CSharp

Aggiunta riferimento controllo Ribbon

Assicurarsi che nella parte sinistra sia selezionata la voce “Assembly“, quindi nella casella di testo per la ricerca inserire “Ribbon“. Viene visualizzato l’assembly “System.Windows.Controls.Ribbon”. Impostare il flag di spunta sull’assembly, quindi confermare con “Ok”.

Ribbon in WPF - Componente Ribbon

Selezione assembly con il controllo Ribbon

La finestra principale della nostra applicazione deve essere modificata per passare da “Window” a “RibbonWindow” in modo da assicurare la migliore integrazione, in modo particolare per visualizzare i pulsanti di scelta rapida nella barra superiore. La modifica viene effettuata intervenendo sulla prima riga del codice XAML, modificando “Window” in “RibbonWindow”. L’editor di Visual Studio aggiorna automaticamente anche l’ultima riga con il tag di chiusura.

1
2
3
4
5
6
7
8
9
10
11
12
<RibbonWindow x:Class="RibbonApp.MainWindow"
    xmlns:local="clr-namespace:RibbonApp"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
 
    </Grid>
</RibbonWindow>

E’ necessario aggiornare il codice di dichiarazione della classe per ereditare da “RibbonWindow”.

1
2
3
4
5
6
7
8
9
10
namespace RibbonApp
{
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Il controllo Ribbon mette a disposizione diversi componenti: la barra di accesso veloce, il menu applicazione, un pannello per l’help, tabs con raggruppamenti e controlli. Vediamo i vari componenti uno per uno per comprendere a fondo le potenzialità offerte dal controllo Ribbon per migliorare l’interfaccia delle nostre applicazioni.
Come layout generalmente scelgo di utilizzare la griglia, con la barra Ribbon nella prima riga. Il controllo Ribbon viene inserito nel codice XAML con il tag <Ribbon>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<RibbonWindow x:Class="RibbonApp.MainWindow"
        xmlns:local="clr-namespace:RibbonApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
 
        <Ribbon Grid.Row="0">
        </Ribbon>
    </Grid>
</RibbonWindow>

I vari componenti sono inseriti nella ribbon come figli del tag <Ribbon>.

Visual Studio Image Library

Nell’applicazione di esempio di questo articolo utilizzerò diverse icone. Tali icone sono comprese nella Visual Studio Image Library versione 2015. Si tratta di una libreria molto corposa che una volta decompressa occupa circa 3,60 GB di spazio su disco. Sono incluse molto icone utilizzate da Microsoft stessa in Windows, Office e Visual Studio. Tutte le immagini utilizzate nel progetto di esempio sono copiate nella cartella “images”.

Per aggiungere la cartella al progetto, in “Esplora soluzioni” fare click con il pulsante destro del mouse sul progetto “RibbonApp“, quindi selezionare “Aggiungi – Nuova cartella“. E’ necessario ricordarsi di aggiungere le immagini al progetto, in modo che siano riportate in “Esplora soluzioni“, non è sufficiente copiarle nella cartella.

Le immagini utilizzate in questo progetto di esempio sono:

  • HelpApplication_16x.png
  • HelpApplication_64x.png
  • MenuItem_16x.png
  • Settings_16x.png
  • Settings_32x.png
  • Settings_64x.png
  • ShutDown_16x.png
  • ShutDown_32x.png

Il metodo più semplice è quello di effettuare una ricerca per nome nella cartella dove è stata scompattata la Visual Studio Image Library, quindi con il drag & drop inserire i files direttamente nella cartella “images” in “Esplora soluzioni“. In questo modo i files sono copiati nella cartella e anche aggiunti al progetto.

Barra di accesso veloce

E’ possibile integrare dei pulsanti direttamente nella barra superiore della finestra. Tale integrazione è possibile solamente se si utilizza la RibbonWindow al posto di Window, come indicato nel paragrafo precedente. Per definire la barra di accesso veloce si utilizza il tag <Ribbon.QuickAccessToolBar>, quindi il tag <RibbonQuickAccessToolBar>. I pulsanti sono definiti con <RibbonButton>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<RibbonWindow x:Class="RibbonApp.MainWindow"
        xmlns:local="clr-namespace:RibbonApp"v
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
 
        <Ribbon Grid.Row="0">
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="images\ShutDown_16x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                    <RibbonButton SmallImageSource="images\Settings_16x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
        </Ribbon>
    </Grid>
</RibbonWindow>

I parametri da utilizzare sono:

  • SmallImageSource: immagine 16×16 da applicare al pulsante;
  • ToolTipTitleToolTipDescriptionToolTipImageSource: configurazione del tooltip con le indicazioni relative all’azione effettuata alla pressione del pulsante;
  • Click: metodo da eseguire alla pressione del pulsante.

Il tooltip è praticamente obbligatorio, in modo da spiegare all’utente la funzione del pulsante. Si può omettere di dare un nome al pulsante (x:Name) perché generalmente non c’è necessità di interagire a codice se non in fase di gestione della pressione con l’evento “Click“.

Nel codice è necessario inserire il codice di gestione dell’evento “Click” con due metodi “OnExitClick” e “OnOptionsClick“:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
using System.Windows.Controls.Ribbon;
 
namespace RibbonApp
{
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void OnExitClick(object sender, RoutedEventArgs e) { Close(); }
        private void OnOptionsClick(object sender, RoutedEventArgs e) {}
    }
}

Alla pressione del pulsante di chiusura viene chiamato il metodo per uscire dall’applicazione, mentre alla pressione del pulsante relativo alla opzioni si dovrebbe aprire una finestra di dialogo per la configurazione. E’ già possibile compilare l’applicazione per dare un primo sguardo al risultato:

Ribbon in WPF - Applicazione di esempio RibbonQuickAccessToolBar

Applicazione di esempio con RibbonQuickAccessToolBar

Al momento l’applicazione ha praticamente nessuna funzione, comunque è già possibile vedere che la barra di accesso veloce viene integrata nella barra del titolo e che per i pulsante di accesso rapido viene visualizzato il tooltip.

Menu applicazione

Con il controllo Ribbon rimane il concetto di menu, dove però è possibile utilizzare una sola voce con le opzioni principali. Ad ogni voce può essere associata un’icona di medie dimensioni 32×32 ed il tooltip. Le voci possono essere composte ovvero avere delle voci di menu secondarie.

Il menu applicazione viene definito con i tag <Ribbon.ApplicationMenu> e <RibbonApplicationMenu>. Con quest’ultimo tag è possibile configurare i parametri:

  • SmallImageSource: immagine da visualizzare sul pulsante per l’apertura del menu;
  • KeyTip: tasto di selezione rapida per l’apertura del menu.

Le voci di menu sono definite con <RibbonApplicationMenuItem>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<RibbonWindow x:Class="RibbonApp.MainWindow"
        xmlns:local="clr-namespace:RibbonApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
 
        <Ribbon Grid.Row="0">
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="images\ShutDown_16x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                    <RibbonButton SmallImageSource="images\Settings_16x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F" SmallImageSource="images\MenuItem_16x.png">
                    <RibbonApplicationMenuItem Header="Opzioni" ImageSource="images\Settings_64x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                    <RibbonApplicationMenuItem Header="Chiudi" ImageSource="images\ShutDown_32x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
        </Ribbon>
    </Grid>
</RibbonWindow>

I parametri principali sono:

  • Header: testo da visualizzare per la voce di menu;
  • ImageSource: immagine di medie dimensioni 32×32;
  • ToolTipTitleToolTipDescriptionToolTipImageSource: configurazione del tooltip con le indicazioni relative all’azione effettuata alla selezione della voce di menu;
  • Click: metodo da eseguire alla selezione della voce di menu.

Al momento non serve modificare il codice perché i gestori degli eventi “Click” per le due voci di menu sono gli stessi dei due pulsanti configurati sulla barra di accesso rapido. Nell’immagine successiva è possibile vedere l’applicazione in azione con il menu applicazione aperto ed il tooltip per la voce relativa alle opzioni.

Ribbon in WPF - Applicazione di esempio RibbonApplicationMenu

Applicazione di esempio RibbonApplicationMenu

Per un esempio completo è possibile eseguire l’applicazione “Paint” compresa con l’installazione standard di Windows. In particolare è interessante la voce di menu relativa alla stampa, dove la voce principale permette di andare direttamente in stampa mentre le voci secondarie servono per visualizzare l’anteprima o effettuare la configurazione.

Help in linea

Solitamente la applicazioni sono accompagnate dalla guida in linea. Con il controllo Ribbon è possibile aggiungere un pulsante per richiamare la guida in linea. La sezione relativa è definita con il tag <Ribbon.HelpPaneContent>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<RibbonWindow x:Class="RibbonApp.MainWindow"
        xmlns:local="clr-namespace:RibbonApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
 
        <Ribbon Grid.Row="0">
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="images\ShutDown_16x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                    <RibbonButton SmallImageSource="images\Settings_16x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F" SmallImageSource="images\MenuItem_16x.png">
                    <RibbonApplicationMenuItem Header="Opzioni" ImageSource="images\Settings_64x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                    <RibbonApplicationMenuItem Header="Chiudi" ImageSource="images\ShutDown_32x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="images\HelpApplication_16x.png" ToolTipImageSource="images/HelpApplication_64x.png" ToolTipTitle="Guida in linea" ToolTipDescription="Visualizza la guida in linea" />
            </Ribbon.HelpPaneContent>
        </Ribbon>
    </Grid>
</RibbonWindow>

In sostanza si tratta di un pannello orizzontale posto fra la barra del titolo ed i tabs del controllo, dove vengono inseriti uno o più pulsanti da utilizzare per richiamare la guida in linea.

Ribbon in WPF - Help in linea

Help in linea

Per la nostra applicazione di esempio ho utilizzato le icone HelpApplication_16x.png e HelpApplication_64x.png della Visual Studio Image Library.

Tabs e gruppi

Vediamo ora la parte più importante del controllo Ribbon, ovvero i tabs ed i gruppi, dove sono inseriti i pulsanti per accedere alle varie funzionalità dell’applicazione.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<RibbonWindow x:Class="RibbonApp.MainWindow"
        xmlns:local="clr-namespace:RibbonApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
 
        <Ribbon Grid.Row="0">
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="images\ShutDown_16x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                    <RibbonButton SmallImageSource="images\Settings_16x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F" SmallImageSource="images\MenuItem_16x.png">
                    <RibbonApplicationMenuItem Header="Opzioni" ImageSource="images\Settings_64x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                    <RibbonApplicationMenuItem Header="Chiudi" ImageSource="images\ShutDown_32x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="images\HelpApplication_16x.png" ToolTipImageSource="images/HelpApplication_64x.png" ToolTipTitle="Guida in linea" ToolTipDescription="Visualizza la guida in linea" />
            </Ribbon.HelpPaneContent>
            <RibbonTab Header="Generali" KeyTip="G" >
                <RibbonGroup Header="Utility">
                    <RibbonButton Label="Chiudi" LargeImageSource="images\ShutDown_32x.png" ToolTipImageSource="images\ShutDown_32x.png" ToolTipTitle="Chiudi" ToolTipDescription="Chiudi l'applicazione" Click="OnExitClick" />
                    <RibbonButton Label="Opzioni" LargeImageSource="images\Settings_32x.png" ToolTipImageSource="images\Settings_64x.png" ToolTipTitle="Configurazione" ToolTipDescription="Impostazione delle opzioni di configurazione" Click="OnOptionsClick" />
                </RibbonGroup>
            </RibbonTab>
        </Ribbon>
    </Grid>
</RibbonWindow>

 

Ribbon in WPF - Tabs e gruppi

Tabs e gruppi