Dall'archivio script > Silverlight 4.0

Cambiare programmaticamente il DataTemplate di un controllo in Silverlight 4.0

di Alessio LeonciniAlessio Leoncini, in Silverlight 4.0,

Con la proprietà ContentTemplate di un ContentControl possiamo impostare il DataTemplate per specificare la serie di controlli che visualizzeranno il contenuto.
L'utilità maggiore del DataTemplate è nell'ambito di data binding che possiamo sfruttare per renderizzare le informazioni sorgente con un aspetto ben definito.

Possiamo specificare il DataTemplate direttamente nel markup, oppure possiamo definirne come risorse dell'applicazione in modo del tutto analogo agli altri oggetti:

<UserControl.Resources>
    <DataTemplate x:Key="HorizontalTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBox Text="{Binding FirstName, Mode=OneWay}" />
            <TextBox Text="{Binding LastName, Mode=OneWay}"
                        Grid.Column="1" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="VerticalTemplate">
        <StackPanel Orientation="Vertical">
            <TextBox Text="{Binding FirstName, Mode=OneWay}" />
            <TextBox Text="{Binding LastName, Mode=OneWay}" />
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>

Possiamo utilizzare i DataTemplate programmaticamente andando a valorizzare esplicitamente la proprietà ContentTemplate. Nel nostro esempio andiamo a gestire l'evento SelectionChanged della ListBox:

<ListBox x:Name="listBox"
            ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FirstName, Mode=OneWay}" />
        </DataTemplate>
    </ListBox.ItemTemplate>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <i:InvokeCommandAction Command="{Binding SelectedChangedCommand}"
                                    CommandParameter="{Binding SelectedItem, ElementName=listBox}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ListBox>

<ContentControl x:Name="cc1"
                HorizontalContentAlignment="Stretch"
                HorizontalAlignment="Stretch"
                DataContext="{Binding SelectedItem, Mode=OneWay}">
    <ContentPresenter />
</ContentControl>

Nell'execute del command corrispondente andiamo a recuperare la proprietà Template dell'oggetto sorgente e cerchiamo la risorsa corrispondente al nome:

SelectedChangedCommand = new GenericCommand<People>((item) =>
{
    SelectedItem = item;

    DataTemplate dataTemplate = this.Resources[item.Template] as DataTemplate;
    if (dataTemplate != null)
    {
        cc1.ContentTemplate = dataTemplate;
    }
});

Recuperata la risorsa, valorizziamo la proprietà ContentTemplate con il DataTemplate corrispondente. Al click sul elemento avremo una grafica di dettaglio orizzontale o verticale.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

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