Condividi tramite

Creare un controllo contenuto

  • Articolo

Questa pagina si applica a WPF e Silverlight 2

A un controllo contenuto è associata una sola proprietà Content che definisce ciò che verrà visualizzato nel controllo. Tale proprietà può essere semplice come una stringa di testo o complessa come un oggetto di Microsoft .NET Framework. Se si aggiunge un controllo pannello di layout a un controllo contenuto, il controllo pannello diventerà il contenuto a cui sarà possibile aggiungere più elementi figlio, ovviando così alla limitazione rappresentata da un unico elemento contenuto.

Nella procedura seguente viene illustrato come creare un controllo contenuto (Button) e impostare la relativa proprietà Content su un pannello di layout (StackPanel). È inoltre possibile utilizzare questa procedura con altri controlli contenuto elencati nella sezione relativa ai tipi dell'argomento Tipi ContentControl su MSDN.

[!NOTA]

I controlli contenuto non sono disponibili nei progetti di Microsoft Silverlight 1.0. È tuttavia possibile creare livelli di oggetti in un pannello di layout Canvas specificando un oggetto TextBlock nella parte superiore e quindi collegare un gestore dell'evento JavaScript per fare in modo che l'elemento Canvas si comporti come un pulsante o un altro controllo contenuto. Per un esempio, vedere Creare un pulsante che controlla uno storyboard in un'applicazione Silverlight.

Per creare un controllo contenuto

  1. Nella casella degli strumenti lungo il lato sinistro della finestra di Microsoft Expression Blend fare clic sul pulsante Libreria Cc295336.0224cabd-5da1-4e01-bddd-4a647401a098(it-it,Expression.10).png. Nella scheda Controlli fare clic su Controlli di sistema, qualora l'opzione non sia già selezionata, e quindi selezionare Button Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(it-it,Expression.10).png nell'elenco.

    L'icona del controllo Button verrà visualizzata al di sopra del pulsante Libreria e risulterà selezionata, in modo da consentire direttamente l'aggiunta di un oggetto Button nella tavola da disegno.

    Cc295336.alert_tip(it-it,Expression.10).gifSuggerimento:

    Gli elementi più comuni dell'interfaccia utente, ad esempio il controllo Button, sono già visualizzati negli elenchi a discesa disponibili sopra il pulsante Libreria e possono quindi essere aggiunti rapidamente.

  2. Per aggiungere un pulsante nella tavola da disegno, fare doppio clic sull'icona della casella degli strumenti relativa al controllo Button. Il contenuto predefinito di un controllo Button è rappresentato dalla stringa "Button".

    Oggetto Button creato nella tavola da disegno con le dimensioni e la posizione (in alto a sinistra) predefinite

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(it-it,Expression.10).png

    Cc295336.alert_tip(it-it,Expression.10).gifSuggerimento:

    È inoltre possibile aggiungere un controllo alla tavola da disegno. A tale scopo selezionare il controllo nella casella degli strumenti, fare clic sulla tavola da disegno e trascinare il mouse per specificare il rettangolo di selezione del controllo.
    Cc295336.alert_tip(it-it,Expression.10).gifSuggerimento:

    Dopo essere stato aggiunto nella tavola da disegno, un elemento di progettazione dell'interfaccia utente, quale un controllo Button, diventa un oggetto dell'applicazione.

  3. In Oggetti e sequenza temporale fare doppio clic sull'oggetto Button per attivarlo. Si noti che attorno all'elemento verrà visualizzata un'evidenziazione di colore giallo. L'attivazione rende possibile l'aggiunta di un elemento figlio all'oggetto.

    Cc295336.alert_tip(it-it,Expression.10).gifSuggerimento:

    È inoltre possibile attivare un oggetto sulla tavola da disegno selezionando prima lo strumento Selezione Cc295336.2ff91340-477e-4efa-a0f7-af20851e4daa(it-it,Expression.10).png nella casella degli strumenti e quindi facendo doppio clic sull'oggetto sulla tavola da disegno.

  4. Nella casella degli strumenti selezionare il controllo StackPanel Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(it-it,Expression.10).png nella Libreria o in uno degli elenchi a discesa dei controlli comuni. Fare doppio clic sull'icona relativa al controllo StackPanel per aggiungerlo come elemento figlio nel pulsante.

    Il controllo StackPanel sostituirà la stringa di contenuto dell'oggetto Button. Per verificare l'avvenuta sostituzione, selezionare [Button] in Oggetti e sequenza temporale e quindi controllare la proprietà Content nella categoria Proprietàcomuni del pannello Proprietà.

    Oggetto StackPanel aggiunto come elemento figlio in un controllo Button nella tavola da disegno

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(it-it,Expression.10).png

  5. Per impostazione predefinita, l'altezza e la larghezza del controllo StackPanel sono pari a 100, mentre l'altezza e la larghezza minime sono pari a 0. Per semplificare l'utilizzo di tale controllo, selezionare [StackPanel] in Oggetti e sequenza temporale e quindi impostare Width su 150 pixel (o unità indipendenti dalla periferica, ciascuna delle quali corrisponde approssimativamente a 1/96 di pollice) e Height su 75 pixel nella categoria Layout del pannello Proprietà. Si noti che il pulsante verrà ridimensionato automaticamente man mano che si ridimensiona il relativo elemento figlio, ovvero StackPanel.

    Cc295336.alert_tip(it-it,Expression.10).gifSuggerimento:

    È inoltre possibile ridimensionare un oggetto nella tavola da disegno facendo clic sugli adorner agli angoli del rettangolo di selezione e trascinandoli.

  6. Con [StackPanel] ancora selezionato in Oggetti e sequenza temporale, impostare su Horizontal la proprietà Orientation nella categoria Layout del pannello Proprietà in modo che gli elementi figlio nel controllo StackPanel vengano distribuiti con spaziatura orizzontalmente. La modifica di questa proprietà non ha effetto sulla visualizzazione del controllo StackPanel nella tavola da disegno finché a tale controllo non verranno aggiunti elementi.

  7. In Oggetti esequenza temporale fare doppio clic sull'oggetto [StackPanel] per attivarlo e potervi aggiungere elementi figlio.

    Cc295336.alert_tip(it-it,Expression.10).gifSuggerimento:

    A differenza della maggior parte degli elementi dell'interfaccia utente, alcuni pannelli di layout, ad esempio StackPanel e Grid, possono contenere più elementi figlio. Ciò è utile per organizzare la progettazione dell'applicazione e definirne il layout. Per ulteriori informazioni, vedere Cenni preliminari sul layout.

  8. Nella casella degli strumenti selezionare lo strumento Ellipse Cc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(it-it,Expression.10).png e quindi disegnare un cerchio all'interno del controllo StackPanel nella tavola da disegno. A questo punto selezionare il controllo TextBox Cc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(it-it,Expression.10).png nella casella degli strumenti e disegnarlo all'interno del controllo StackPanel. Gli elementi figlio verranno distribuiti con spaziatura l'uno accanto all'altro da sinistra verso destra a causa dell'orientamento orizzontale del controllo StackPanel in cui sono contenuti. Se si desidera aggiungere spazio tra gli elementi figlio, è possibile modificare le proprietà Margin degli elementi nella categoria Layout del pannello Proprietà.

    Oggetti figlio aggiunti a un oggetto StackPanel

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(it-it,Expression.10).png

  9. Generare il progetto (F5) per visualizzare l'applicazione risultante.