Creando un botón con Estilos en WPF

Hola amigos, hoy quiero enseñarles una forma muy sencilla de crear un botón por medio de imágenes en WPF, el truco aquí está en volar nuestra imaginación e idear el comportamiento de un botón, teniendo en cuenta lo siguiente:

Básicamente un botón funciona de la siguiente manera:

1. Por lo general, cuando posicionamos el puntero sobre el botón este tiende a cambiar de color, o a ejecutarse alguna animación etc. 
2. Una vez posicionado el puntero dentro del botón, podemos desplegar un "tooltip" este no es mas que el mensajito que nos indica la funcionalidad del botón.
3. Por ultimo esta el evento que se dispara al dar clic sobre el botón.

Hoy quiero mostrarles como realizar un botón con dos imágenes, un estilo, y un poco de imaginación.

¡MANOS A LA OBRA!

Lo primero que vamos a hacer es tener dos imágenes, la razón por la cual son dos, es simplemente por que cuando el botón sea posicionado por el puntero del mouse, el estilo se encargara de hacer que la imagen cambie y de el efecto que queremos. 

Ya tenemos nuestras imágenes, en este caso son dos imágenes formato PNG que se encargaran de cerrar nuestra ventana, una vez ya con nuestras imágenes, vamos a crear nuestro estilo, para esto creamos un diccionario de recursos, es ahí donde tenemos que crear nuestro estilo.

Una vez creado nuestro diccionario de recursos, lo registramos dentro de nuestro app.xaml, esto quedara de la siguiente manera:

Ahora si, es momento de crear nuestro estilo, dentro de nuestro diccionario de recurso llamado Estilos.xaml vamos a crear nuestro estilo de nuestra imagen, el estilo quedará de la siguiente manera:

Lo único que hicimos es crear un estilo que será aplicado a un control de tipo Image, le asignamos en la propiedad Source de la imagen nuestra imagen en fondo gris, y luego por medio de un disparador (Triggers) acompañado de la propiedad "IsMouseOver" le indicamos a nuestra imagen que cambie la propiedad Source a la imagen con fondo negro y que muestre un tooltip que diga "Cerrar".

Después de tener todo listo en nuestro estilo, vamos a implementarlo en nuestro código XAML, para esto lo único que tenemos que hacer es agregar un control "Image" y aplicarle el estilo de la siguiente manera:

Ahora vamos a agregarle un evento a nuestro botón imagen, el evento que utilizaremos será el siguiente "MouseLeftButtonDown", y el código XAML quedara de la siguiente manera:

Para finalizar el ejemplo vamos a agregarle el code behind a nuestro botón  para que cierre la ventana, este quedaría de la siguiente forma:

Es momento de ejecutar nuestro código, y ver el resultado, espero que les sirva este ejemplo y que dejen sus comentarios.

Descargar

Edder Rosado Lira.

Seguir leyendo...

Estilos y Plantillas con WPF

Hola amigos el día de hoy, compartiré con ustedes la forma de crear un estilo, este estilo lo aplicaremos a un par de imágenes que posteriormente me servirán como botones en mi aplicación WPF.

Cuando creamos una aplicación WPF, tenemos el privilegio de modificar por completo los controles que utilizaremos en nuestra aplicación, los usuarios que desarrollan o han desarrollado aplicaciones Windows Forms, sabrán que es muy limitado diseñar las interfaces de acuerdo a sus gustos, tristemente nos conformamos con los controles que nos ofrece Windows Forms y para cambiar su apariencia, recurrimos a uso de temas que a lo largo del desarrollo terminamos por eliminar ya que vienen acompañados de una serie de problemas de rendimiento.

Es ahí donde entra Windows Presentation Foundation ya que este se compone de un motor de visualización y un marco de código administrado, unificando la forma en que se crea, se muestra y manipula elementos multimedia e interfaz de usuarios (UI), lo que permite a programadores y diseñadores trabajar en conjunto para darle al usuario una experiencia visualmente sorprendente.

