Suggerimenti per lo stile del controllo RadioButton

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

Stati del controllo RadioButton

Per impostazione predefinita, il controllo RadioButton può trovarsi in uno dei quattro stati seguenti del gruppo di stati CommonStates, che è possibile visualizzare nel pannello Stati quando si modifica un modello RadioButton:

Nome stato	Descrizione
Normal	L'aspetto del controllo RadioButton quando non vi è alcuna interazione con il controllo.
MouseOver	L'aspetto del controllo RadioButton quando l'utente sposta il puntatore su di esso.
Pressed	L'aspetto del controllo RadioButton 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 RadioButton quando la proprietà IsEnabled è impostata su False.

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

Nome stato	Descrizione
Unfocused	L'aspetto del controllo RadioButton quando non ha lo stato attivo della tastiera.
Focused	L'aspetto del controllo RadioButton 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 RadioButton.

Il controllo RadioButton può trovarsi in uno dei seguenti tre stati del gruppo di stati CheckStates:

Nome stato	Descrizione
Unchecked	L'aspetto del controllo RadioButton quando la proprietà IsChecked è impostata su False.
Checked	L'aspetto del controllo RadioButton quando la proprietà IsChecked è impostata su True.
Indeterminate	L'aspetto del controllo RadioButton quando la proprietà IsThreeState è impostata su True.

Il controllo RadioButton può trovarsi in uno dei tre stati seguenti del gruppo di stati ValidationStates:

Nome stato	Descrizione
Valid	L'aspetto del controllo RadioButton quando è valido.
InvalidUnfocused	L'aspetto del controllo RadioButton quando non è valido e non ha lo stato attivo della tastiera.
InvalidFocused	L'aspetto del controllo RadioButton quando non è valido e ha lo stato attivo della tastiera.

Suggerimento:

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 sul pulsante di registrazione oppure selezionare Base nel pannello Stati. Per modificare l'aspetto del controllo quando sono attivi due stati separati, è possibile bloccare un'anteprima di uno stato in un gruppo di stati mentre si modifica uno stato in un gruppo di stati diverso.

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 gli oggetti in un controllo RadioButton

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

Normal

MouseOver

Pressed

Disabled

Focused

[!NOTA]

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

In questo esempio viene utilizzato il codice XAML riportato al passaggio 4 della procedura seguente.

1. Aprire un nuovo progetto Microsoft Silverlight. Nella categoria Pennelli fare clic su Pennello tinta unita. Nell'Editor, nella casella Valore esadecimale, digitare # FF808080.

2. Per creare un nuovo contenitore nella tavola da disegno, fare doppio clic su ****Griglia **** nel pannello Strumenti. Nel pannello Proprietà, nella categoria Layout, a destra di Width, fare clic su Opzioni avanzate, quindi fare clic su Reimposta. Ripetere per Height.

3. Nella visualizzazione Codice individuare il codice riportato di seguito ed eliminare la barra di chiusura (/).

   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
   

4. Copiare e incollare il codice seguente nel nuovo progetto dopo il codice individuato al passaggio 3.

   <Grid>
      <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
      <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
   </Grid>
   

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

6. 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 RadioButton e quindi su OK.

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

   Il TextBlock nella griglia originale presentava un primo piano bianco, pertanto anche il nuovo stile di RadioButton presenterà un primo piano bianco. Il testo dell'elemento TextBlock, Lorem, diventa la proprietà Content del nuovo RadioButton. Nel modello il TextBlock è stato sostituito con un ContentPresenter che ha le stesse proprietà di layout del TextBlock.

7. Per aggiungere uno stato MouseOver a RadioButton, eseguire le operazioni seguenti:

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

   2. Nel pannello Stati fare clic su MouseOver.

   3. Nel pannello Proprietà, nella categoria Pennelli, fare clic su Riempi e nella categoria Editor impostare Alfa su 25.

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

   [!NOTA]

   È inoltre possibile terminare la registrazione dello stato facendo clic sull'indicatore della modalità di registrazione  nell'angolo superiore sinistro della finestra del documento.

8. Fare clic con il pulsante destro del mouse su MouseOver nel pannello Stati, fare clic su Copia stato in, quindi fare clic su Pressed.

9. Per creare lo scostamento, con lo stato Pressed selezionato nel pannello Stati, selezionare Griglia nel pannello Oggetti e sequenza temporale. Nella categoria Trasformazione del pannello Proprietà, impostare X e Y su 1. Fare clic su Base per terminare la registrazione dello stato. Si noti che Griglia è ora denominata griglia.

10. Nel pannello Stati fare clic su Disabled. Nella categoria Aspetto del pannello Proprietà, impostare Opacity su 50. Fare clic su Base per terminare la registrazione dello stato.

11. Nel pannello Stati fare clic su Normal. Fare clic su Aggiungi transizione, quindi su Normal a MouseOver. Impostare Durata transizione su 0,2. Fare clic su Base per terminare la registrazione dello stato.

12. Nel pannello Oggetti e sequenza temporale fare clic su bullet. Nella categoria Aspetto del pannello Proprietà, impostare Opacity su 0.

13. Nel pannello Stati fare clic su Checked. Nella categoria Aspetto del pannello Proprietà, impostare Opacity su 100. Fare clic su Base per terminare la registrazione dello stato.

14. La progettazione completa comprende un rettangolo blu attorno al pulsante quando il pulsante di opzione dispone dello stato Focused. Per creare il rettangolo, aggiungere un nuovo oggetto Rettangolo 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 riquadro Strumenti per creare il nuovo oggetto Rettangolo.

15. Il passaggio successivo consiste nell'impostare le proprietà del nuovo rettangolo. Le proprietà devono essere modificate nello stato Base e non nello stato Focused. Tuttavia, il rettangolo è attualmente trasparente e non sarà visibile nello stato Base. Scegliere il pulsante registrazione  per mantenere la visibilità del rettangolo. Si noti che il nuovo rettangolo (rectangle) è ancora selezionato nel pannello Oggetti e sequenza temporale. Nel pannello Proprietà impostare le proprietà seguenti per rectangle:

    • Riempimento   Nella categoria Pennelli fare clic su Nessun pennello.

    • Tratto   Nella categoria Pennelli fare clic su Pennello tinta unita. Nell'Editor impostare il colore su # FF00C0FF.

    • RadiusX   Nella categoria Aspetto impostare RadiusX su 2.

    • RadiusY   Nella categoria Aspetto impostare RadiusY su 2.

    • Margine   Nella categoria Layout impostare Margin come riportato di seguito:

      • Sinistra   -2

      • Destra   -2

      • Alto   0

      • Basso   0

16. Fare clic su ****Reimposta l'ambito ****. Con RadioButton selezionato nel pannello Oggetti e sequenza temporale, premere CTRL+C per copiarlo. Premere quattro volte CTRL+V per incollare quattro ulteriori controlli RadioButton nel contenitore. Utilizzare lo strumento Selezione° per disporre le caselle di controllo in una colonna. Con uno degli oggetti RadioButton selezionato nel pannello Oggetti e sequenza temporale, deselezionare la casella IsEnabled nella categoria Proprietà comuni nel pannello Proprietà.

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

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

Riferimenti

Per informazioni dettagliate sulle proprietà e gli eventi del controllo RadioButton di Silverlight, vedere Silverlight Control Gallery  (Raccolta di controlli di Silverlight) su MSDN.

Vedere anche

Attività

Portare proprietà oggetto nel modello

Concetti

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

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.