Usare l'engine di data binding all'interno di un template in Silverlight

di Alessio Leoncini, in Silverlight 3.0,

Possiamo sfruttare l'engine di data binding anche nella definizione di un template di un controllo, attraverso la markup extension TemplateBinding. Grazie a questa funzionalità possiamo trasferire i valori delle proprietà del controllo ad alcune omologhe proprietà dei controlli presenti nel template, in modo da rendere personalizzabili alcune caratteristiche dei template attraverso il controllo stesso a cui è associato.

Nel seguente esempio, l'elemento principale che definisce il template di un controllo Button, un Grid, avrà come riempimento il colore rosso, definito come proprietà Background del controllo Button stesso.

XAML
<Button Content="Button"
        Background="Red">
  <Button.Template>
    <ControlTemplate TargetType="Button">
      <Grid Background="{TemplateBinding Background}">
      ...
      </Grid>
    </ControlTemplate>
  </Button.Template>
</Button>

La markup extension TemplateBinding è molto importante per aggiungere il giusto grado di adattabilità dei template a più utilizzi, tuttavia il loro impiego è circoscritto a proprietà dello stesso tipo, oltre ad una modalità di binding OneWay, cioè dal controllo alla template.

Per sopperire a queste limitazioni possiamo utilizzare la markup extension RelativeSource specificando TemplatedParent come parametro.
Grazie a questo elemento impostiamo il controllo a cui è associato il template come sorgente del binding, questo ci consente di utilizzare tutti i valori delle proprietà del controllo a tutti gli oggetti del template.
Nel seguente esempio renderizziamo la larghezza in pixel del Button direttamente dentro una TextBox al suo interno.

XAML
<Button Content="Button"
        Background="Red">
  <Button.Template>
    <ControlTemplate TargetType="Button">
      <Grid Background="{TemplateBinding Background}">
        <TextBox VerticalAlignment="Center"
                 Text="{Binding Width, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                 Width="30" />
      </Grid>
    </ControlTemplate>
  </Button.Template>
</Button>

Una particolarità di questa implementazione è che consente di impostare una modalità di binding TwoWay, estendendo le funzionalità che possiamo realizzare in un template.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

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

Approfondimenti

I più letti di oggi