Suggerimenti per lo stile del controllo pulsante

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(it-it,Expression.40).png

È possibile utilizzare il modello del controllo Button predefinito per creare un modello Button personalizzato. Per impostazione predefinita, il controllo Button ha il seguente aspetto:

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(it-it,Expression.40).png

Stati del controllo Button

Quando si modifica un modello Button, è possibile visualizzare i possibili stati del controllo Button nel pannello Stati. Per impostazione predefinita, il controllo Button può trovarsi in uno dei quattro stati seguenti del gruppo di stati CommonStates:

Nome stato Descrizione

Normal

L'aspetto del controllo Button quando non vi è alcuna interazione con il controllo.

MouseOver

L'aspetto del controllo Button quando l'utente sposta il puntatore su di esso.

Pressed

L'aspetto del controllo Button quando l'utente fa clic su di esso o quando il controllo è attivo e l'utente preme INVIO o BARRA SPAZIATRICE.

Disabled

L'aspetto del controllo Button quando la proprietà IsEnabled è impostata su False.

Il controllo Button può inoltre trovarsi in uno dei due stati seguenti del gruppo di stati FocusStates:

Nome stato Descrizione

Unfocused

L'aspetto del controllo Button quando non ha lo stato attivo della tastiera.

Focused

L'aspetto del controllo Button quando ha lo stato attivo della tastiera. Ad esempio, un utente potrebbe premere TAB per spostarsi tra gli oggetti dell'applicazione fino a quando lo stato attivo della tastiera non si trova sul controllo Button.
tip noteSuggerimento:

Un gruppo di stati contiene gli stati visivi inclusi nella stessa categoria logica e che non possono essere visualizzati contemporaneamente. Ad esempio, il gruppo CommonStates include gli stati relativi all'interazione dell'utente mediante un dispositivo di input quale il mouse. È possibile visualizzare solo uno stato alla volta, ma uno stato di un gruppo può essere visualizzato contemporaneamente in un altro gruppo di stati.

Quando si seleziona uno stato, la registrazione dello stato viene attivata e qualsiasi modifica apportata verrà registrata per quello stato. Per disattivare la registrazione dello stato, fare clic sull'Indicatore della modalità di registrazione Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(it-it,Expression.40).png nella tavola da disegno oppure selezionare Base nel pannello Stati.

Per ulteriori informazioni, vedere Definire stati di visualizzazione diversi per un controllo.

Associazione a modello

È possibile associare a modello le proprietà Background, BorderBrush, Foreground, BorderThickness e Padding. Per ulteriori informazioni, vedere Portare proprietà oggetto nel modello.

Per convertire un testo in un controllo Button

Le immagini riportate di seguito rappresentano una progettazione composita di un pulsante creato che include gli stati Normal, MouseOver, Pressed, Disabled e Focused:

Normal

Button in stato Normal

MouseOver

Button in stato MouseOver

Pressed

Button in stato Pressed

Disabled

Button in stato Disabled

Focused

Button in stato Focused

[!NOTA]

È importante notare che le immagini precedenti non rappresentano ancora i controlli Button, bensì gli oggetti grafici che possono essere convertiti nei controlli Button.

Al passaggio 2 della procedura seguente viene utilizzato il codice XAML corrispondente allo stato Normal delle immagini precedenti.

tip noteSuggerimento:

