MSDN Tips & Tricks

I consigli degli esperti italiani per sfruttare al meglio gli strumenti di sviluppo e semplificare l’attività quotidiana.

In questa pagina

 La prima finestra con Windows Presentation Foundation
 Personalizzazione di una ComboBox con DataTemplate

La prima finestra con Windows Presentation Foundation

Di Daniele Bochicchio

Windows Presentation Foundation è il nuovo motore grafico che all'interno di .NET Framework 3.0 consente di scrivere applicazioni per Windows con lo stesso approccio utilizzato per le applicazioni web.

WPF si basa infatti su XAML, un linguaggio di marcatura che definisce gli elementi all'interno della form simili all'HTML utilizzato nel mondo Web, garantendo la massima flessibilità nella creazione di layout.

Lo schema di un file XAML è contraddistinto dalla presenza di un elemento root, denominato Window, all'interno del quale sono presenti altri tag, che rappresentano i vari oggetti all'interno della finestra.

Ad esempio con questo codice viene definita una finestra con all'interno una griglia che contiene a sua volta un pulsante.

<Window x:Class="MSDNItaly.MyWindow"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      Title="MSDN Italy" Height="250" Width="500">
      <Grid>
         <Button Content="Cliccami" />
      </Grid>
</Window>

La sintassi di XAML è intuitiva e può essere approfondita nella library MSDN: http://windowssdk.msdn.microsoft.com/en-us/library/ms747122(VS.80).aspx (in inglese)

 

Personalizzazione di una ComboBox con DataTemplate

Di Cristian Civera

Guarda la demo

Windows Presentation Foundation contiene numerosi controlli volti a caricare informazioni e ad interagire con l'utente che rispecchiano nello stile e nelle funzionalità gli elementi Win32. La libertà è comunque massima così come la personalizzazione nell'interfaccia. Tipica è l'esigenza di una ComboBox che deve essere arricchita non limitandosi al semplice testo, ma mostrando anche immagini per ogni elemento.

L'uso di una ComboBox è piuttosto semplice, così come il suo popolamento mediante una collezione di ComboBoxItem:

<ComboBox SelectedIndex="0">
    <ComboBoxItem>Yellow</ComboBoxItem>
    <ComboBoxItem>Green</ComboBoxItem>
</ComboBox>

Solitamente però, si utilizzano le funzionalità di binding per caricare automaticamente i dati, anche in formato XML:

<Canvas>
    <Canvas.Resources>
      <XmlDataProvider x:Key="colors" XPath="/items/item">
        <x:XData>
          <items >
            <item color="Red" />
            <item color="Yellow" />
            <item color="Blue" />
            <item color="Green" />
         </items>
        </x:XData>
      </XmlDataProvider>
    </Canvas.Resources>

    <ComboBox SelectedIndex="0" ItemsSource="{Binding Source={StaticResource colors}}" 
DisplayMemberPath="@color" />

</Canvas>

Con la proprietà ItemsSource indichiamo qual è la sorgente da utilizzare, mentre con DisplayMemberPath specifichiamo qual è il path (in questo caso l'attributo) da mostrare come testo per ogni item. Possiamo però personalizzare e decidere in dettaglio l'aspetto di ogni item inserendo qualsiasi Visual presente in WPF: controlli, immagini e perfino video. Per fare ciò con la proprietà ItemTemplate possiamo indicare, definendo come risorsa o inline per la solo ComboBox, un DataTemplate da utizzare per ogni item.

<ComboBox SelectedIndex="0" IsEditable="true" TextSearch.TextPath="@color" 
ItemsSource="{Binding Source={StaticResource colors}}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="2" Orientation="Horizontal">
                <Rectangle Width="25" Height="25" Fill="{Binding XPath=@color}" />
                <TextBlock FontSize="15" Text="{Binding XPath=@color}" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

All'interno di un template lo scope di binding è relativo al singolo item che stiamo caricando, perciò ci è concesso fare riferimento direttamente agli attributi dell'elemento item della sorgente. Nell'esempio disegniamo un rettangolo e una scritta relativi al colore corrente. Una menzione particolare la meritano le proprietà IsEditable e TextSearch.TextPath. La prima indica che la ComboBox è editabile e l'utente può immettere del testo di ricerca. La seconda è una attached property sull'oggetto TextSearch e ci permette di indicare qual è la proprietà sulla quale fare lookup per ogni ricerca che l'utente effettua. E' importante impostare questo path perché personalizzando il layout degli item il motore non è in grado di sapere qual è il testo rappresentativo dell'elemento. Il risultato di questa personalizzazione è il seguente, dove digitando "G" viene automaticamente suggerita la voce "Green".