WPF modificare i menù in base al componente attivo

Durante l’aggiunta di funzioni a un’applicazione che sviluppiamo in azienda mi ero accorto che era giunto il momento di un pesante refactoring sulla gestione delle voci di menù. È così nata l’esigenza di poter modificare le funzioni esposte all’utente contestualizzandole sugli elementi attivi scrivendo le minori cablature possibile nel codice. L’obiettivo era quello di realizzare in maniera semplice il concetto che vediamo in Microsoft Word quando selezioniamo per esempio una tabella: subito in alto compare la zona del menù “Strumenti Tabella”.

image

Per spiegare i concetti su come ho implementato la mia versione ho realizzato un esempio di un’app WPF (scaricabile qui) che, tramite l’uso di UserControl e un po’ di System.Reflection, è in grado di modificare una zona della UI per offrire all’utente le funzionalità dello specifico UserControl. È un’implementazione all’acqua di rose del concetto di plug-in per cui farò altri esempi più avanti.

compo

La MainWindows è una semplice shell che contiene un menù con 3 voci.

image

Component 1 richiama il primo componente e lo aggancia sotto al menù.

Component 2 richiama il componente numero 2 e lo aggancia.

La voce “selected component options” si costruisce dinamicamente in base al componente attivo mostrando le sue specifiche opzioni.

image

image

Il meccanismo si basa su due cose:

  1. I componenti che ho realizzato (le classi Component1 e Component2) ereditano da UserControl;
  2. Un Attribute custom chiamato ComponentFunctionAttribute da utilizzare sui metodi che i componenti vogliono rendere disponibili alla shell che li ospita: in questo caso MainWindow.

Ecco che il code behind di Component1 e Component2 diviene:

image

image

In questo modo gli UserControl con questo Attribute etichettano i metodi che vogliono esperre alla shell.

Il codice di ComponentFunctionAttribute è:

image

(per le Guidelines sugli Attribute rimando a MSDN)

A questo punto alla shell non resta che cercare che cosa espone un determinato componente e disegnare il menù di conseguenza, agganciando le funzioni ai controlli utente che più fanno comodo. In questo esempio a dei MenuItem del menù “Selected component options”.

image

image

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