Ahora que sabemos que con WPF podemos crear y diseñar a nuestro antojos los controles, déjenme hablarles de los estilos, al igual que en desarrollo web existen las CSS (hojas de estilos), en WPF a través del código de marcado (XAML) podemos jugar a ser diseñadores, creando estilos y plantillas que nos ayudaran a crear interfaces verdaderamente sorprendentes.

Ahora quiero compartirles un ejemplo sencillo de como podemos crear con el uso de imágenes un botón que cambie de una a la otra imagen con solo pasar el ratón por encima de la misma, para esto creamos un nuevo proyecto, aplicación WPF.

Una vez creado nuestro proyecto vamos a crear dos diccionarios de recursos, uno con el nombre de Estilos.xaml y otro con el nombre Plantillas.xaml, 

 De tal manera que nuestra solución quede de la siguiente forma:

Una vez creado nuestros diccionarios de recursos, tenemos que registrarlos en el archivo App.xaml que es un archivo que se genera de manera automática con la finalidad de guardar todos los recursos, el inicio de nuestra aplicación etc. para hacerlo damos doble clic y escribimos el siguiente código.

Una vez agregado nuestros diccionarios de recursos al archivo App.xaml, agregamos las imágenes que vamos a utilizar para crear el efecto del botón, para eso creamos una carpeta en nuestro proyecto llamada "Images" que en su interior llevara nuestras imágenes   esto quedara de la siguiente manera.

 Ahora es momento de crear nuestro Estilo, para esto nos vamos al archivo Estilos.xaml y escribimos el siguiente código:

El código anterior se compone de un nombre para nuestro estilo, definimos el control al que va ser aplicado en este caso "Image" le asignamos nuestra imagen a la propiedad Source de la imagen por medio de una Uri que nos lleva a la imagen 1,  y creamos nuestro disparador, que nos dice que cada que se posicione el ratón sobre la imagen cambie la propiedad Source de la imagen por una nueva que sera la imagen 2, también aprovechamos para decirle que nos ponga un etiqueta a nuestro imagen que nos dice la función de la misma.

Ahora insertamos un control del tipo imagen en nuestra ventana con el tamaño que nos parezca y le enlazamos nuestro estilo, el código XAML queda de la siguiente manera:

y en la vista diseño se muestra de la siguiente manera:

Ahora al pasar el ratón por encima de la imagen cambia a la otra imagen y muestra la etiqueta de la siguiente manera:

Perfecto  hemos creado un botón con dos imágenes, un estilo y poco código  que acaso no es genial, bueno podemos mejorar el diseño y los efectos todo esto de acuerdo a nuestra creatividad e imaginación, ahora sigamos con esto, nos falta crear una platilla.

Vamos a crear una platilla que se encargue de modificar los elementos hijos de un listbox, (items), para esto insertamos un listbox a nuestra ventana con las siguientes características:

No se asusten, lo único que hicimos aquí fue crear un listbox, pero por cuestión de diseño se me ocurrió que podía estar dentro de un control Border cuyo Background tenga un degradado, y una opacidad.

Pero debemos de prestar mas atención a las propiedades ItemSource del listbox ya que esta es la que se encarga de enlazar los datos que llevara (Items).

También se me ocurrió que cuando el item este seleccionado el fondo del color cambiaría a Negro, Otra de las etiquetas a la que debemos prestar atención es a ItemTemplate que es la que se encarga de enlazar nuestros listbox con nuestra plantilla,  como pueden ver yo la tengo enlazado con una plantilla llamada "tVehiculos", este será el nombre que llevara nuestra platilla, que aremos enseguida.

Ahora es tiempo de crear la platilla nos vamos a nuestro archivo platillas.xaml y escribimos el siguiente código:

hemos creado nuestra plantilla "tVehiculos" de esta manera indicamos que los items del listbox  se mostraran dentro de un border que a su vez contendrá una imagen cuyos datos serán enlazados desde codigo c#, ya ven facilito, recuerdan que nuestra plantilla ya esta aplicada a nuestro listbox, para aplicarla se hace con las siguientes lineas de código:

Ahora lo único que nos falta es crear nuestro evento que se encargara de llenar nuestro listbox, para esto le agregamos un evento a nuestro botón creado con las dos imágenes  un evento MouseLeftButtonDown,  y escribimos las instrucciones encargadas de llenar el listbox el código c# quedara de la siguiente manera:

