Realizzare un menu riutilizzabile utilizzando DataTemplate e DataBinding

Successivamente rimuoviamo il ListBoxItem e procediamo all'associazione dello Style appena creato come elemento da utilizzare nel ListBox impostando la proprietà ItemContainerStyle:

In seguito andiamo a modificare lo style realizzando la nostra grafica, dal pannello "Resources" espandiamo il nodo "Page" in modo da vedere l'elenco delle risorse contenute nell'UserControl, selezioniamo il nome dello stile appena creato (ListBoxItemStyle1) e procediamo a cancellare tutti gli elementi grafici contenuti al suo interno ad eccezione del ContentPresenter.

Il ContentPresenter rappresenta il contenitore nel quale viene posizionato il DataTemplate ed i controlli in esso contenuti. Rimuovendo tutti gli elementi grafici sono rimosse automaticamente tutte le animazioni e gli effetti predefiniti del template.

A questo punto abbiamo a disposizione tutti gli strumenti per ricreare l'elemento grafico del tutto simile a quello di Windows, con questo snippet di codice XAML è possibile arrivare ad un buon risultato.

Animazione di posizionamento degli elementi

Come ogni altro controllo, anche per gli elementi che costruiscono il nuovo template del ListBoxItem è possibile gestire l'evento Loaded in modo da gestire il momento in cui l'elemento del menu rientra effettivamente a far parte dello stesso.

Grazie alla gestione dell'evento Loaded del Grid padre del template,

<Setter Property="Template"> 
    <Setter.Value> 
        <ControlTemplate TargetType="ListBoxItem"> 
            <Grid Cursor="Hand" 
                  Tag="{Binding Path=Num}" 
                  Width="Auto" 
                  IsHitTestVisible="True" 
                  Loaded="MenuDataTemplate_Loaded" 
                  Background="{TemplateBinding Background}"> 
                  ...

è possibile realizzare un effetto di entrata in dissolvenza in progressione per ciascun elemento:

private void MenuDataTemplate_Loaded(object sender, RoutedEventArgs e) 
{ 
   FrameworkElement element = sender as FrameworkElement; 
   ContentControl item = VisualTreeHelper.GetParent(element) as ContentControl; 
   if (element != null && item != null) 
   { 
      int i = (int)element.Tag; 
      int delay = 500 * i; 
 
      DoubleAnimation anim = new DoubleAnimation(); 
      anim.To = 1.0; 
      anim.Duration = TimeSpan.FromMilliseconds(500); 
      Storyboard.SetTarget(anim, item); 
      Storyboard.SetTargetProperty(anim, new PropertyPath("Opacity")); 
 
      Storyboard storyboard = new Storyboard(); 
      storyboard.BeginTime = TimeSpan.FromMilliseconds(delay); 
      storyboard.Children.Add(anim); 
      storyboard.Begin(); 
   } 
}

Il codice è molto semplice, dopo aver recuperato l'istanza del ContentControl che contiene tutto l'elemento del menu viene iniziata una semplice animazione che porta la trasparenza del controllo fino alla completa visibilità. Ciascuna animazione dei controlli inizia con un ritardo calcolato in base all'indice dell'elemento recuperato dalla proprietà Tag a cui è attribuito un valore direttamente dalla base dati.

Trattandosi di una animazione di Opacity su ContentControl, per evitare che l'elemento sia visibile per un istante prima dell'inizio dell'animazione è necessario impostare nel template la proprietà Opacity pari a zero.

<Setter Property="Opacity" Value="0" />

Conclusioni

L'uso combinato di DataBinding, DataTemplate e Styling consente la realizzazione di controlli o parti di applicazioni in modo ben organizzato affinchè sia lo sviluppo che la manutenzione possano procedere al meglio. In alcuni contesti specifici l'uso di DataTemplate consente quell'ulteriore grado di separazione in modo che sia possibile modificare le funzionalità grafiche dell'interfaccia utente in modo parallelo rispetto a quello della rappresentazione dei dati stessi, con maggiori benefici in quelle applicazioni dove è possibile condividere in più contesti la stessa modalità di rappresentazione. Nell'esempio sviluppato sono illustrati in modo "step-by-step" alcune delle potenzialità di questo tipo di organizzazione del codice, con un accenno anche all'uso del pattern M-V-VM.

Attenzione: Questo articolo contiene un allegato

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Segnala su: