El control Button

Ningún framework de GUI estaría completo sin un control Button (botón), así que por supuesto WPF tiene incluido uno muy agradable, y como el resto de los controles de framework, es muy flexible y te permitirá lograr casi cualquier cosa. Pero empecemos con algunos ejemplos básicos.

Un botón simple

Así como muchos otros controles, un Button puede ser mostrado simplemente agregando una etiqueta Button a tu Window. Si pones texto entre las etiquetas (u otro control), actuará como el contenido del Button:

<Button>Hello, world!</Button>

Bastante simple, ¿verdad? Por supuesto, el Botón aún no hace nada en realidad, pero si lo señala, verá que viene con un bonito efecto de desplazamiento justo fuera de la caja. Pero hagamos que el botón haga algo, suscribiéndose a su evento Click (puede encontrar más información sobre este proceso en el artículo sobre la suscripción a eventos en XAML):

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

En el Code-behind, necesitarás un método que coincida para controlar el evento Click:

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

¡Ahora tienes un botón muy básico y cuando haces clic en él, se muestra un mensaje!

Contenido formateado

Internamente, el texto simple dentro del Contenido del botón se convierte en un control TextBlock, lo que también significa que puede controlar los mismos aspectos del formato del texto. Encontrará varias propiedades en el control Button para hacer esto, incluyendo (pero no limitado a) Foreground , Background , FontWeight y así sucesivamente. En otras palabras, es muy fácil cambiar el formato del texto dentro de un control Button:

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

Mediante la definición directa de estas propiedades en el botón, estás limitado a aplicar el mismo formato para todo el contenido, pero si eso no es lo suficientemente bueno, sigue leyendo para ver como formatear contenido de manera más avanzada.

Botones con contenido avanzado

Ya hemos hablado de esto varias veces, pero una de las cosas más interesantes de WPF es la capacidad de reemplazar texto simple dentro de un control con otros controles de WPF. Esto también significa que no tiene que limitar sus botones a un texto simple, formateado de la misma manera, solo puede agregar algunos controles de texto con un formato diferente. El botón WPF solo admite un control secundario directo, pero puede hacer que sea un Panel, que luego albergará tantos controles como sea necesario. Puedes usar esto para crear botones con varios tipos de formato:

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

Por supuesto, no estás limitado a usar sólo texto - puedes poner lo que quieras dentro de tus botones, lo cual nos lleva a un asunto por el que sé que mucha gente preguntará. ¡Botones con imágenes!

Botones con imágenes (ImageButton)

En muchos frameworks UI, encontrará un botón regular y luego una o varias variantes más, que ofrecerán características adicionales. Una de las variantes más utilizadas es el ImageButton , que, como su nombre lo indica, es un botón que generalmente le permitirá incluir una imagen antes del texto. Pero en WPF, no hay necesidad de un control separado para lograr esto. Como acaba de ver, podemos colocar varios controles dentro de un botón, de modo que puede agregarle un Image control de la misma manera:

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

Es realmente sencillo crear un ImageButton en WPF, y por supuesto eres libre de cambiar las cosas de sitio, por ejemplo, si quieres una imagen después del texto en lugar de al principio, etc...

Relleno de un Botón

Es posible que haya notado que los botones en el framework WPF no vienen con ningún relleno por defecto. Esto significa que el texto está muy cerca de los bordes, lo que puede parecer un poco extraño, porque la mayoría de los botones se encuentran en otros lugares (web, otras aplicaciones, etc.) tienen al menos algo de relleno en los lados. No se preocupe, porque el botón viene con una propiedad Padding :

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

Esto aplicará un relleno de 5 píxeles en los lados y 2 píxeles en la parte superior e inferior. Pero tener que aplicar el relleno a todos sus botones puede resultar un poco aburrido en cierto punto, así que aquí tiene un pequeño consejo: puede aplicar el relleno globalmente, ya sea en toda la aplicación o solo en esta ventana específica, usando un estilo (más sobre estilos más tarde). Aquí hay un ejemplo donde lo aplicamos a la ventana, usando la propiedad Window.Resources :

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

Este relleno ahora se aplicará a todos sus botones, pero, por supuesto, puede anularlo definiendo nuevamente la propiedad de Padding en un botón. Así es como se ven todos los botones de este ejemplo con el padding común:

Resumen

Como puedes ver en este artículo, usar botones en WPF es muy sencillo y puedes personalizar este control tan importante casi infinitamente.