Creo que el código esta bastante entendible, ya se se puede optimizar es correcto, pero pues por cuestiones de ejemplo lo hice de esta forma, una vez creado nuestro evento, solo nos queda ejecutar nuestra aplicación y ver el resultado.

Recuerden que con el uso de nuestra creatividad podemos crear diseños sorprendentes, para nuestras interfaces. les dejo el código abajo para descargar y no se olviden de comentar, quiero saber de donde me leen, y se aceptan comentarios y criticas.

¡No se olviden de comentar!

Edder Rosado Lira.

Seguir leyendo...

Crystal Report en WPF

Hola amigos el día de hoy vamos a platicar un poquito acerca de Crystal Report y Windows Presentation Foundation, Crystal Reports, según Wikipedia “es una aplicación de inteligencia empresarial utilizada para diseñar y generar informes desde una amplia gama de fuentes de datos”.

Crystal Report se convirtió en el escritor de informes estándar cuando Microsoft lo libero con Visual Basic, es por eso que Visual Studio incorpora una versión OEM. A continuación vamos a generar un proyecto WPF y utilizaremos el Crystal Report para generar un reporte.

Manos a la obra, si utilizamos la versión Visual Studio 2010, debemos de descargar e instalar el Crystal Report, ya que cuando se liberó esta versión del Visual Studio no se incluyó el Crystal, pero esto no quiere decir que no podemos utilizarlo, basta con descargar e instalarlo.

Creamos un nuevo proyecto WPF.

Una vez creado el proyecto tenemos que agregar un nuevo reporte así que le damos clic derecho a nuestro proyecto, Seleccionamos Agregar > Nuevo elemento… > Reporting > Crystal Report, Asegúrate de utilizar la versión del “Framework 4 Completa”  Si utilizas las versión “Client Profile” te dará algunos errores al ejecutar tu programa.

Creamos el reporte como Informe en blanco, esto debido a que  por cuestiones de ejemplo, llenaremos el reporte manualmente desde un Data Set.

Ahora hemos creado el reporte en blanco y se mostrara de la siguiente forma.

Una vez creado el reporte en blanco se agregan automáticamente las referencias de Crystal Report (dll) tal y como se muestra en la siguiente imagen:

Ahora para poder hacer uso del Report Viewer tenemos que agregar manualmente las siguientes referencias “SAPBusinessObjects.WPF.Viewer” y “SAPBusinessObjects.WPF.ViewerShared”, estas referencias las encontramos en la carpeta de instalación del Crystal Report.

"SAP BusinessObjects\Crystal Reports for .NET Framework 4.0\Common\SAP BusinessObjects Enterprise XI 4.0\win32_x86\dotnet"

Para agregar las referencias damos clic derecho sobre nuestro proyecto > Agregar referencia > pestaña Examinar, tal y como se muestra en la imagen siguiente:

Ahora Procedemos a agregar el Report Viewer a nuestra interfaz, será el contenedor encargado de mostrar nuestro reporte, para agregarlo tenemos que incluir la referencia del visor, tal y como se muestra en la imagen:

Ahora Agregamos el Visor a nuestra interfaz con el siguiente código:

Ahora solo tenemos que diseñar nuestro reporte y enlazarlo a alguna fuente de datos.  

Vamos a crear nuestro Data Set desde el diseñador, para esto agregamos un data set a nuestro proyecto de la siguiente manera Clic derecho sobre el proyecto > Agregar  > Nuevo elemento > Pestaña Datos y seleccionamos “Conjunto de Datos”.

Ahora  en la vista diseñador del Data Set Damos clic derecho sobre cualquier parte y agregamos una tabla de datos y seguidamente agregamos las columnas  que necesitemos quedando de la siguiente manera.

Debemos definir el tipo de datos de cada columna, esto lo hacemos en la propiedad “DataType”  de cada columna  en este caso pondremos de tipo String.

