El control Button

Cap GUI framework estaria complet sense un control Button (botó), així que per descomptat WPF en té un d'inclòs, i com la resta dels controls de framework, és molt flexible i et permetrà aconseguir gairebé qualsevol cosa. Però comencem amb alguns exemples bàsics.

Un botó simple

Així com molts altres controls, un Button pot ser mostrat simplement agregant una etiqueta Button a la teva Window. Si poses text entre les etiquetes (o un altre control), actuarà com el contingut del Button:

<Button>Hello, world!</Button>

Bastant simple, veritat? Per descomptat, el Botó encara no fa res en realitat, però si ho assenyala, veurà que ve amb un bonic efecte de desplaçament. Però fem que el botó faci alguna cosa, subscrivint-se al seu esdeveniment Click (pot trobar més informació sobre aquest procés en l'article sobre la subscripció a esdeveniments a XAML):

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

En el Code-behind, necessitaràs un mètode que coincideixi per a controlar l'esdeveniment Click:

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

Ara tens un botó molt bàsic i quan li fas clic, es mostra un missatge!

Contingut formatat

Internament, el text simple dins del Content del botó es converteix en un control TextBlock, la qual cosa també significa que pot controlar els mateixos aspectes del format del text. Trobarà diverses propietats en el control Button per a fer això, incloent (però no limitat a) Foreground , Background , FontWeight i així successivament. En altres paraules, és molt fàcil canviar el format del text dins d'un control Button:

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

Mitjançant la definició directa d'aquestes propietats en el botó, estàs limitat a aplicar el mateix format per a tot el contingut, però si això no és prou bo, continua llegint per a veure com formatar contingut de manera més avançada.

Botons amb contingut avançat

Ja hem parlat d'això diverses vegades, però una de les coses més interessants de WPF és la capacitat de reemplaçar text simple dins d'un control amb altres controls de WPF. Això també significa que no ha de limitar els seus botons a un text simple, formatat de la mateixa manera, només pot agregar alguns controls de text amb un format diferent. El botó WPF només admet un control secundari directe, però pot fer que sigui un Panel, que després albergarà tants controls com sigui necessari. Pots usar això per a crear botons amb diversos tipus de format:

<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>

Per descomptat, no estàs limitat a usar només text - pots posar el que vulguis dins dels teus botons, la qual cosa ens porta a un assumpte pel qual sé que molta gent preguntarà. Botons amb imatges!

Botons amb imatges (ImageButton)

A molts d'UI frameworks, trobarà un botó regular i després una o diverses variants més, que oferiran característiques addicionals. Una de les variants més utilitzades és l'ImageButton , que, com el seu nom l'indica, és un botó que generalment li permetrà incloure una imatge abans del text. Però en WPF, no hi ha necessitat d'un control separat per a aconseguir això. Com acaba de veure, podem col·locar diversos controls dins d'un botó, de manera que pot agregar-li un Image control de la mateixa manera:

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

És realment senzill crear un ImageButton en WPF, i per descomptat ets lliure de canviar les coses de lloc, per exemple, si vols una imatge després del text en lloc del principi, etc...

Marge d'un botó

És possible que hagi notat que els botons en el framework WPF no vénen amb cap marge per defecte. Això significa que el text està molt prop de les vores, la qual cosa pot semblar una mica estrany, perquè la majoria dels botons es troben en altres llocs (web, altres aplicacions, etc.) tenen almenys una mica de marge als costats. No es preocupi, perquè el botó ve amb una propietat Padding:

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

Això aplicarà un marge de 5 píxels als costats i 2 píxels a la part superior i inferior. Però haver d'aplicar el padding a tots els seus botons pot resultar una mica avorrit en un cert punt, així que aquí tens un petit consell: pots aplicar el padding globalment, ja sigui en tota l'aplicació o solo en aquesta finestra específica, usant un estil (més sobre estils més tard). Aquí hi ha un exemple on l'apliquem a la finestra, usant la propietat Window.Resources:

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

Aquest padding ara s'aplicarà a tots els seus botons, però, per descomptat, pot anul·lar-lo definint novament la propietat de Padding en un botó. Així és com es veuen tots els botons d'aquest exemple amb el padding comú:

Resum

Com pots veure en aquest article, usar botons en WPF és molt senzill i pots personalitzar aquest control tan important gairebé infinitament.