Realizzare un menu riutilizzabile utilizzando DataTemplate e DataBinding

Personalizziamo i dati del menu

In forma predefinita i dati impostati ad ItemsSource vengono renderizzati attraverso ListBoxItem in forma di testo recuperando il nome dell'oggetto, procediamo a personalizzare l'item in modo che la grafica rispetti i nostri obiettivi.

Analizzando il tipo di elemento grafico che desideriamo, possiamo riflettere sul fatto che è possibile separare la renderizzazione dei dati veri e propri, come il nome da visualizzare nel pulsante e l'icona corrispondente, rispetto al resto della grafica di ogni singolo elemento. In Silverlight infatti, oltre all'utilizzo di Style per ogni singolo oggetto, è possibile predisporre un DataTemplate per definire sia quali dati utilizzare che come essi devono apparire all'interno di un ContentControl, come appunto un ListBoxItem.

Questa separazione è utile in scenari come un menu o come una griglia di dati, nei quali i dati possono essere di diverso tipo ma il singolo contenitore deve mantenere un aspetto costante. Non solo, la separazione tra stile di ciascun elemento rispetto ai dati che esso contiene incrementa la flessibilità di azione da parte dei diversi componenti del team di sviluppo ed anche la manutenibilità da parte del singolo sviluppatore.

Procediamo alla creazione di un DataTemplate seguendo il menu della figura successiva:

Nel DataTemplate vogliamo renderizzare un'immagine ed un testo, quindi procediamo a posizionare un Grid con due colonne. Nella prima posizioneremo un oggetto Image di 30 pixel di grandezza e nella seconda un testo di 13.

Nella progettazione grafica di un DataTemplate Blend 2.0 ci viene in aiuto ma non è in grado di risolvere in tempo reale il DataContext proponendo dati concreti, in questo caso è consigliato posizionare i controlli attribuendo ad essi valori fittizi di immagine e testo in modo da poter visualizzare il risultato immediamente. Successivamente rimuovere queste informazioni e procedere all'utilizzo delle espressioni di binding in modo che in produzione siano renderizzati i dati reali.

Anche in questo caso è importante notare che per entrambi questi controlli sarà l'engine di DataBinding a distribuire i dati corretti elemento per elemento, dopo aver impostato i corretti parametri: Source="{Binding Path=BackGroundImage}" per l'oggetto Image e Text="{Binding Path=Name}" per il TextBox.

Con il seguente XAML del DataTemplate:

<DataTemplate x:Key="DataTemplate1"> 
    <Grid Height="30" 
          Margin="0,0,10,0"> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <Image Source="{Binding Path=BackGroundImage}" 
               Height="28" 
               Width="Auto" 
               Margin="4,0,0,0" 
               Stretch="None"> 
        </Image> 
        <Grid Height="Auto" 
              Width="Auto" 
              Grid.Column="1" 
              Margin="6,0,0,0"> 
            <TextBlock Text="{Binding Path=Name}" 
                       FontSize="13" 
                       Foreground="#FF000000" 
                       Width="Auto" 
                       Margin="1,2,0,0" 
                       VerticalAlignment="Center" 
                       HorizontalAlignment="Left" /> 
            <TextBlock Text="{Binding Path=Name}" 
                       FontSize="13" 
                       Foreground="#FFFFFFFF" 
                       Width="Auto" 
                       VerticalAlignment="Center" /> 
        </Grid> 
    </Grid> 
</DataTemplate>

arriviamo ad ottenere il seguente risultato:

Stile dei pulsanti

Nell'esempio precendente possiamo vedere che il DataTemplate appena creato viene renderizzato correttamente come è stato progettato, ma sempre all'interno di un ListBoxItem il cui aspetto predefinito non è quello desiderato.

Procediamo quindi alla realizzazione di un nuovo stile grafico, per fare questo adottiamo un piccolo stratagemma, posizioniamo un ListBoxItem all'interno del nostro ListBox e procediamo alla creazione di un nuovo Style in modo del tutto simile a quanto è stato fatto per il ListBox stesso. In questo caso procediamo a creare uno Style creando una copia:

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: