Procedura per associare dati in XAML Designer

La finestra di progettazione XAML consente di impostare le proprietà di associazione dati tramite la tavola da disegno e la finestra Proprietà. L'esempio in questo argomento mostra come associare dati a un controllo. In particolare, la procedura illustra come creare una classe di carrello semplice con una proprietà DependencyProperty denominata ItemCount, quindi associare la proprietà ItemCount alla proprietà Testo TextBlock.

Per creare una classe da utilizzare come origine dati

1. Creare un progetto C# o Visual Basic nel modello Applicazione vuota.

2. Aprire MainPage.xaml.cs (o MainPage.xaml.vb) e aggiungere il codice riportato di seguito. In C# aggiungi il codice nello spazio dei nomi projectName (prima delle parentesi di chiusura finali del file). In Visual Basic, aggiungere la nuova classe.

   public class ShoppingCart : DependencyObject
   {
       public int ItemCount
       {
           get { return (int)GetValue(ItemCountProperty); }
           set { SetValue(ItemCountProperty, value); }
       }
   
       public static readonly DependencyProperty ItemCountProperty =
            DependencyProperty.Register("ItemCount", typeof(int),
            typeof(ShoppingCart), new PropertyMetadata(0));
   }
   

   Public Class ShoppingCart
       Inherits DependencyObject
   
       Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
           "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
       Public Property ItemCount As Integer
           Get
               ItemCount = CType(GetValue(ItemCountProperty), Integer)
           End Get
           Set(value As Integer)
               SetValue(ItemCountProperty, value)
           End Set
       End Property
   End Class
   

   Questo codice imposta un valore 0 come numero predefinito dell'elemento utilizzando l'oggetto PropertyMetadata.

   Suggerimento

   In Visual Studio è possibile aggiungere il codice stub per una proprietà di dipendenza digitando propdp nella classe ShoppingCart e premendo il tasto TAB.

3. Fai clic su Compila > Compila soluzione.

Per associare la proprietà ItemCount a un controllo TextBlock

1. Fare clic con il pulsante destro del mouse su MainPage.xaml, quindi scegliere Progettazione visualizzazioni.

2. Nella finestra Struttura documento seleziona il pannello Griglia radice, visualizzato come [Griglia] nella finestra.

3. Con il pannello Grid selezionato, fare clic sul pulsante Nuovo accanto alla proprietà DataContext nella Finestra Proprietà.

4. Nella finestra di dialogo Seleziona oggetto verifica che l'opzione Mostra tutti gli assembly sia deselezionata, quindi seleziona ShoppingCart nello spazio dei nomi projectName e fai clic su OK.

   Di seguito viene illustrata la finestra di dialogo Seleziona oggetto con l'opzione ShoppingCart selezionata.

   

5. Nella Casella degli strumenti fare doppio clic su un controllo TextBlock per aggiungerlo alla tavola da disegno.

6. Con il controllo TextBlock selezionato, fare clic sul marcatore della proprietà a destra della proprietà Testo in Comuni nella finestra Proprietà. Tale marcatore ha l'aspetto di una piccola casella.

7. Selezionare Crea associazione dati dal menu risultante.

8. Con il tipo di associazione Contesto dati, che corrisponde al valore predefinito nell'elenco Tipo di associazione, selezionare la proprietà ItemCount nella casella Percorso, quindi fare clic su OK.

   Di seguito viene illustrata la finestra di dialogo Crea associazione dati con la proprietà ItemCount selezionata.

   

9. Premere F5 per avviare l'app.

   Il controllo TextBlock dovrebbe visualizzare il valore predefinito 0 come testo.

Vedere anche

Riferimenti

Finestra di dialogo Aggiungi convertitore di valori

Concetti

Creazione di un'interfaccia utente tramite XAML Designer