Il controllo Button

Nessun framework GUI sarebbe completo senza un controllo Button, quindi ovviamente WPF ne ha uno bello incluso e, proprio come il resto dei controlli framework, è molto flessibile e ti permetterà di realizzare quasi tutto. Ma iniziamo con alcuni esempi di base.

Un semplice Button

Proprio come molti altri controlli WPF, un pulsante può essere visualizzato semplicemente aggiungendo un tag Button alla tua finestra. Se inserisci del testo tra i tag (o un altro controllo), agirà come il contenuto del pulsante:

<Button>Hello, world!</Button>

Abbastanza semplice, vero? Ovviamente, il pulsante in realtà non fa ancora nulla, ma se lo indichi con il mouse, scoprirai che è già dotato di un buon effetto hover. Ma facciamo fare qualcosa al Button, iscrivendoci al suo evento Click (ulteriori informazioni su questo processo sono disponibili nell'articolo sulla sottoscrizione agli eventi in XAML):

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

Nel Code-behind, avrai bisogno di un metodo collegato per gestire il clic:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

Ora hai un pulsante molto semplice e quando fai clic su di esso, verrà visualizzato un messaggio!

Contenuto formattato

Internamente, il testo semplice all'interno del Contenuto del pulsante viene trasformato in un controllo TextBlock, il che significa anche che è possibile controllare gli stessi aspetti della formattazione del testo. Troverai diverse proprietà sul controllo Button per farlo, inclusi (ma non limitati a) Foreground , Background, FontWeight e così via. In altre parole, è molto semplice cambiare la formattazione del testo all'interno di un controllo Button:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Impostando queste proprietà direttamente sul pulsante, si è naturalmente limitati ad applicare la stessa formattazione per tutti i contenuti, ma se ciò non è sufficiente, basta leggere per una formattazione del contenuto ancora più avanzata.

Button con contenuto avanzato

Ne abbiamo già parlato diverse volte, ma una delle cose più interessanti di WPF è la possibilità di sostituire un semplice testo all'interno di un controllo con altri controlli WPF. Ciò significa anche che non devi limitare i pulsanti a contenere semplice testo, formattato nello stesso modo: puoi facilmente aggiungere diversi controlli di testo con una formattazione diversa. Il pulsante WPF supporta solo un controllo figlio, ma puoi semplicemente utilizzare un pannello, che quindi ospitare tutti i controlli necessari. Puoi usarlo per creare pulsanti con vari tipi di formattazione:

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

Ma, naturalmente, non sei limitato al solo testo: puoi inserire tutto ciò che desideri all'interno dei pulsanti, il che ci porta a un argomento che so che molte persone chiederanno. Pulsanti con immagini!

Buttons con immagini

In molti framework dell'interfaccia utente, troverai un pulsante normale e quindi una o più varianti, che offriranno funzionalità extra. Una delle varianti più comunemente utilizzate è ImageButton , che, come suggerisce il nome, è un pulsante che di solito ti consente di includere un'immagine prima del testo. Ma in WPF, non c'è bisogno di un controllo separato per realizzare questo - come hai appena visto, possiamo mettere diversi controlli all'interno di un pulsante, così puoi semplicemente aggiungere un controllo Image ad esso, come questo:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

È davvero semplice creare un ImageButton in WPF e naturalmente sei libero di muovere gli oggetti, ad es. se vuoi l'immagine dopo il testo anziché prima, ecc.

Button Padding

Potresti aver notato che i pulsanti nel framework WPF non hanno alcuna spaziatura di default. Ciò significa che il testo è molto vicino ai bordi, il che potrebbe sembrare un po 'strano, perché la maggior parte dei pulsanti trovati altrove (web, altre applicazioni, ecc.) Ha almeno un riempimento nei lati. Nessun problema, perché il pulsante ha una proprietà Padding :

<Button Padding="5,2">Hello, World!</Button>

Questo applicherà un riempimento di 5 pixel sui lati e 2 pixel nella parte superiore e inferiore. Ma dover applicare il padding a tutti i pulsanti potrebbe essere un po 'noioso a un certo punto, quindi ecco un piccolo suggerimento: puoi applicare il padding a livello globale, attraverso l'intera applicazione o solo questa finestra specifica, usando uno stile (altro sugli stili più tardi). Ecco un esempio in cui viene applicato alla finestra, utilizzando la proprietà Window.Resources :

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

il suo riempimento verrà ora applicato a tutti i pulsanti, ma è ovviamente possibile sovrascriverlo definendo specificamente la proprietà Padding su un pulsante. Ecco come appaiono tutti i pulsanti di questo esempio con il padding comune:

Sommario

Come puoi vedere da questo articolo, l'uso dei pulsanti nel framework WPF è molto semplice e puoi personalizzare questo controllo importante quasi all'infinito.