Ahora ya tenemos listo nuestro Data Set nos falta enlazarlo a nuestro reporte y llenarlo, para enlazarlo a nuestro reporte nos vamos a nuestro vista diseño de reporte y en la pestaña Explorador de Campos le damos clic derecho en “Campos de base de datos” y seguidamente en “Asistente de base de datos”, se abrirá una ventana donde tendremos que escoger nuestro data set y  agregarlo, tal y como se muestra en la siguiente imagen:

Ahora para agregar darle un formato a nuestro reporte tenemos un cuadro de herramientas donde encontraremos “texto, líneas, cuadros”  estos nos servirán para diseñar nuestro reporte.  Y para enlazar los datos de nuestro campo de base de datos solo basta con arrastrar el campo hacia el reporte, aquí aremos uso de nuestra imaginación para crear el reporte a nuestro gusto.

Ahora solo ponemos unos bloques de texto, unas cajas de texto  y un botón en nuestra interfaz con la intención de meter los datos que llevara nuestro reporte y después generarlo, el código XAML quedara de la siguiente manera:

Y nuestra interfaz de la siguiente manera:

Ahora en el Code Behind (C#) en el evento del botón enlazamos los datos y mostramos el reporte de la siguiente manera:

Ahora para que no nos genere algún error debemos de agregar el siguiente fragmento de código dentro de archivo de configuración de nuestra aplicación app.config quedando de la siguiente manera:

Ahora solo basta ejecutar nuestro programa ingresar los datos y generar nuestro reporte, recuerda que este ejemplo esta de manera básica, pero tú puedes validar campos, eventos e incluso crear formulas avanzadas en el reporte y en la aplicación solo basta un poco de imaginación, espero que te sirva esta pequeña ayuda y de ser así no seas por favor Comenta!

El resultado:

El código del programa puedes encontrarlo en el siguiente enlace: 

Descargar

¡No te olvides de comentar!

Edder Rosado Lira

Seguir leyendo...

Personalizando Ventanas en WPF

Ventanas Transparentes y Personalizadas  en WPF

     Hola amigo si estas empezando con WPF este Post es para ti, vamos a crear una ventana transparente en forma de circulo, con sus botones de cerrar y minimizar. 

De manera personal me gusta trabajar con el Visual Studio 2010. Manos a la obra.

     Dentro del  Visual Studio 2010 creamos un nuevo proyecto de tipo "Aplicación WPF" vamos a llamarlo VentanaTransparente.

     Existen 2 propiedades fundamentales para hacer de una ventana normal, una ventana personalizable es decir que admita la transparencia y que tenga forma de circulo o cualquier otra forma distinta al tan acostumbrado diseño rectangular. 

• AllowsTransparency: Esta propiedad establece que el área cliente de una ventana admita transparencia, si queremos que la ventana admita la transparencia tenemos que establecer la propiedad de la siguiente manera: AllowsTransparency="True".

• WindowStyle: Esta propiedad establece el estilo del borde de una ventana. Para realizar nuestra ventana  en forma de circulo tenemos que establecer esta propiedad de la siguiente manera WindowStyle="None". De no establecerla nuestra ventana tendrá el clásico borde con sus botones de minimizar, maximizar y cerrar, que ya conocemos.

     Una vez establecido las propiedades basta con un poco de imaginación para crear nuestra ventana, el truco esta en que la ventana es transparente pero nuestro contenedor principal NO, en este ejemplo utilizo un Grid como contenedor principal, pero podemos utilizar cualquier otro (Canvas, StackPanel, DockPanel, etc.)


El código XAML de mi ventana queda de la siguiente manera:

El código C# de mi ventana queda de la siguiente manera:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace VentanaTransparente
{
    /// 

    /// Lógica de interacción para MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        //Cerrar Ventana
        private void Cerrar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.Close();
        }

        //Minimizar Ventana
        private void Minimizar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.WindowState = System.Windows.WindowState.Minimized;
        }

        //Mover Ventana
        private void MoverVentana(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }
    }
}

    Evidentemente hay cosas que podemos mejorar de este ejemplo, cosas para hacer mas eficiente este ejemplo a lo mejor organizando en otro tipo de contenedores podemos evitar agrupar controles, pero es ahí donde entra tu imaginación y tus ganas de innovar, espero que te sirva mi ayuda !

Edder Rosado Lira.

Descargar

Seguir leyendo...