Fare clic su Doppia visualizzazione per visualizzare le modifiche in entrambe le visualizzazioni Progettazione e Codice mentre si esegue la procedura.

  1. Aprire un nuovo progetto Microsoft Silverlight. Nella visualizzazione Codice individuare il codice riportato di seguito ed eliminare la barra di chiusura (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Copiare e incollare il codice riportato di seguito nel nuovo progetto, dopo il codice individuato al passaggio 1.

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Aggiungere un tag Grid di chiusura (</Grid>) dopo il codice appena incollato.

  4. Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su Grid e quindi scegliere Crea controllo. Nella finestra di dialogo Crea controllo fare clic su Button e quindi su OK.

    Si noti che nella visualizzazione Codice il codice incollato al passaggio precedente è stato sostituito con il codice di un nuovo controllo Button. Inoltre, il controllo Button è stato convertito da Microsoft Expression Blend in un modello per un nuovo stile Button e tale modello è stato applicato al controllo Button.

    Il colore di primo piano del controllo TextBlock nella progettazione composita è grigio chiaro. Lo stesso dicasi per il nuovo stile Button. OK è il contenuto testuale del pulsante precedente e del controllo Button. L'oggetto TextBlock nel codice precedente è stato sostituito con un oggetto ContentPresenter con le stesse proprietà dell'oggetto TextBlock originale.

  5. Per aggiungere alcuni stati al controllo Button, attenersi alla seguente procedura:

    1. Nel pannello Oggetti e sequenza temporale fare clic su Rettangolo.

    2. Nel pannello Stati fare clic su MouseOver.

    3. Nel pannello Proprietà impostare Fill e Stroke su # FF808080.

    4. Tornare al pannello Stati, quindi fare clic su Base per terminare la registrazione dello stato.

  6. Per applicare le stesse proprietà allo stato Pressed, nel pannello Stati fare clic con il pulsante destro del mouse su MouseOver, scegliere Copia stato in, quindi fare clic su Pressed.

  7. Per scostare il testo del pulsante quando il pulsante viene premuto, attenersi alla seguente procedura:

    1. Nel pannello Stati fare clic su Pressed.

    2. Nel pannello Oggetti e sequenza temporale fare clic su Content Presenter.

    3. Nel pannello Proprietà, nella scheda Traslazione della categoria Trasformazione, impostare X e Y su 1.

    4. Tornare al pannello Stati, quindi fare clic su Base per terminare la registrazione dello stato.

  8. Nel pannello Stati fare clic su Normal, quindi su Aggiungi transizione e infine su Normal a MouseOver. Nella casella Durata transizione digitare 0,2, quindi fare clic su Base.

  9. La progettazione composita prevede l'aggiunta di un rettangolo blu attorno al pulsante quando si trova nello stato Focused. Per creare il rettangolo, aggiungere un nuovo oggetto Rectangle con lo stato Focused selezionato. Questa operazione è denominata "disegno nello stato" e significa che il nuovo oggetto è visibile solo nello stato in cui è stato disegnato. Per creare il rettangolo nello stato Focused, nel pannello Stati fare clic su Focused e quindi fare doppio clic sullo strumento Rettangolo nel pannello Strumenti per creare il nuovo oggetto Rectangle.

  10. Il passaggio successivo consiste nell'impostare le proprietà del nuovo rettangolo. Le proprietà devono essere modificate in Base, non nello stato Focused. Tuttavia, il rettangolo è attualmente trasparente e non sarà visibile in Base. Per renderlo visibile, fare clic sull'Indicatore della modalità di registrazione Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(it-it,Expression.40).png. Si noti che il nuovo rettangolo (rectangle1) è ancora selezionato nel pannello Oggetti e sequenza temporale. Nel pannello Proprietà impostare le seguenti proprietà per rectangle1:

    • Fill   Impostare su Nessun pennello.

    • Stroke color   Impostare su #FF00C0FF.

    • RadiusX   Impostare su 2.

    • RadiusY   Impostare su 2.

    • Margin   Impostare Left su 1, Right su 1, Top su 1 e Bottom su 1.

  11. Se lo si desidera, per aggiungere maggiore interattività al rettangolo quando il pulsante si trova nello stato Focused, è possibile creare un'animazione con stato stabile eseguendo le seguenti operazioni. In caso contrario, andare al passaggio 12.

    1. Nel pannello Stati selezionare lo stato Focused.

    2. Nel pannello Oggetti e sequenza temporale fare clic sul pulsante Mostra sequenza temporale.

    3. Trascinare il fotogramma chiave sull'indicatore del secondo 2 e quindi spostare l'indicatore di riproduzione della sequenza temporale su 2,2 secondi.

    4. Nel pannello Stati selezionare rectangle1.

    5. Nella scheda Aspetto del pannello Proprietà impostare Opacity su 0.

    6. Nel pannello Oggetti e sequenza temporale spostare l'indicatore di riproduzione della sequenza temporale su 0 secondi e quindi selezionare rectangle1. Nella scheda Modifica scala del pannello Proprietà impostare X e Y su 5.

    7. Nel pannello Oggetti e sequenza temporale fare clic sul fotogramma chiave in corrispondenza del secondo 2. Nella categoria Interpolazione del pannello Proprietà impostare EasingFunction su Quartic Out.

    8. Nel pannello Oggetti e sequenza temporale, appena sotto la scheda, fare clic sul nome dello stato, in questo caso Focused. Nella scheda Proprietà comuni del pannello Proprietà impostare RepeatBehavior su Forever.

  12. Compilare il progetto premendo CTRL+MAIUSC+B e quindi testarlo premendo F5.

Per convertire gli oggetti in un controllo Button

Le immagini riportate di seguito rappresentano una progettazione composita di un pulsante creato da un progettista che include gli stati Normal, MouseOver, Pressed, Disabled e Focused:

Normal

Grafica pulsante Normal

MouseOver

Grafica pulsante MouseOver

Pressed

Grafica pulsante Pressed

Disabled

Grafica pulsante Disabled

Focused

Grafica pulsante Focused

[!NOTA]

È importante notare che le immagini precedenti non sono ancora controlli Button, bensì oggetti grafici che possono essere convertiti in controlli Button.

Al passaggio 2 della procedura seguente viene utilizzato il codice XAML corrispondente allo stato Normal delle immagini precedenti.

tip noteSuggerimento:

Fare clic su Doppia visualizzazione per visualizzare le modifiche in entrambe le visualizzazioni Progettazione e Codice mentre si esegue la procedura.

  1. Aprire un nuovo progetto Microsoft Silverlight. Nella visualizzazione Codice individuare il codice riportato di seguito ed eliminare la barra di chiusura (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Copiare e incollare il codice riportato di seguito nel nuovo progetto, dopo il codice individuato al passaggio 1.

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Aggiungere un tag Grid di chiusura (</Grid>) dopo il codice appena incollato.

  4. Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su Grid e quindi scegliere Crea controllo. Nella finestra di dialogo Crea controllo fare clic su Button e quindi su OK.

    Si noti che nella visualizzazione Codice il codice incollato al passaggio precedente è stato sostituito con il codice di un nuovo controllo Button. Inoltre, il controllo Button è stato convertito da Expression Blend in un modello per un nuovo stile Button e tale modello è stato applicato al controllo Button.

  5. Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su Content, quindi scegliere Taglia.

  6. Reimpostare l'ambito su UserControl, fare clic con il pulsante destro del mouse su UserControl e scegliere Incolla.

  7. Per aggiungere alcuni stati al controllo Button, attenersi alla seguente procedura:

    1. Nel pannello Oggetti e sequenza temporale fare clic su Rettangolo.

    2. Nel pannello Stati fare clic su MouseOver.

    3. Nel pannello Proprietà impostare Fill e Stroke su # FF808080.

    4. Tornare al pannello Stati, quindi fare clic su Base per terminare la registrazione dello stato.

  8. Per applicare le stesse proprietà allo stato Pressed, nel pannello Stati fare clic con il pulsante destro del mouse su MouseOver, scegliere Copia stato in, quindi fare clic su Pressed.

  9. Per scostare il testo del pulsante quando il pulsante viene premuto, attenersi alla seguente procedura:

    1. Nel pannello Stati fare clic su Pressed.

    2. Nel pannello Oggetti e sequenza temporale fare clic su Content Presenter.

    3. Nel pannello Proprietà, nella scheda Traslazione della categoria Trasformazione, impostare X e Y su 1.

    4. Tornare al pannello Stati, quindi fare clic su Base per terminare la registrazione dello stato.

  10. Nel pannello Stati fare clic su Normal, quindi su Aggiungi transizione e infine su Normal a MouseOver.

  11. Nella casella Durata transizione digitare 0,2, quindi fare clic su Base.

    La progettazione composita prevede l'aggiunta di un rettangolo blu attorno al pulsante quando si trova nello stato Focused. Per creare il rettangolo, aggiungere un nuovo oggetto Rectangle con lo stato Focused selezionato. Questa operazione è denominata "disegno nello stato" e significa che il nuovo oggetto è visibile solo nello stato in cui è stato disegnato. Per creare il rettangolo nello stato Focused, nel pannello Stati fare clic su Focused e quindi fare doppio clic sullo strumento Rettangolo nel pannello Strumenti per creare il nuovo oggetto Rectangle.

  12. Il passaggio successivo consiste nell'impostare le proprietà del nuovo rettangolo. Le proprietà devono essere modificate in Base, non nello stato Focused. Tuttavia, il rettangolo è attualmente trasparente e non sarà visibile in Base. Per renderlo visibile, fare clic sull'Indicatore della modalità di registrazione Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(it-it,Expression.40).png. Si noti che il nuovo rettangolo (rectangle1) è ancora selezionato nel pannello Oggetti e sequenza temporale. Nel pannello Proprietà impostare le seguenti proprietà per rectangle1:

    • Fill   Impostare su Nessun pennello.

    • Stroke color   Impostare su #FF00C0FF.

    • Margin   Impostare Left su 1, Right su 1, Top su 1 e Bottom su 1.

  13. Se lo si desidera, per aggiungere maggiore interattività al rettangolo quando il pulsante si trova nello stato Focused, è possibile creare un'animazione con stato stabile eseguendo le seguenti operazioni. In caso contrario, andare al passaggio 14.

    1. Nel pannello Stati selezionare lo stato Focused.

    2. Nel pannello Oggetti e sequenza temporale fare clic sul pulsante Mostra sequenza temporale.

    3. Trascinare il fotogramma chiave sull'indicatore del secondo 2 e quindi spostare l'indicatore di riproduzione della sequenza temporale su 2,2 secondi.

    4. Nel pannello Stati selezionare rectangle1, quindi nella scheda Aspetto del pannello Proprietà impostare Opacity su 0.

    5. Nel pannello Oggetti e sequenza temporale spostare l'indicatore di riproduzione della sequenza temporale su 0 secondi e quindi selezionare rectangle1. Nella scheda Modifica scala del pannello Proprietà impostare X e Y su 5.

    6. Nel pannello Oggetti e sequenza temporale fare clic sul fotogramma chiave in corrispondenza del secondo 2. Nella categoria Interpolazione del pannello Proprietà impostare EasingFunction su Quartic Out.

    7. Nel pannello Oggetti e sequenza temporale, appena sotto la scheda, fare clic sul nome dello stato, in questo caso Focused.

    8. Nella scheda Proprietà comuni del pannello Proprietà impostare RepeatBehavior su Forever.

  14. Compilare il progetto premendo CTRL+MAIUSC+B e quindi testarlo premendo F5.

Per informazioni sull'applicazione del nuovo modello Button ad altri oggetti Button, vedere Applicare o rimuovere una risorsa.

Riferimenti

Per informazioni dettagliate sulle proprietà e gli eventi del controllo Button di Silverlight, vedere Silverlight Control Gallery Ee341364.xtlink_newWindow(it-it,Expression.40).png (Raccolta di controlli di Silverlight) su MSDN.

Vedere anche

Attività

Creare un controllo da oggetti esistenti

Concetti

Suggerimenti di stile per controlli di Silverlight comuni
SimpleButton
Definizione dello stile di un controllo che supporta i modelli

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.

  • Last updated on