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