Layout e ridimensionamento della barra multifunzione
La barra multifunzione utilizza il layout e il ridimensionamento adattivi per presentare il layout ottimale dei controlli in base a varie dimensioni della finestra. La barra multifunzione presenta un comportamento di dimensionamento predefinito adatto a molti scenari comuni. La barra multifunzione Microsoft per WPF fornisce inoltre un insieme di opzioni utili per specificare un comportamento di ridimensionamento personalizzato.
Cenni preliminari sul ridimensionamento della barra multifunzione
Il controllo barra multifunzione viene ridimensionato in modo dinamico al variare della larghezza della finestra dell'applicazione. Le seguenti illustrazioni mostrano come la barra multifunzione venga ridimensionata quando si restringe la finestra dell'applicazione.
Quando nella finestra lo spazio disponibile è sufficiente, ogni gruppo nella scheda viene visualizzato nella dimensione specificata più larga.
.png "Barra multifunzione con controlli di grandi dimensioni")
Al restringersi della finestra, i gruppi Appunti e Inserisci sono visualizzati nelle dimensioni più piccole.
.png "Barra multifunzione con controlli di medie dimensioni")
Se la finestra viene ristretta ulteriormente, i gruppi Appunti, Inserisci e Paragrafo vengono visualizzati in stato compresso. Quando un gruppo è compresso in un pulsante a discesa, la variante di dimensione più grande viene visualizzata quando il menu a discesa è aperto.
.png "Barra multifunzione con gruppi compressi")
Comportamento di ridimensionamento predefinito
Per impostazione predefinita, i riquadri che compongono il layout della barra multifunzione utilizzano il ridimensionamento proporzionale per mostrare la variante dei controlli più grande che rientri nello spazio disponibile. Al variare della larghezza della finestra, i gruppi di controlli vengono ridimensionati in modo ciclico da destra a sinistra. Per le impostazioni cultura localizzate che prevedono un layout da destra a sinistra, i gruppi di controlli vengono ridimensionati in modo ciclico da sinistra a destra.
Il ridimensionamento proporzionale è una convenzione secondo cui lo spazio disponibile viene diviso uniformemente fra gli elementi che devono occupare lo spazio. Il ridimensionamento proporzionale viene specificato mediante l'utilizzo di un asterisco (*).
In assenza di vincoli di spazio, per ciascun gruppo sono visualizzati tutti i controlli nella dimensione massima. Quando la finestra viene ridotta, i controlli di ogni gruppo vengono ridimensionati e visualizzati nella variante più piccola. Quando non è disponibile spazio sufficiente per visualizzare la variante più piccola dei controlli di ciascun gruppo, i gruppi vengono compressi in pulsanti a discesa.
Specifica di un comportamento di ridimensionamento personalizzato
Per layout complessi della barra multifunzione, è possibile specificare esattamente le modalità di ridimensionamento della barra al variare delle dimensioni della finestra. È possibile specificare il comportamento di ridimensionamento a livello dei controlli, dei gruppi o delle schede. Se non vengono specificate impostazioni di ridimensionamento personalizzate per un particolare livello, viene utilizzato il comportamento predefinito.
Nella tabella seguente sono elencate le modalità per specificare impostazioni di ridimensionamento personalizzate in relazione ai diversi livelli.
Livello |
Come specificare il ridimensionamento personalizzato |
|---|---|
Impostare la proprietà ControlSizeDefinition per specificare la dimensione del controllo da visualizzare. |
|
Impostare la proprietà GroupSizeDefinitions per specificare le varie combinazioni possibili per le dimensioni dei controlli utilizzate durante il ridimensionamento. |
|
Impostare la proprietà GroupSizeReductionOrder per specificare l'ordine in cui i gruppi della barra multifunzione vengono ridimensionati. |
Ridimensionamento a livello dei controlli
Nelle linee guida della barra multifunzione sono specificate tre varianti di dimensioni standard per i controlli della barra multifunzione: grande, media e piccola. Ogni controllo presenta una proprietà ControlSizeDefinition impostata su un oggetto RibbonControlSizeDefinition. L'oggetto RibbonControlSizeDefinition presenta una proprietà ImageSize che consente di specificare se mostrare l'immagine grande o piccola e una proprietà IsLabelVisible che consente di specificare se l'etichetta per il controllo è visibile.
La tabella seguente mostra le impostazioni della proprietà RibbonControlSizeDefinition per le tre dimensioni standard dei controlli.
Dimensione |
Descrizione |
||
|---|---|---|---|
Large |
Immagine grande e fino a due righe di etichetta. |
true |
|
Medium |
Immagine piccola e una riga di etichetta. |
true |
|
Small |
Immagine piccola e nessuna etichetta. |
false |
Nell'esempio seguente sono visualizzate tre dichiarazioni RibbonControlSizeDefinition che corrispondono ai comandi grandi, medi e piccoli.
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
Gruppi di controlli
I controlli correlati della barra multifunzione possono essere raggruppati in un oggetto RibbonControlGroup. Quando un gruppo di controlli viene ridimensionato, viene applicato un oggetto RibbonControlSizeDefinition a tutti controlli in RibbonControlGroup. RibbonControlGroup viene posizionato nell'oggetto RibbonGroup come se fosse un controllo.
Ridimensionamento a livello di gruppo
Quando la barra multifunzione viene ridimensionata, i gruppi presenti in una scheda vengono ridimensionati usando la logica incorporata dell'oggetto RibbonGroupItemsPanel, una logica di ridimensionamento definita dall'utente o una combinazione delle due. Per impostazione predefinita, l'oggetto RibbonGroupItemsPanel ridimensiona i controlli nel gruppo per mostrare la variante dei controlli più grande che rientri nello spazio disponibile. Se specificati, i gruppi presenti in una scheda vengono ridimensionati utilizzando una combinazione dell'oggetto GroupSizeReductionOrder, che specifica l'ordine in cui i gruppi vengono ridimensionati e la proprietà RibbonGroup.GroupSizeDefinitions, che specifica le varie configurazioni delle dimensioni possibili per il gruppo.
Il seguente esempio mostra l'oggetto GroupSizeDefinitions per il gruppo Appunti mostrato in precedenza.
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>
La proprietà GroupSizeDefinitions contiene un insieme di oggetti RibbonGroupSizeDefinition, ciascuno dei quali specifica una possibile configurazione per il gruppo. Quando la barra multifunzione viene ridimensionata, l'oggetto ItemsPanel determina quale RibbonGroupSizeDefinition utilizzare per inserire tutti controlli nello spazio disponibile. I controlli vengono poi dimensionati come specificato dagli oggetti RibbonControlSizeDefinition nell'oggetto RibbonGroupSizeDefinition scelto. Le definizioni delle dimensioni dei controlli vengono applicate ai controlli nel gruppo in ordine sequenziale.
Le linee guida per la barra multifunzione dichiarano che ogni gruppo deve specificare almeno due varianti di dimensione predefinite: una variante grande e una compressa. Quando l'oggetto RibbonGroup non può più inserire i controlli nella dimensione disponibile, il gruppo viene compresso in un elenco a discesa. Quando un gruppo è compresso, la variante più grande specificata viene visualizzata quando il menu a discesa è aperto. Nella terza illustrazione mostrata in precedenza, il gruppo Appunti è compresso e la variante più grande viene visualizzata nel menu a discesa.
Si imposta la proprietà IsCollapsed su true per specificare che un gruppo deve essere ridimensionato in un elenco a discesa compresso. Poiché un gruppo compresso mostra sempre la variante più grande quando è aperto, non si specifica un insieme di oggetti RibbonControlSizeDefinition quando si imposta la proprietà IsCollapsed. Se si specifica un insieme RibbonControlSizeDefinition, la proprietà IsCollapsed viene ignorata.
Gli oggetti GroupSizeDefinitions dell'esempio sono dimostrati nelle figure mostrate in precedenza.
Nella prima figura mostrata in precedenza, il primo oggetto RibbonGroupSizeDefinition viene applicato al gruppo Appunti. I tre oggetti RibbonControlSizeDefinition vengono applicati ai tre pulsanti in sequenza e specificano le dimensioni del pulsante come grande, media e media.
Nella seconda figura, la finestra ha meno spazio disponibile, pertanto il secondo oggetto RibbonGroupSizeDefinition viene applicato al gruppo Appunti. Gli oggetti RibbonControlSizeDefinition specificano le dimensioni del pulsante come grande, piccola e piccola.
Nella terza figura viene applicato l'ultimo oggetto RibbonGroupSizeDefinition. Anziché specificare le dimensioni dei controlli, si specifica in questo modo che il gruppo è compresso.
Ridimensionamento a livello di gruppo utilizzando un oggetto ItemsPanel personalizzato
Se non è possibile ottenere il layout desiderato utilizzando il ridimensionamento predefinito o mediante l'oggetto GroupSizeDefinitions, è possibile sostituire l'oggetto ItemsPanel predefinito con un riquadro personalizzato. Ad esempio, il gruppo Tipo di carattere indicato precedentemente contiene diversi gruppi di pulsanti, ognuno contenuto in un oggetto RibbonControlGroup. Come indicato in precedenza, un oggetto RibbonControlGroup viene inserito nell'oggetto RibbonGroup come se fosse un singolo controllo. Di conseguenza, il gruppo Tipo di carattere non viene ridimensionato in modo utile utilizzando il pannello predefinito. Per ottenere il layout che viene visualizzato, l'impostazione predefinita di RibbonGroupItemsPanel viene sostituita con un oggetto WrapPanel standard.
Nell'esempio seguente viene illustrato come utilizzare un oggetto WrapPanel come ItemsPanel dell'oggetto RibbonGroup.
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
<ribbon:RibbonGroup.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" MaxWidth="300" />
</ItemsPanelTemplate>
</ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>
Ridimensionamento a livello di scheda
Per specificare il ridimensionamento a livello di scheda, è necessario impostare l'oggetto RibbonTab.GroupSizeReductionOrder per specificare l'ordine in cui viene modificata la dimensione dei gruppi. Per specificare un oggetto GroupSizeReductionOrder, per ogni RibbonGroup la proprietà Name deve essere impostata su un valore univoco. Per specificare l'ordine di riduzione è necessario aggiungere i nomi dei gruppi all'elenco dell'ordine di riduzione.
Nell'esempio riportato di seguito viene illustrato come impostare l'oggetto GroupSizeReductionOrder per la scheda Pagina iniziale mostrata nelle figure precedenti.
<ribbon:RibbonTab Header="Home"
GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
<ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
...
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
Nella prima figura, la barra multifunzione dispone di spazio sufficiente per definire il layout di ogni gruppo tramite la variante di dimensione più grande. Nella seconda figura, con il ridursi delle dimensioni della finestra, i primi due gruppi specificati nell'oggetto GroupSizeReductionOrder, Appunti e Inserisci, verranno visualizzati nelle varianti più piccole. Nella terza figura il gruppo Inserisci è stato ridotto nuovamente, il gruppo Paragrafo è stato ridotto e il gruppo di Appunti è stato ridotto nuovamente.
L'oggetto ItemsPanel predefinito per un oggetto RibbonTab è un oggetto RibbonGroupsPanel. Tale riquadro è responsabile di determinare la dimensione e il layout disponibili per i gruppi nella scheda, in base all'ordine di riduzione della dimensione predefinito o specificato dall'utente.
Se l'insieme GroupSizeReductionOrder contiene un nome che non compare in uno dei gruppi nella scheda, tale nome viene ignorato. Se un nome di gruppo appare nell'insieme più volte di quante varianti di dimensioni esistano per tale gruppo, il gruppo viene ridimensionato in base alla variante più piccola e le altre ricorrenze presenti nell'insieme vengono ignorate. Le dimensioni di eventuali gruppi non elencati nell'insieme GroupSizeReductionOrder vengono ridotte da destra a sinistra, per un gruppo alla volta, in ordine ciclico, dopo che tutte le riduzioni definite dall'utente sono state applicate. Questo significa che, per impostazione predefinita, se non viene specificato nulla nell'oggetto GroupSizeReductionOrder, le dimensioni di ognuno dei gruppi vengono ridotte da destra a sinistra, per un gruppo alla volta, in ordine ciclico. Il ridimensionamento è invertito per le impostazioni cultura localizzate che utilizzano un layout da destra a sinistra.