Wiki sobre WPF en Geeks•ms

WPF: Integrando nuestra aplicación con la Barra de Tareas de Windows 7 (II)

Josué Yeray Julián Ferreiro — Tue, 03 Aug 2010 19:10:50 GMT

Revisión actual enviado a Wiki sobre WPF en Geeks•ms por Josué Yeray Julián Ferreiro a 8/3/2010 9:10:50 PM

Hola!

En el artículo anterior sobre integración de nuestra aplicación con la barra de tareas de Windows 7 (puedes verlo aquí) hablábamos sobre las formas que nos ofrece la barra de tareas de Windows 7 de comunicar información a nuestros usuarios, usando la sobreimpresión de iconos y la barra de progreso.

En todo programa la comunicación es bidireccional, por un lado comunicamos información al usuario y por otro esperamos que el usuario nos proporcione información con la que trabajar, ya que hemos conseguido adaptar a Windows 7 la forma en la que nuestro usuario recibe información, hagamos ahora que pueda de forma sencilla e intuitiva comunicarnos información desde la barra de tareas.

Para esto, en este artículo, trataremos sobre las JumpList y los Thumbnail Toolbars:

Jumplist: Las Jumplist son enlaces rápidos a partes de nuestra aplicación que aparecen al hacer click derecho sobre el icono de la misma en la barra de tareas, podemos hacer que nuestra app vaya directamente a una ventana en concreto, sin haberla arrancado todavía.
Thumbnail Toolbars: al pasar el ratón sobre los iconos de aplicaciones activas, Windows 7 nos ofrece una preview de la ventana de esa aplicación, con las Thumbnail Toolbars podemos añadir botones a esa vista que ejecuten ordenes en nuestra aplicación.

.NET 3.5 vs .NET 4

Para acceder a todas estas características en .NET 3.5 solo teníamos un camino: Interoperabilidad con el api no manejada de Win32 (al igual que con el artículo sobre la gestión de energía), sin embargo para .NET 4 han integrado las funcionalidades de la barra de tareas de Windows 7 en el propio framework, por lo que el “uso y disfrute” de estas características es muchísimo más sencillo. Por ello el código de este artículo es solo útil para .NET 4.

Empecemos

Vamos a comenzar, lo primero es crear un nuevo proyecto WPF Application (File > New > Project), una vez creado, vamos a diseñar la pantalla principal en el archivo MainWindow.xaml

Los estilos que he usado en esta aplicación están disponibles en la descarga en el archivo Application.xaml, si tenéis dudas acerca de como usar / crear estilos, echadle un vistazo a mis dos artículos sobre este tema: aquí y aquí

Bien, para empezar a trabajar con la barra de tareas debemos añadir en xaml un objeto de tipo TaskbarItemInfo:

<Window.TaskbarItemInfo>
<TaskbarItemInfo/>
</Window.TaskbarItemInfo>

Con esto ya tendremos acceso a multitud de propiedades de la barra de tareas de windows 7 de forma sencilla y rápida.

JumpList

Vamos a empezar a trabajar con las JumpList, lo primero que tenemos que hacer es abrir el código del archivo application.xaml y añadir un nuevo manejador de eventos para el evento Startup:

Private Sub Application_Startup(ByVal sender As Object, 
ByVal e As System.Windows.StartupEventArgs) 
Handles Me.Startup
End Sub

La forma en la que los elementos de la Jumplist se comunicarán con nuestra aplicación es mediante argumentos a la hora de ejecutarla, por lo que en el evento Startup realizaremos dos trabajos, por un lado comprobaremos si nos ha llegado un parámetro y ejecutaremos el código asociado al mismo y por otro lado en este evento crearemos nuestra lista y se la notificaremos a la aplicación.

Para controlar los argumentos pasados a la aplicación usaremos la propiedad Args de la variable e del evento, usando un bloque Select Case para ello de la siguiente forma:

If e.Args.Count > 0 Then
Select Case e.Args(0)
Case "update"
MessageBox.Show("No existen actualizaciones")
Case "searchclient"
MessageBox.Show("Has seleccionado Buscar Clientes")
Case "searchinvoice"
MessageBox.Show("Has seleccionado Buscar Facturas")
End Select
End If

Como podéis ver es muy simple, al crear nuestra JumpList a cada Elemento le hemos asociado un argumento (update, searchclient o searchinvoice) al seleccionar un elemento este ejecuta nuestra aplicación enviándole el argumento que le hemos asociado y nosotros al recibirlo podemos ejecutar el código pertinente.

Ahora vamos a crear los elementos de la JumpList, para esto usaremos el objeto JumpTask del namespace Shell:

Dim BuscarActualizaciones As New Shell.JumpTask
BuscarActualizaciones.Title = "Buscar Actualizaciones"
BuscarActualizaciones.Arguments = "update"
BuscarActualizaciones.Description = "Comprobamos si existen actualizaciones."
BuscarActualizaciones.CustomCategory = "Mantenimiento"
BuscarActualizaciones.IconResourcePath = Assembly.GetEntryAssembly().CodeBase
BuscarActualizaciones.ApplicationPath = Assembly.GetEntryAssembly().CodeBase

Dim BuscarCliente As New Shell.JumpTask
BuscarCliente.Title = "Buscar Cliente"
BuscarCliente.Arguments = "searchclient"
BuscarCliente.Description = "Busqueda para localizar un cliente."
BuscarCliente.CustomCategory = "Clientes"
BuscarCliente.IconResourcePath = Assembly.GetEntryAssembly().CodeBase
BuscarCliente.ApplicationPath = Assembly.GetEntryAssembly().CodeBase

Dim ConsultarFacturas As New Shell.JumpTask
ConsultarFacturas.Title = "Consultar Facturas"
ConsultarFacturas.Arguments = "searchinvoice"
ConsultarFacturas.Description = "Ver la lista de facturas"
ConsultarFacturas.CustomCategory = "Facturación"
ConsultarFacturas.IconResourcePath = Assembly.GetEntryAssembly().CodeBase
ConsultarFacturas.ApplicationPath = Assembly.GetEntryAssembly().CodeBase

Simplemente definimos las características de cada JumpTask, ahora solo nos queda agregarlos a una JumpList:

Dim Lista As New Shell.JumpList
Lista.JumpItems.Add(BuscarActualizaciones)
Lista.JumpItems.Add(BuscarCliente)
Lista.JumpItems.Add(ConsultarFacturas)

Por último, tenemos que indicar al sistema que relacione esta Lista con nuestra aplicación, usando el método SetJumpList de la clase JumpList:

Shell.JumpList.SetJumpList(Application.Current, Lista)

Aunque este código se ejecutará siempre que arranquemos la aplicación, nunca se duplicarán los elementos de la JumpList pues el sistema se encargará cada vez que le pasemos una JumpList de actualizar los elementos que ya tiene asignados, en caso de que hayamos realizado algún cambio, de crear los nuevos elementos o de eliminar los elementos que ya no existan.

Con esto si ejecutas la aplicación y presionas con el botón derecho en el icono de la misma en la barra de tareas verás los elementos creados por nosotros, si seleccionas alguno verás que aparece el mensaje correspondiente y se abre una nueva instancia de la aplicación:

En conjunto, el dotar a nuestra aplicación de JumpList no es un proceso complicado, pero a la larga puede darnos muchos beneficios, ¿porque hacer pasar a nuestros usuarios por varias ventanas para llegar a consultar o actualizar un dato, cuando podemos ofrecerles las acciones más comunes simplemente con dos clicks y que nuestra aplicación arranque directamente a donde nuestros usuarios necesitan ir? Si lo piensas detenidamente seguro que se te ocurren mil situaciones donde te abría sido muy cómodo tener este sistema a mano. Por lo menos en mi experiencia personal esta es una de las características de Windows 7 que más útil me resulta.

Thumbnail Toolbars

Esta forma de que el usuario interactúe con nuestra aplicación se combina de forma perfecta con el contenido de nuestro anterior artículo, en el que explicábamos como informar al usuario del progreso de nuestra aplicación sin que tuviese la ventana de la misma a la vista, pues bien, con los thumbnail Toolbars, permitiremos que, una vez recibida esa información el usuario pueda responder ejecutando una orden en nuestra aplicación sin la necesidad de maximizar la ventana.

Lo primero que vamos a hacer es crear las imágenes para los botones, usando la clase DrawingImage, como recursos de nuestra ventana:

<Window.Resources>
<DrawingImage x:Key="IconUpdate">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,24,24" 
ImageSource="/Images/update.png" />
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="IconClient">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,24,24" 
ImageSource="/Images/client.png" />
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="IconInvoice">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,24,24" 
ImageSource="/Images/invoice.png" />
</DrawingImage.Drawing>
</DrawingImage>
</Window.Resources>

La clase que usaremos para crear nuestros botones es el TaskBarItemInfo.ThumbButtonInfo:

<Window.TaskbarItemInfo>
<TaskbarItemInfo>
<TaskbarItemInfo.ThumbButtonInfos>
<ThumbButtonInfo x:Name="btnUpdate"
ImageSource="{StaticResource IconUpdate}"
Description="Comprueba actualizaciones"
IsBackgroundVisible="True">

</ThumbButtonInfo>
<ThumbButtonInfo x:Name="btnClient"
ImageSource="{StaticResource IconClient}"
Description="Ver los clientes"
IsBackgroundVisible="True">
</ThumbButtonInfo>
<ThumbButtonInfo x:Name="btnInvoice"
ImageSource="{StaticResource IconInvoice}"
Description="Ver las facturas"
IsBackgroundVisible="True">
</ThumbButtonInfo>
</TaskbarItemInfo.ThumbButtonInfos>
</TaskbarItemInfo>
</Window.TaskbarItemInfo>

La clase ThumbButtonInfo tiene varias propiedades que nos permitirán personalizar la apariencia de nuestro botón:

Description: Indica el texto que aparecerá sobre el botón al dejar el ratón sobre él.
IsInteractive: Esta propiedad permite usar un botón de dos formas:
- True: el botón se comporta como un botón normal, este es el comportamiento por defecto.
- False: el botón no es interactivo y solo se muestra al usuario, no reaccionando a las acciones de este.
IsBackgroundVisible: Indica si se resalta el botón al posicionar el ratón sobre el o no, por defecto es True.
DismissWhenClicked: Si establecemos a True esta propiedad, cuando pulsemos sobre el botón el Thumbnail se cerrará, si es False quedará abierto hasta que el ratón salga del icono de la barra de tareas, por defecto es False.

Ya tenemos creados nuestros botones, si ejecutas la aplicación y pasas el botón sobre el icono de la barra de tareas verás que aparecen los 3 botones que hemos creado, pero si haces click sobre ellos no ocurre nada.

Ahora debemos programar el comportamiento de los botones, esto lo podemos realizar de dos formas diferentes: usando eventos como cualquier otro botón o usando comandos.

Los dos métodos pueden realizar el mismo trabajo pero quizás es más recomendable usar comandos, pues por regla general estos botones serán réplicas de otros botones posicionados en la Toolbar principal de la aplicación o opciones de menús y usando comandos podemos enlazar al mismo código ambos, aun así voy a explicar un poco los dos casos.

Usando Eventos

El funcionamiento de los ThumbnailButtonInfo con eventos es muy sencillo y exactamente igual al resto de controles de nuestra aplicación, simplemente añadimos el evento al que queremos responder desde xaml:

<ThumbButtonInfo x:Name="btnUpdate"
ImageSource="{StaticResource IconUpdate}"
Description="Comprueba actualizaciones"
IsBackgroundVisible="False"
Click="btnUpdate_Click">
</ThumbButtonInfo>
<ThumbButtonInfo x:Name="btnClient"
ImageSource="{StaticResource IconClient}"
Description="Ver los clientes"
IsBackgroundVisible="True"
Click="btnClient_Click">
</ThumbButtonInfo>
<ThumbButtonInfo x:Name="btnInvoice"
ImageSource="{StaticResource IconInvoice}"
Description="Ver las facturas"
IsBackgroundVisible="True"
IsEnabled="False"
Click="btnInvoice_Click">
</ThumbButtonInfo>

Como veis en cada botón hemos añadido un evento Click, ahora en código escribimos el código necesario en cada manejador de eventos:

Private Sub btnUpdate_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
MessageBox.Show("Click en actualizar mediante eventos")
End Sub

Private Sub btnClient_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
MessageBox.Show("Click en clientes mediante eventos")
End Sub

Private Sub btnInvoice_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
MessageBox.Show("Click en facturas mediante eventos")
End Sub

Con esto si volvemos a ejecutar nuestra aplicación y pulsamos sobre los botones aparecerá el messagebox que corresponda:

Usando Comandos

Este método conlleva un poco más de trabajo, pero es mucho más representativo de lo que una aplicación seria debería hacer. El primer paso es crear una clase nueva clase para cada botón:

Como podéis ver hemos creado una clase para cada acción que queremos realizar: Client, Invoice y Update, estas clases deben implementar el Interface ICommand para que se puedan usar como comandos en nuestra aplicación:

'UpdateCommand.vb
Public Class UpdateCommand
Implements ICommand

Public Function CanExecute(ByVal parameter As Object) As Boolean Implements System.Windows.Input.ICommand.CanExecute
'Aquí código para comprobar si tu comando puede ejecutarse.
Return True
End Function

Public Event CanExecuteChanged(ByVal sender As Object, ByVal e As System.EventArgs) Implements System.Windows.Input.ICommand.CanExecuteChanged

Public Sub Execute(ByVal parameter As Object) Implements System.Windows.Input.ICommand.Execute
MessageBox.Show("Click en actualizar mediante comandos")
End Sub
End Class

'ClientCommand.vb
Public Class ClientCommand
Implements ICommand

Public Function CanExecute(ByVal parameter As Object) As Boolean Implements System.Windows.Input.ICommand.CanExecute
'Aquí código para comprobar si tu comando puede ejecutarse.
Return True
End Function

Public Event CanExecuteChanged(ByVal sender As Object, ByVal e As System.EventArgs) Implements System.Windows.Input.ICommand.CanExecuteChanged

Public Sub Execute(ByVal parameter As Object) Implements System.Windows.Input.ICommand.Execute
MessageBox.Show("Click en clientes mediante comandos")
End Sub
End Class

'InvoiceCommand.vb
Public Class InvoiceCommand
Implements ICommand

Public Function CanExecute(ByVal parameter As Object) As Boolean Implements System.Windows.Input.ICommand.CanExecute
'Aquí código para comprobar si tu comando puede ejecutarse.
Return True
End Function

Public Event CanExecuteChanged(ByVal sender As Object, ByVal e As System.EventArgs) Implements System.Windows.Input.ICommand.CanExecuteChanged

Public Sub Execute(ByVal parameter As Object) Implements System.Windows.Input.ICommand.Execute
MessageBox.Show("Click en facturas mediante comandos")
End Sub
End Class

Los Comandos son muy útiles y una muy buena forma de distribuir el código de tu aplicación, te recomiendo que eches un vistazo a estos vídeos que explican mucho más a fondo el uso de comandos:

How Do I: Use Command Binding in WPF How Do I: Create a Custom Command in WPF

Lo siguiente que necesitamos hacer es tener un lugar común desde el que exponer nuestros comandos, para esto podemos usar el ViewModel, añade un nuevo archivo de clase a tu proyecto, llámalo ViewModel y ponle el siguiente código:

Public Class ViewModel
Private _UpdateCommand As UpdateCommand = New UpdateCommand()
Private _ClientCommand As ClientCommand = New ClientCommand()
Private _InvoiceCommand As InvoiceCommand = New InvoiceCommand()

Public ReadOnly Property UpdateCommand As ICommand
Get
Return _UpdateCommand
End Get
End Property

Public ReadOnly Property ClientCommand As ICommand
Get
Return _ClientCommand
End Get
End Property

Public ReadOnly Property InvoiceCommand As ICommand
Get
Return _InvoiceCommand
End Get
End Property
End Class

Nuestro ViewModel simplemente expone propiedades públicas del tipo de nuestros comandos hacia la capa de Visualización, el Xaml en este caso, por lo que solo debemos referenciar en nuestro Xaml este ViewModel en nuestro DataContext:

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:WPF_JumpList_And_Thumbnail_Toolbars"
Title="MainWindow" Height="350" Width="525">

<Window.DataContext>
<viewModel:ViewModel></viewModel:ViewModel>
</Window.DataContext>

</Window>

Por último ya solo nos queda enlazar nuestros botones con sus respectivos comandos, para esto usaremos la propiedad Command de cada ThumbButtonInfo:

<ThumbButtonInfo x:Name="btnUpdate"
ImageSource="{StaticResource IconUpdate}"
Description="Comprueba actualizaciones"
IsBackgroundVisible="True"
Command="{Binding UpdateCommand}">
</ThumbButtonInfo>
<ThumbButtonInfo x:Name="btnClient"
ImageSource="{StaticResource IconClient}"
Description="Ver los clientes"
IsBackgroundVisible="True"
Command="{Binding ClientCommand}">
</ThumbButtonInfo>
<ThumbButtonInfo x:Name="btnInvoice"
ImageSource="{StaticResource IconInvoice}"
Description="Ver las facturas"
IsBackgroundVisible="True"
Command="{Binding InvoiceCommnad}">
</ThumbButtonInfo>

Como podéis ver simplemente hacemos un Binding a nuestro comando. Si ejecutáis la aplicación de nuevo y presionáis sobre un botón veréis que el efecto es el mismo que con los eventos, solo que en esta ocasión nuestro código es mucho más reutilizable y está más ordenado, pudiendo compartir entre varias ventanas o controles el mismo comando y conservando la misma funcionalidad:

Y esto es todo. Tras esta serie de artículos ya sabéis todo lo necesario para hacer a vuestra aplicación más "Windows7 Friendly” y, lo más importante, más intuitiva, sencilla y útil para vuestros usuarios.

Por si tenéis alguna dificultad, a parte por supuesto de poder contactar conmigo tanto dejando mensajes como en mi twitter, como en msdn o a mi email directamente, os dejo el proyecto completo para descarga, junto con los estilos y control templates que he usado.

Y recordad, con un simple comentario, podéis hacer feliz a un pequeño bloguero :)

Muchas gracias por leerme y Happy Coding!

Descargar código

WPF: Integrando nuestra aplicación con la Barra de Tareas de Windows 7 (I)

Josué Yeray Julián Ferreiro — Mon, 26 Jul 2010 04:41:36 GMT

Revisión actual enviado a Wiki sobre WPF en Geeks•ms por Josué Yeray Julián Ferreiro a 7/26/2010 6:41:36 AM

Hola a todos!

En el último artículo, hablamos de lo importante que es aprovechar las características que nos ofrece el S.O. sobre el que nuestra aplicación se ejecuta, vimos como integrar nuestra aplicación con el sistema de energía de Windows 7 para hacerla “amigable” con el consumo.

Esta vez vamos a hablar de la barra de tareas de Windows 7, fue uno de los grandes cambios en el sistema operativo, y trae muchas ventajas para facilitar la comunicación rápida e intuitiva entre nuestra aplicación y nuestros usuarios:

IconOverlay: Esta propiedad de la barra de tareas nos permite colocar desde nuestro código un pequeño icono de 16x16 sobre el icono de nuestra aplicación, en la esquina inferior derecha, con lo que podemos avisar a nuestro usuario de cambios en el estado de la aplicación sin que tenga la pantalla mostrandose.
ProgressBar: Muy util sin duda, nos permite colocar bajo el icono de nuestra aplicación una barra de progreso, con múltiples estados, capaz de comunicar a nuestro usuario el estado y progreso de una determinada tarea mientras usa otras aplicaciones, consiguiendo maximizar la productividad.
Jumplist: Las Jumplist son enlaces rápidos a partes de nuestra aplicación que aparecen al hacer click derecho sobre el icono de la misma en la barra de tareas, podemos hacer que nuestra app vaya directamente a una ventana en concreto, sin haberla arrancado todavía.
Thumbnail Toolbars: al pasar el ratón sobre los iconos de aplicaciones activas, Windows 7 nos ofrece una preview de la ventana de esa aplicación, con las Thumbnail Toolbars podemos añadir botones a esa vista que ejecuten ordenes en nuestra aplicación.

En este artículo vamos a centrarnos en las dos primeras: IconOverlay y ProgressBar, dejando las restantes para otro artículo.

.NET 3.5 vs .NET 4

Empecemos

Primero y como ya es costumbre, una imagen vale más que mil palabras, pues esta vez tenemos dos:

Como veis me he puesto en plan original con los iconos…. y si, lo se, que yo me dedique al diseño es tan dañino como las armas de destrucción masiva…. pero por eso soy programador :)

Vamos a comenzar, lo primero es crear un nuevo proyecto WPF Application (File > New > Project), una vez creado, vamos a diseñar la pantalla principal en el archivo MainWindow.xaml

Bien, para empezar a trabajar con la barra de tareas debemos añadir en xaml un objeto de tipo TaskbarItemInfo:

<Window.TaskbarItemInfo>
<TaskbarItemInfo/>
</Window.TaskbarItemInfo>

Con esto ya tendremos acceso a multitud de propiedades de la barra de tareas de windows 7 de forma sencilla y rápida.

IconOverlay

Vamos a empezar a trabajar con los IconOverlay, lo primero que debemos hacer es añadir como recurso en nuestro proyecto los archivos de imágen que queramos usar (png o ico por las transparencias).

Una vez hecho esto debemos crear un DrawingImage como recurso de nuestra ventana por cada imágen, en mi caso son 5:

<Window.Resources>
<DrawingImage x:Key="IconRed">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,16,16" 
ImageSource="/WPF%20Icon%20Overlay%20And%20ProgressBar;
component/images/FireToy.ico" />
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="IconGreen">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,16,16" 
ImageSource="/WPF%20Icon%20Overlay%20And%20ProgressBar;
component/images/GreenToy.ico" />
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="IconBlue">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,16,16" 
ImageSource="/WPF%20Icon%20Overlay%20And%20ProgressBar;
component/images/BlueToy.ico" />
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="IconPink">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,16,16" 
ImageSource="/WPF%20Icon%20Overlay%20And%20ProgressBar;
component/images/PinkToy.ico" />
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="IconBlack">
<DrawingImage.Drawing>
<ImageDrawing Rect="0,0,16,16" 
ImageSource="/WPF%20Icon%20Overlay%20And%20ProgressBar;
component/images/NinjaToy.ico" />
</DrawingImage.Drawing>
</DrawingImage>
</Window.Resources>

Una vez hecho esto, vamos a crear el TabItem con los botones y demás:

<TabItem Header="Taskbar IconOverlay" Name="TabItem1">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/
WPF Icon Overlay And ProgressBar;
component/images/overlay.png" 
Stretch="Uniform" Opacity=".2" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height=".33*"></RowDefinition>
<RowDefinition Height=".33*"></RowDefinition>
<RowDefinition Height=".33*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".2*"></ColumnDefinition>
<ColumnDefinition Width=".2*"></ColumnDefinition>
<ColumnDefinition Width=".2*"></ColumnDefinition>
<ColumnDefinition Width=".2*"></ColumnDefinition>
<ColumnDefinition Width=".2*"></ColumnDefinition>
</Grid.ColumnDefinitions>

<Label Grid.ColumnSpan="5" Grid.Row="0" VerticalContentAlignment="Center" 
HorizontalContentAlignment="Center" FontSize="24" Foreground="White"
Content="Seleccione una imagen para superponer">
</Label>

<Button Grid.Column="0" Grid.Row="1" Name="btnIconRed" Width="64" Height="64" 
Padding="0">
<Button.Content>
<Image Source="{StaticResource IconRed}" Width="56" Height="56" 
Stretch="Uniform" Margin="0"></Image>
</Button.Content>
</Button>
<Button Grid.Column="1" Grid.Row="1" Name="btnIconGreen" Width="64" Height="64" 
Padding="0">
<Button.Content>
<Image Source="{StaticResource IconGreen}" Width="56" Height="56" 
Stretch="Uniform" Margin="0"></Image>
</Button.Content>
</Button>
<Button Grid.Column="2" Grid.Row="1" Name="btnIconBlue" Width="64" Height="64" 
Padding="0">
<Button.Content>
<Image Source="{StaticResource IconBlue}" Width="56" Height="56" 
Stretch="Uniform" Margin="0"></Image>
</Button.Content>
</Button>
<Button Grid.Column="3" Grid.Row="1" Name="btnIconPink" Width="64" Height="64" 
Padding="0">
<Button.Content>
<Image Source="{StaticResource IconPink}" Width="56" Height="56" 
Stretch="Uniform" Margin="0"></Image>
</Button.Content>
</Button>
<Button Grid.Column="4" Grid.Row="1" Name="btnIconBlack" Width="64" Height="64" 
Padding="0">
<Button.Content>
<Image Source="{StaticResource IconBlack}" Width="56" Height="56" 
Stretch="Uniform" Margin="0"></Image>
</Button.Content>
</Button>                    

<Button Grid.ColumnSpan="5" Grid.Row="2" Name="btnIconReset" Width="125" 
Height="30" Content="Reset Overlay"></Button>
</Grid>
</TabItem>

Ya hemos terminado con todo el código xaml necesario para el IconOverlay, ahora vamos a por el código, lo primero es iniciar, en el evento Loaded de nuestra Window , el estado del IconOverlay a ninguno:

#Region "Window Code"
Private Sub MainWindow_Loaded(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles Me.Loaded
Me.TaskbarItemInfo.Overlay = Nothing
End Sub
#End Region

Como ves, acceder a las propiedades del icono de nuestra aplicación en la barra de tareas es muy sencillo gracias al objeto TaskbarItemInfo que hemos creado en Xaml.

En este caso asignando Nothing le indicamos que no tiene ningún icono asociado.

Ahora, en el evento Click de cada botón vamos a establecer el icono asociado al botón como el icono a colocar sobre la barra de tareas:

#Region "Taskbar IconOverlay"
Private Sub btnIconBlack_Click(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles btnIconBlack.Click
Me.TaskbarItemInfo.Overlay = CType(Resources("IconBlack"), ImageSource)
End Sub

Private Sub btnIconBlue_Click(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles btnIconBlue.Click
Me.TaskbarItemInfo.Overlay = CType(Resources("IconBlue"), ImageSource)
End Sub

Private Sub btnIconGreen_Click(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles btnIconGreen.Click
Me.TaskbarItemInfo.Overlay = CType(Resources("IconGreen"), ImageSource)
End Sub

Private Sub btnIconPink_Click(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles btnIconPink.Click
Me.TaskbarItemInfo.Overlay = CType(Resources("IconPink"), ImageSource)
End Sub

Private Sub btnIconRed_Click(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles btnIconRed.Click
Me.TaskbarItemInfo.Overlay = CType(Resources("IconRed"), ImageSource)
End Sub

Private Sub btnIconReset_Click(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles btnIconReset.Click
Me.TaskbarItemInfo.Overlay = Nothing
End Sub
#End Region

Bueno, no es muy complicado ¿no? Al principio del artículo creamos unos recursos de la ventana que eran del tipo DrawingImage, simplemente lo que hacemos en este código es convertir estos recursos al tipo ImageSource, que es el que espera la propiedad Overlay del objeto TaskbarItemInfo y asignarlos, el resultado es inmediato, si presionamos el botón que tiene asociado el avatar de fuego este será el resultado:

Y si presionamos el botón Reset Overlay volverá a su estado normal:

Como veis es un código muy sencillo y que nos abre nuevas vías de comunicación con nuestros usuarios, podríamos por ejemplo mostrar un icono cuando se ha producido un error, si se require la intervención del usuario en una tarea o si hay nuevos datos, de esta forma nuestro usuario no dependería de estar viendo nuestra ventana para saber que pasa, podría estar consultando el correo, trabajando en excel o simplemente viendo algunas páginas de internet y se enteraría instantáneamente de la necesidad de intervenir en nuestra aplicación.

ProgressBar

Si el IconOverlay te ha parecido sencillo, el uso de la barra de progreso en el icono de la barra de tareas lo es más, vamos a empezar diseñando la pantalla:

<TabItem Header="Taskbar ProgressBar" Name="TabItem2">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/
WPF Icon Overlay And ProgressBar;
component/images/progressbar.png" 
Stretch="Uniform" Opacity=".2" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height=".25*"></RowDefinition>
<RowDefinition Height=".25*"></RowDefinition>
<RowDefinition Height=".25*"></RowDefinition>
<RowDefinition Height=".25*"></RowDefinition>
</Grid.RowDefinitions>

<Label Grid.Row="0" VerticalContentAlignment="Center" 
HorizontalContentAlignment="Center" FontSize="24" Foreground="White"
Content="Mueve el Slider para Aumentar/Disminuir">
</Label>

<ComboBox Grid.Row="1" Name="cmbEstilos" Height="30" Width="Auto" Margin="5" 
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ComboBox.Items>
<ComboBoxItem Name="ItemNormal" Content="Normal"/>
<ComboBoxItem Name="ItemError" Content="Error"/>
<ComboBoxItem Name="ItemStop" Content="Stop"/>
<ComboBoxItem Name="ItemIndeterminate" Content="Indeterminado"/>
<ComboBoxItem Name="ItemNone" Content="Ninguno"/>
</ComboBox.Items>
</ComboBox>

<ProgressBar Grid.Row="2" Name="Pbar" Height="30" Width="Auto" Margin="5" 
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Minimum="0" Maximum="100" 
Value="{Binding Path=Value, ElementName=SlidValue}"></ProgressBar>

<Slider Grid.Row="3" Name="SlidValue" Height="30" Width="Auto" Margin="5" 
HorizontalAlignment="Stretch" VerticalAlignment="Center" 
Minimum="0" Maximum="100" Value="50" SmallChange="1">
</Slider>
</Grid>
</TabItem>

El código Xaml es muy sencillo, quizás lo más remarcable, y muy útil, es el Binding que le he aplicado a la propiedad Value de la progressBar, este binding apunta hacia la propiedad Value del control Slider, de esta forma, cada ver que movamos el Slider automáticamente se moverá la barra de progreso.

Como veis existe un Combo con varias opciones, estos son los estados que puede tener la barra de progreso en la barra de tareas:

Normal: La barra de progreso aparece de forma normal, en color verde.
Error: Igual que la normal, solo que el color de esta es rojo.
Stop: La barra de progreso esta parada y no puede avanzar, el color es amarillo.
Indeterminate: La barra no tiene un progreso determinado, hace una animación ciclica.
None: No se muestra la barra de progreso.

Si os ponéis a pensar, seguro que ya se os están ocurriendo mil usos… un proceso largo en background que pueda tardar varios minutos, el usuario puede minimizar la aplicación y ver el progreso y resultado sin maximizarla, mientras trabaja en otra aplicación, puede ver cuando la tarea se ha detenido y necesita su atención (barra amarilla) cuando se ha producido un error (barra roja) o simplemente el progreso de la tarea, para ver si le da tiempo a tomar un cafe :), si combinamos esto con los IconOverlay, ¿os dais cuenta de la potencia que obtenemos de comunicación con nuestro usuario? Podemos hacerle conocer el estado de nuestra aplicación sin ni siquiera maximizar la ventana, mientras está haciendo otras cosas, se acabaron los tiempos muertos.

El código también es muy sencillo, en el evento Loaded establecemos la barra de progreso a None:

#Region "Window Code"
Private Sub MainWindow_Loaded(ByVal sender As Object, 
ByVal e As System.Windows.RoutedEventArgs) 
Handles Me.Loaded
Me.TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.None
End Sub
#End Region

Y ahora controlamos el evento ValueChanged del control Slider para asignar el valor a nuestra barra de progreso en la barra de tareas:

Private Sub SlidValue_ValueChanged(ByVal sender As Object, 
ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of Double)) 
Handles SlidValue.ValueChanged
Me.TaskbarItemInfo.ProgressValue = SlidValue.Value / 100
End Sub

Dos cosas aquí, primero, no es necesario tener una progressbar en nuestra ventana para que funcione la progressbar de la barra de tareas, pero creo que es necesario de cara al usuario tener ambos métodos, para no obligarle a tener que mirar la barra de tareas si está viendo nuestra ventana. Segundo, la propiedad ProgressValue del objeto TaskbarItemInfo tiene un rango de 1 a 0, por lo que debemos dividir el valor de nuestro control Slider o nuestro progreso entre 100 y siempre mantener valores entre 0 y 100 para no tener problemas.

Por último vamos a controlar el evento SelectionChanged del combobox para cambiar nuestro tipo de barra de progreso al indicado en el desplegable:

Private Sub combo_SelectionChanged(ByVal sender As Object, 
ByVal e As System.Windows.Controls.SelectionChangedEventArgs) 
Handles cmbEstilos.SelectionChanged

Select Case DirectCast(e.AddedItems(0), System.Windows.Controls.ComboBoxItem).Content
Case "Normal"
SlidValue.IsEnabled = True
Pbar.IsIndeterminate = False
Me.TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.Normal
Case "Error"
SlidValue.IsEnabled = True
Pbar.IsIndeterminate = False
Me.TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.Error
Case "Stop"
SlidValue.IsEnabled = True
Pbar.IsIndeterminate = False
Me.TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.Paused
Case "Indeterminado"
SlidValue.IsEnabled = False
Pbar.IsIndeterminate = True
Me.TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.Indeterminate
Case "Ninguno"
SlidValue.IsEnabled = True
Pbar.IsIndeterminate = False
Me.TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.None
End Select
End Sub

Y con esto nuestra aplicación ya será capaz de mostrar la barra de progreso en sus diferentes estilos:

Bueno, esto es todo por hoy, como podéis ver es un tema apasionante que nos abre nuevas alternativas de comunicación con el usuario, así que es nuestra obligación aprovecharlas, en el próximo artículo hablaremos de las Jumplist y los Thumbnail Toolbars, como nuevas formas de interactuar con nuestra aplicación.

Y recordad, con un simple comentario, podéis hacer feliz a un pequeño bloguero :)

Muchas gracias por leerme y Happy Coding!

Descargar código

WPF: Obtener datos del sistema de energía de Windows 7

Josué Yeray Julián Ferreiro — Mon, 26 Jul 2010 04:39:35 GMT

Revisión actual enviado a Wiki sobre WPF en Geeks•ms por Josué Yeray Julián Ferreiro a 7/26/2010 6:39:35 AM

Hola a todos de nuevo!

En mi opinión uno de los grandes retos que tenemos los desarrolladores hoy en día (entre muchos otros) es aprovechar todas las ventajas que nos ofrece el sistema operativo e intentar que nuestra aplicación se mimetice con el mismo de tal forma que la linea de separación entre aplicación y S.O. se desdibuje lo máximo posible, de esa forma, nuestros usuarios tendrán menos trabajo a la hora de acostumbrarse a nuestra aplicación, pues la forma de usarla, y la forma en que esta se comporta les será mucho más familiar. En este sentido Windows 7 ha sido un gran avance, poniendo a nuestra disposición un gran número de características que podemos incorporar en nuestra aplicación como la gestión de energía, las jumplist, los Thumbnails con toolbars, las barras de progreso tras el icono de la barra de tareas y muchas otras más.

Voy a centrar algunos artículos sobre estos temas, Windows 7 es el S.O. de más rápida adopción de la Historia, con 150 millones de licencias vendidas y estos números hacen que centrarse en incorporar características propias de el sea una apuesta segura para nosotros y una gran ventaja tanto para nuestra aplicación como para nuestros usuarios.

He decidido comenzar con la gestión de energía, cada vez más los portátiles ganan terreno en el ámbito empresarial y en poco tiempo veremos una explosión en tablets equipadas con Windows 7, con lo que nuestras aplicaciones se empezarán a mover a estos nuevos escenarios donde una cosa prima frente a todas: la duración de la batería.

Debemos hacer que nuestras aplicaciones sean amigables con la energía, tenemos que comprender que el escritorio y el laptop / tablet son dos escenarios distintos e intentar evitar consumir toda la vida de la batería en un tiempo reducido, haciendo que nuestras aplicaciones conozcan el estado actual de la batería del dispositivo sobre el que se ejecutan podremos tomar decisiones en concordancia con el % de energía disponible e incluso sugerir a nuestro usuario que modifique la forma en que está usando nuestra aplicación para maximizar la vida de la misma.

Con este objetivo en mente, vamos a empezar, primero echadle un vistazo a nuestra aplicación terminada:

Realmente es mucha información con la que podemos jugar, sabemos el tipo de fuente de energía que estamos consumiendo, si tenemos sistemas de alimentación ininterrumpida, la capacidad máxima y actual de la batería, y las alertas de cargas criticas (cuando el S.O. se va a cerrar) o mínimas (cuando empieza a avisarnos) y por supuesto el % restante de la batería.

Vamos a comenzar, lo primero es crear un nuevo proyecto WPF Application (File > New > Project), una vez creado, vamos a diseñar la pantalla principal en el archivo MainWindow.xaml

Los estilos que he usado en esta aplicación están disponibles en la descarga en el archivo Application.xaml, si tenéis dudas acerca de como usar / crear estilos, echadle un vistazo en esta Wiki a los artículos sobre personalización de nuestra aplicación.

Los controles usados son muy básicos, la batería que se ve en la esquina superior derecha es una progressbar, textblocks para el texto, dos checkbox, un tabcontrol y grids para ordenar todo un poco, aquí podéis ver el XAML:

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="Black">
</GradientStop>
<GradientStop Offset="1" Color="DarkGray">
</GradientStop>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Name="BateriaPercent" FontSize="24" 
Text="Batería restante (%):" VerticalAlignment="Center" 
HorizontalAlignment="Left" Foreground="White" 
Margin="6,0,0,0"/>
<ProgressBar Height="40" Margin="245,5,12,0" Name="pBarEnergia" 
VerticalAlignment="Top" Value="0" />
<TabControl Grid.Row="1" Margin="12,6,12,12" Name="TabControl1">
<TabItem Header="Información de energía" Name="TabItem1">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/WPF Power Management;component/Info.png" 
Stretch="Uniform" Opacity=".2"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".4*"></ColumnDefinition>
<ColumnDefinition Width=".6*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".1*"></RowDefinition>
<RowDefinition Height=".1*"></RowDefinition>
<RowDefinition Height=".1*"></RowDefinition>
<RowDefinition Height=".7*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Name="tbFuente" Text="Fuente de energía:" 
VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="White" 
Margin="6,0,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Name="tbFuenteText" VerticalAlignment="Center" 
HorizontalAlignment="Left" Foreground="White" Margin="6,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="0" Name="tbBateriaPresent" Text="Batería presente:" 
VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="White" 
Margin="6,0,0,0"/>
<CheckBox  Grid.Row="1" Grid.Column="1" Name="chkBateriaPresente" HorizontalAlignment="Left" 
Height="20" VerticalAlignment="Center"></CheckBox>
<TextBlock Grid.Row="2" Grid.Column="0" Name="tbUPSPresent" Text="UPS presente:" 
VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="White" 
Margin="6,0,0,0"/>
<CheckBox  Grid.Row="2" Grid.Column="1" Name="chkUpsPresente" HorizontalAlignment="Left" 
Height="20" VerticalAlignment="Center"></CheckBox>
<TextBlock Grid.Row="3" Grid.Column="0" Name="tbEstadoBateria" Text="Estado de la batería:" 
VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="White" Margin="6,0,0,0"/>
<TextBlock Grid.Row="3" Grid.Column="1" Name="tbEstado" VerticalAlignment="Top" 
HorizontalAlignment="Left" Foreground="White"/>
</Grid>
</TabItem>
</TabControl>
</Grid>

Si lo miráis con detenimiento veréis que no es nada complicado.

Para trabajar con el sistema de energía de Windows 7 debemos jugar con las apis de win32 (no manejadas) de windows, por ello, lo mejor es crear una nueva clase separada que se encargue de todo el trabajo de importar y llamar a las funciones necesarias del api y nos devuelva la información que necesitamos.

Para esto necesitaremos los InteropServices, por lo que lo mejor es importar este namespace en esta nueva clase:

Imports System.Runtime.InteropServices

Public Class PowerManagement
'...
'...
'...
End Class

Ahora debemos empezar a definir las constantes necesarias para que nuestro código sea más legible en esta clase:

'Esta constante identifica el valor devuelto por CallNtPowerInformation
'si el acceso a este método nos fue negado por seguridad.
Const STATUS_ACCESS_DENIED As UInteger = 3221225506

'Estas constantes definen el tipo de información que solicitamos en el 
'método no manejado CallNtPowerInformation se usan en el parámetro InformationLevel.
Const SYSTEM_POWERCAPABILITIES As Integer = 4 'Capacidades de energía del sistema.
Const SYSTEM_BATTERYINFO As Integer = 5 'Estado de la batería.

Como podéis ver tenemos 3 constantes, esto es lo que significa cada una:

Constante	Descripción
STATUS_ACCESS_DENIED	Este valor es devuelto por el método CallNtPowerInformation si no tenemos suficientes permisos para ejecutarlo.
SYSTEM_POWERCAPABILITIES	Este valor indica al método CallNtPowerInformation que deseamos obtener las capacidades de energía del sistema.
SYSTEM_BATTERYINO	Este valor indica al método CallNtPowerInformation que deseamos obtener información sobre la batería del sistema.

A continuación debemos definir 2 estructuras que contendrán los valores devueltos por el método CallNtPowerInformation. La primera se llama SystemPowerCapabilities y contendrá toda la información con las capacidades de energía del sistema:

<StructLayout(LayoutKind.Sequential)>
Structure SystemPowerCapabilities
<MarshalAs(UnmanagedType.I1)>
Public PowerButtonPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public SleepButtonPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public LidPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public SystemS1 As Boolean
<MarshalAs(UnmanagedType.I1)>
Public SystemS2 As Boolean
<MarshalAs(UnmanagedType.I1)>
Public SystemS3 As Boolean
<MarshalAs(UnmanagedType.I1)>
Public SystemS4 As Boolean
<MarshalAs(UnmanagedType.I1)>
Public SystemS5 As Boolean
<MarshalAs(UnmanagedType.I1)>
Public HiberFilePresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public FullWake As Boolean
<MarshalAs(UnmanagedType.I1)>
Public VideoDimPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public ApmPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public UpsPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public ThermalControl As Boolean
<MarshalAs(UnmanagedType.I1)>
Public ProcessorThrottle As Boolean
Public ProcessorMinThrottle As Byte
Public ProcessorMaxThrottle As Byte
<MarshalAs(UnmanagedType.I1)>
Public FastSystemS4 As Boolean
Public spare2_1 As Byte
Public spare2_2 As Byte
Public spare2_3 As Byte
<MarshalAs(UnmanagedType.I1)>
Public DiskSpinDown As Boolean
Public spare3_1 As Byte
Public spare3_2 As Byte
Public spare3_3 As Byte
Public spare3_4 As Byte
Public spare3_5 As Byte
Public spare3_6 As Byte
Public spare3_7 As Byte
Public spare3_8 As Byte
<MarshalAs(UnmanagedType.I1)>
Public SystemBatteriesPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public BatteriesAreShortTerm As Boolean
Public granularity As Integer
Public capacity As Integer
End Structure

Como podéis observar hay mucha más información que la que yo he escogido para mostrar, realmente podemos controlar de una forma milimétrica el consumo energético y las capacidades técnicas en cuanto a energía de la máquina en la que nos encontramos.

El decorador de la estructura <StructureLaout(LayoutKind.Sequential)> indíca al interop que los campos de la misma se ordenarán de forma consecutiva tal y como los hemos expresado aquí. El decorador <MarshalAs(UnmanagedType.I1)> le indica al interop de que forma debe trabajar con el tipo de dato a continuación (boolean en todos los casos) para facilitar la conversión de información entre tipos de datos .NET (manejados) y Win32 (no manejados).

La segunda estructura es SystemBatteryState y contendrá toda la información referente a la batería de nuestro equipo:

<StructLayout(LayoutKind.Sequential)>
Structure SystemBatteryState
<MarshalAs(UnmanagedType.I1)>
Public AcOnLine As Boolean
<MarshalAs(UnmanagedType.I1)>
Public BatteryPresent As Boolean
<MarshalAs(UnmanagedType.I1)>
Public Charging As Boolean
<MarshalAs(UnmanagedType.I1)>
Public Discharging As Boolean
Public spare1 As Byte
Public spare2 As Byte
Public spare3 As Byte
Public spare4 As Byte
Public MaxCapacity As UInteger
Public RemainingCapacity As UInteger
Public Rate As UInteger
Public EstimatedTime As UInteger
Public DefaultAlert1 As UInteger
Public DefaultAlert2 As UInteger
End Structure

Esta es bastante más pequeña que la anterior y usa los mismos tipos de decorados.

Para terminar de declarar el acceso a Win32 solo nos falta importar la función necesaria desde la Dll de win32 encargada de las tareas de gestión de energía powrprof.dll:

<DllImport("powrprof.dll", SetLastError:=True)>
Private Shared Function CallNtPowerInformation(ByVal InformationLevel As Int32, 
ByVal lpInputBuffer As IntPtr, 
ByVal nInputBufferSize As UInt32,
ByVal lpOutputBuffer As IntPtr, 
ByVal nOutputBufferSize As UInt32) As UInt32
End Function

Esta función CallNtPowerInformation será la que usaremos para comunicarnos con Windows 7 y obtener todos los datos de energía que necesitemos. Tiene 5 parámetros, el 2º y 3º parámetro no son importantes, puesto que no queremos enviarle información, tan solo recibir, el 2º se envía con Nothing y el 3º se envía 0, en cuanto al primer parámetro, aquí es donde usaremos las dos constantes definidas más arriba (SYSTEM_) para indicarle a la función que tipo de información estamos solicitando, el 4º parámetro es un puntero a la variable en la que queramos almacenar la información recibida y el 5º es el tamaño actual de esa variable.

Bien, ahora que hemos terminado de declarar todo lo necesario para trabajar con el api de win32, vamos a crear dos nuevos métodos en esta clase que se encarguen de obtener la información que deseamos.

En primer lugar creamos el método GetPowerCapabilities con este código:

Public Shared Function GetPowerCapabilities() As SystemPowerCapabilities
Dim PowerCapabilities As SystemPowerCapabilities
Dim Status As IntPtr = IntPtr.Zero
Dim ReturnValue As UInteger
Try
Status = Marshal.AllocCoTaskMem(Marshal.SizeOf(GetType(SystemPowerCapabilities)))
ReturnValue = CallNtPowerInformation(SYSTEM_POWERCAPABILITIES, Nothing, 0, Status, 
Marshal.SizeOf(GetType(SystemPowerCapabilities)))
If ReturnValue = STATUS_ACCESS_DENIED Then
MessageBox.Show("Su usuario no tiene permisos de acceso suficientes para obtener 
información sobre el sistema de energía.")
Return Nothing
End If
PowerCapabilities = Marshal.PtrToStructure(Status, GetType(SystemPowerCapabilities))
Catch ex As Exception
Finally
Marshal.FreeCoTaskMem(Status)
End Try
Return PowerCapabilities
End Function

Vamos a revisar con detenimiento el código de este método, si no has trabajado antes con funciones del win32 desde .NET verás un par de cosas que te sonarán a chino, sobre todo las que empiezan por Marshal.

Marshal es una clase del namespace InteropServices que nos facilita el trabajo con métodos no manejados, es muy completa y tiene muchos métodos, en nuestro caso usamos 4:

Método	Descripción
Marshal.AllocCoTaskMem	Nos sirve para reservar un bloque de memoria del asignador de tareas COM del tamaño indicado y nos devuelve un puntero al bloque asignado.
Marshal.FreeCoTaskMem	Con este método liberamos un bloque de memoria obtenido con anterioridad con el método AllocCoTaskMem.
Marshal.PtrToStructure	Copiamos el contenido del bloque de memoria al que apunta el puntero que le indicamos a una estructura para poder acceder a los datos.
Marshal.SizeOf	Devuelve el tamaño en Bytes de un objeto, sin tener en cuenta la sobrecarga de los tipos manejados, nos devuelve el tamaño no manejado, que es el necesario para las funciones no manejadas.

En esta función usamos la tercera constante que habíamos declarado (STATUS_ACCESS_DENIED) si el resultado de la llamada a CallNtPowerInformation devuelve este valor, significa que nuestro usuario no tiene permisos para realizar esta llamada.

En último lugar, debemos crear el segundo método que interactuará con el API de win32, GetBatteryInformation:

Public Shared Function GetBatteryInformation() As SystemBatteryState
Dim Status As IntPtr = IntPtr.Zero
Dim BattStatus As SystemBatteryState
Dim ReturnValue As UInteger
Try
Status = Marshal.AllocCoTaskMem(Marshal.SizeOf(GetType(SystemBatteryState)))
ReturnValue = CallNtPowerInformation(SYSTEM_BATTERYINFO, Nothing, 0, Status, 
Marshal.SizeOf(GetType(SystemBatteryState)))
If ReturnValue = STATUS_ACCESS_DENIED Then
MessageBox.Show("Su usuario no tiene permisos de acceso suficientes para obtener 
información sobre el estado de la batería.")
Return Nothing
End If
BattStatus = Marshal.PtrToStructure(Status, GetType(SystemBatteryState))
Catch ex As Exception
Finally
Marshal.FreeCoTaskMem(Status)
End Try
Return BattStatus
End Function

El código es básicamente el mismo, si te fijas bien los únicos cambios son el primer parámetro de la función CallNtPowerInformation y el tipo de estructura que queremos obtener, en este caso lo que obtenemos es todos los detalles sobre la batería del sistema, carga máxima, carga actual, fuente de energía, etc…

Bueno, con esto hemos terminado el trabajo con el API de Win32, ahora solo nos queda algo más de código en nuestra ventana principal de WPF para poder hacer que todo esto funcione. Empecemos con las declaraciones de variables, necesitamos 3 variables globales de la clase y privadas:

Private MySPC As PowerManagement.SystemPowerCapabilities
Private MyBatt As PowerManagement.SystemBatteryState
Private WithEvents Tmr As New DispatcherTimer

Básicamente, definimos una variable por cada estructura necesaria, SystemPowerCapabilities y SystemBatteryState y un control DispatcherTimer que será el encargado de refrescar constantemente la información del sistema de energía. En el evento Load, configuraremos el Timer y comprobaremos la versión de sistema operativo sobre la cual nos estamos ejecutando, ten en cuenta que este código es para Windows 7 y lo más probable es que falle en algunos puntos en XP o Vista:

'Comprobamos que estemos en un Windows 7:
If Environment.OSVersion.Version.Major = 6 And 
Environment.OSVersion.Version.Minor > 0 Then
Tmr.Interval = New TimeSpan(0, 0, 1)
Tmr.IsEnabled = True
Else
MessageBox.Show("Es necesario windows 7 
para poder ejecutar este programa.")
End If

Este es un código muy sencillo, sobre todo después del empacho de Interop y Win32 que nos hemos dado anteriormente jeje, simplemente comprobamos que estemos ejecutando Windows 7, que a pesar de su nombre es la versión 6.1 del sistema operativo, por lo que comprobamos que estemos en un sistema superior al 6.0, es muy posible que el próximo windows soporte este código, así que lo mejor es buscar un sistema cuya versión sea superior a 6.0 (Windows Vista). Una vez hecho esto configuramos el intervalo del timer a 1 segundo y lo habilitamos.

El control DispatcherTimer no dispara el evento Elapsed como el Timer de siempre de Windows Forms, en este caso debemos manejar el evento Tick:

Private Sub Tmr_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Tmr.Tick
Tmr.IsEnabled = False
MySPC = PowerManagement.GetPowerCapabilities()
'Comprobamos si existe batería en el equipo:
If MySPC.SystemBatteriesPresent = True Then
SetValues()
End If
Tmr.IsEnabled = True
End Sub

En este caso cuando recibimos el evento lo primero que hacemos es desactivar el timer, ya que no queremos que se dispare de nuevo hasta que hayamos terminado, llamamos a nuestro método GetPowerCapabilities y comprobamos si el equipo contiene baterías, si es así llamamos a un método SetValues que se encarga de pasar los valores obtenidos a nuestros controles de visualización y por último volvemos a habilitar el timer para que siga su ciclo de refresco normal.

El último método que necesitamos se llama SetValues, simplemente obtiene los valores de energía necesarios y los pasa a los controles para que los visualicemos:

Private Sub SetValues()
tbFuenteText.Text = If(MyBatt.AcOnLine = True, "Corriente Alterna", "Batería")
chkBateriaPresente.IsChecked = MySPC.SystemBatteriesPresent
chkUpsPresente.IsChecked = MySPC.UpsPresent
'Obtenemos información de la batería
MyBatt = PowerManagement.GetBatteryInformation()
pBarEnergia.Value = Math.Round((MyBatt.RemainingCapacity * 100) / MyBatt.MaxCapacity, 0)
tbEstado.Text = "Corriente externa: "+If(MyBatt.AcOnLine=True,"SI","NO")+vbCrLf+ 
"Capacidad Máxima: "+MyBatt.MaxCapacity.ToString+"mWh"+vbCrLf+
"Capacidad Actual: "+MyBatt.RemainingCapacity.ToString+"mWh"+vbCrLf+
"Alerta carga minima: "+MyBatt.DefaultAlert2.ToString+"mWh"+vbCrLf+
"Alerta carga crítica: "+MyBatt.DefaultAlert1.ToString+"mWh"
End Sub

Y con esto, si compilamos nuestra aplicación (y estamos trabajando en Windows 7, con un portatil o tablet) deberíamos ver toda la información de energía que os indique al principio del artículo.

Y recordad, con un simple comentario, podéis hacer feliz a un pequeño bloguero :)

Muchas gracias por leerme y Happy Coding!

Descargar código

WPF: Personalizar nuestra aplicación con Styles y Control Templates (II)

Josué Yeray Julián Ferreiro — Mon, 26 Jul 2010 04:35:54 GMT

Revisión actual enviado a Wiki sobre WPF en Geeks•ms por Josué Yeray Julián Ferreiro a 7/26/2010 6:35:54 AM

WPF: Personalizar nuestra aplicación con Styles y Control Templates (II)

Archivado en: WPF, Styles, ControlTemplate

En la primera parte de este artículo aprendimos las distintas formas que nos ofrece WPF para personalizar nuestros controles, centrándonos en los estilos y las plantillas de control. Le dimos un repaso a la teoría básica sobre elementos comunes y diccionarios de recursos.

Si te lo perdiste o quieres darle un repaso aquí lo tienes:

WPF: Personalizar nuestra aplicación con Styles y Control Templates (I)

Esta vez vamos a ir directamente al meollo de la cuestión, examinando a fondo como personalizar varios controles estándar de WPF como son los siguientes:

Button
Textbox
Scrollbars (Horizontales y Verticales)
ProgressBar

Button

El botón es uno de los controles más sencillos de personalizar, pero a su vez es uno de los controles más útiles y el usuario interactúa mucho con ellos, por lo que es importante hacerlos lo más atractivos que podamos:

Algo muy importante a recordar cuando creamos nuestras propias plantillas es que estas substituyen completamente la plantilla por defecto del control, por lo que si queremos dar indicaciones visuales de que nuestro botón está activado, desactivado, pulsado, con foco o con el ratón sobre el, deberemos hacerlo nosotros, esto lo lograremos aprovechándonos de los Triggers del control.

Lo primero que vamos a hacer es definir un estilo nuevo para todos los controles del tipo Button, pues no queremos aplicarlo de forma selectiva a ciertos botones, queremos que sea la apariencia predeterminada de cualquier botón en nuestra aplicación:

<Style TargetType="{x:Type Button}">

</Style>

Simplemente en la cabecera Style definimos la propiedad TargetType al tipo Button. Ahora vamos a incluir algunas propiedades por defecto para nuestro botón dentro de este bloque Style:

<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="White" />

El objeto Setter es muy sencillo, simplemente tiene el atributo Property que especifica el nombre de la propiedad que queremos establecer y el atributo Value que especifica el valor a aplicar en esa propiedad. La propiedad OverridesDefaultStyle indica a nuestro control que nunca se usará el tema por defecto del control para ninguna propiedad, aunque esta no esté definida en nuestro estilo o plantilla, si no hemos implementado algo, es porque no lo necesitamos o lo suplimos de alguna otra forma. SnapsToDevicePixels indica a nuestro estilo que el dibujado de nuestro control debe usar pixeles dependientes del dispositivo. Por defecto WPF usa el DPI actual para obtener independencia de la resolución a la hora de dibujar, pero esto puede causar un efecto difuso o borroso, y en nuestro caso queremos que nuestros preciosos controles se vean bien, por lo que indicando esta propiedad evitaremos este dibujado difuso o borroso. Foreground, bueno no hay mucho que decir, en el caso de nuestro botón la propiedad Foreground afecta al texto del mismo. Puesto que nuestro botón es oscuro y por defecto el texto es de color negro, sería un incordio estar recorriendo todos los botones cambiando el texto a Blanco u otro color y precisamente queremos que modificar el aspecto de nuestra aplicación se haga de forma centralizada, por lo que al incluir esta propiedad todos los botones obtendrán texto blanco.

El último objeto Setter que necesitamos establecerá la propiedad Template del botón y dentro de este Setter definiremos nuestro Control Template:

<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="tmpltButton">
</ControlTemplate>
</Setter.Value>
</Setter>

A diferencia del estilo, que establecia su propiedad TargetType, en el ControlTemplate establecemos x:Name pues esta contenido dentro del estilo y se aplicará automáticamente allí donde se aplique el estilo.

Dentro del objeto ControlTemplate podemos empezar a definir nuestro botón, aquí es donde WPF te golpea con un derroche de realidad: ControlTemplate es una pizarra en blanco en la que puedes pintar TODO lo que tu quieras y el resultado final, será el aspecto de tu botón, no hay reglas (o no demasiadas), solo creatividad.

Nuestro botón se va a componer de 6 controles básicos: 1 Grid para mantener todo unido, 4 Borders para crear la forma y relleno y 1 ContentPresenter que presentará el contenido del botón, quedaría algo así:

<Grid>
<Border x:Name="BaseRectangle" 
Background="{StaticResource BaseColor}" 
CornerRadius="10,0,10,0">
</Border>
<Border x:Name="GlassRectangle" 
Background="{StaticResource GlassFX}" 
CornerRadius="10,0,10,0">
</Border>
<Border x:Name="GlowRectangle" 
Background="{StaticResource GlowFX}" 
CornerRadius="10,0,10,0" 
Opacity="0">
</Border>
<Border x:Name="ButtonBorder" 
CornerRadius="10,0,10,0" 
BorderBrush="Black" 
Opacity="1"  
BorderThickness="1">
</Border>
<ContentPresenter x:Name="ButtonContent" 
Opacity=".7" 
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
HorizontalAlignment="center" 
VerticalAlignment="center">
</ContentPresenter>
</Grid>

Simplemente tenemos un grid que contiene nuestros controles Border y el ContentPresenter, el primer Border BaseRectangle es nuestra capa base de pintura, como veis todos los colores se definen con enlace a recursos que ya establecimos en nuestro diccionario de recursos, de esta forma si cambiamos el color BaseColor, cambiará en todos los sitios donde esté aplicado. Todos los Border comparten el mismo valor de CornerRadius para que el control tenga la apariencia deseada, los 4 valores de CornerRadius siguen el orden de las agujas del reloj:

Esquina Superior Derecha
Esquina Superior Izquierda
Esquina Inferior Izquierda
Esquina Inferior Derecha

Aplicando un valor de 10 en las esquinas superior derecha e inferior izquierda y un valor de 0 en las otras conseguimos el efecto deseado.

La propiedad Background de los dos primeros Border define la apariencia general de nuestro botón, el primero aplicando un color base (nuestro recurso BaseColor) y el segundo aplicando un degradado llamado GlassFX que es el encargado de darle a nuestro botón el efecto de reflejo de cristal.

El tercer Border define en el background el recurso GlowFX y es el usado para la animación del foco del botón, por defecto establecemos su Opacity a 0, para animar esta propiedad más adelante con los Event Triggers de nuestra plantilla.

El último Border define el borde externo del botón, en este caso no definimos la propiedad Background por lo que es transparente pero definimos la propiedad BorderBrush que establece el color del borde y BorderThickness que establece el grosor del borde.

La apariencia de nuestro botón ya está casi completa, solo necesitamos mostrar el contenido que tenga cada botón, ya sea texto, imágenes o cualquier combinación de ambos, para esto usamos el control ContentPresenter. La propiedad más interesante en el es Content, la enlazamos directamente al Content establecido en nuestro botón:

Binding Path= Indica la propiedad a la que queremos enlazarnos.
RelativeSource= Indica la fuente de esta propiedad, en nuestro caso la dirigimos a una fuente relativa de tipo templatedparent, es decir el objeto padre de nuestra plantilla, que en este caso será cada botón que la use.

Con esto ya está totalmente terminada la apariencia de nuestro botón. si colocamos un botón en una ventana de pruebas veremos que usa nuestro estilo automáticamente. Al ejecutar, no obstante, notaremos que el botón no reacciona de ninguna manera al pasar el ratón sobre el o hacer click lo cual es muy poco intuitivo para el usuario final, esto lo resolveremos usando los Triggers del Controltemplate, justo después de la Grid, añadimos un objeto ControlTemplate.Triggers:

<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowIn}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.LostFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowIn}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Background" TargetName="GlowRectangle"
Value="{StaticResource GlowFXPressed}">
</Setter>
<Setter Property="Opacity" TargetName="ButtonContent" 
Value="1">
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="ButtonContent" 
Value=".3">
</Setter>
<Setter Property="Opacity" TargetName="ButtonBorder" 
Value=".5">
</Setter>
<Setter Property="Background" TargetName="GlassRectangle" 
Value="{StaticResource GlassFXDisabled}">
</Setter>
</Trigger>
</ControlTemplate.Triggers>

Como podéis ver en este snippet, tenemos dos tipos de Triggers: Trigger y EventTrigger.

Los Trigger se disparan cuando la propiedad Indicada tiene el valor indicado, mientras que los EventTrigger se disparan cuando el evento indicado es lanzado. La mayor diferencia es que los EventTriggers nos permiten lanzar animaciones como indicación visual a un cambio en el estado del control.

En el caso de nuestro Botón respondemos a 4 eventos: MouseEnter, MouseLeave, LostFocus y GotFocus.

Cada EventTrigger define un objeto EventTrigger.Actions y dentro de este encontramos el objeto BeginStoryboard, que inicia la animación indicada en su propiedad Storyboard (En el primer capítulo ya hablamos sobre las animaciones y explicamos como crear animaciones sencillas).

También controlamos el cambio de 2 propiedades: IsPressed e IsEnabled.

Cada uno de estos 2 triggers se lanzará cuando la propiedad indicada tenga el valor indicado (Cuando IsPressed sea True y cuando IsEnabled sea false) y aplicará por medio de los objetos Setter valores a otras propiedades. Cada objeto Setter define Property que indica el nombre de la propiedad a modificar, TargetName que indica el nombre del objeto de nuestra plantilla al que afectará la modificación y value que indica el nuevo valor que tendrá la propiedad.

Si volvemos a ejecutar nuestro proyecto comprobaremos que ahora gracias a los Triggers, nuestro botón reacciona al pasar el ratón sobre el, al abandonarlo el ratón, al llegar a el con el tabulador o al salir de el, al presionarlo y al desactivarlo,con lo que conseguimos una respuesta visual muy importante para nuestro usuario final.

Textbox

En general nuestro control Textbox se compone de forma muy parecida al Botón, el mayor cambio en la composición del control viene dado porque en este caso, en vez de usar un control ContentPresenter usaremos un control ScrollViewer, (que personalizaremos más adelante también) para permitir que el usuario pueda usar las barras de desplazamiento vertical y horizontal en una caja de texto multilinea:

El código xaml del objeto ScrollViewer es este:

<ScrollViewer x:Name="PART_ContentHost" 
Opacity=".7" 
Content="{Binding Path=Content, 
RelativeSource={RelativeSource TemplatedParent}}" 
HorizontalAlignment="{Binding Path=HorizontalAlignment, 
RelativeSource={RelativeSource TemplatedParent}}" 
VerticalAlignment="{Binding Path=VerticalAlignment, 
RelativeSource={RelativeSource TemplatedParent}}" 
Width="{Binding Path=Width, 
RelativeSource={RelativeSource TemplatedParent}}" 
Height="{Binding Path=Height, 
RelativeSource={RelativeSource TemplatedParent}}">
</ScrollViewer>

En este caso salvo la Opacity del ScrollViewer, el resto de propiedades (Content, HorizontalAlignment, VerticalAlignment, Width y Height) se han enlazado al control padre de la plantilla para ilustrar que cualquier propiedad compartida entre un control de la plantilla y el control padre puede ser enlazada.

En este caso, el nombre definido al ScrollViewer no es al azar, este control tiene código enlazado con el ScrollViewer en su plantilla original, esta es una pequeña limitación y una de las pocas que encontraremos, para que todo siga funcionando correctamente, debemos respetar el nombre, en este caso PART_ContentHost. Microsoft recomienda que siempre que tengamos que usar código contra un objeto parte de una plantilla lo llamemos PART_xxxxxxxx para de esta forma seguir una nomenclatura común.

En este caso los Triggers usados son más sencillos que los del botón, usamos 2 EventTrigger LostFocus y GotFocus y un Trigger a la propiedad IsEnabled:

<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="TextBox.LostFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="TextBox.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowIn}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="PART_ContentHost" 
Value=".3">
</Setter>
<Setter Property="Opacity" TargetName="BorderExtern" 
Value=".5">
</Setter>
<Setter Property="Fill" TargetName="GlassRectangle" 
Value="{StaticResource GlassFXDisabled}">
</Setter>
</Trigger>
</ControlTemplate.Triggers>

Scrollbars

El control scrollbar nos va a dar algo más de trabajo que los dos primeros controles, pues involucra partes móviles y puede cambiar de orientación, de vertical a horizontal.

Para este control Debemos definir varios estilos por separado y controltemplates independientes, uno para la barra vertical y otro para la barra horizontal.

Primero empezaremos definiendo los estilos de los controles que componen un scrollbar, LineButtons, PageButtons y ScrollThumb:

LineButton:

Los LineButtons son los botones en los extremos del scrollbar, el tipo de control es repeatbutton y su controltemplate es muy sencillo:

<ControlTemplate x:Name="tmplRepeatButton">
<Border Background="#FF222222" BorderBrush="DarkBlue" 
BorderThickness="1" CornerRadius="3">
<Path HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Data="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}" 
Fill="Cyan" >
</Path>
</Border>
</ControlTemplate>

Se compone solo de dos controles, un Border que define el aspecto del control, y contiene un objeto Path, cuya propiedad Data asociamos a la propiedad Content del control al que añadiremos esta plantilla. La gran potencia del objeto Path viene dada por su propiedad Data, pues dispone de un “mini lenguaje” para especificar geometrías complejas de una forma rápida y sencilla. Podéis encontrar una referencia muy completa en msdn aquí.

Su nombre viene indicado por la acción que realiza, pues cada vez que se pulsa un LineButton se avanza o retrocede una linea del control que estemos usando.

PageButtons:

Los page buttons actúan como el fondo de la barra sobre la que desplazamos el scrollbar, como su nombre indica son los encargados de mover adelante o atrás una página completa, el tipo de control es también repeatbutton.

Su control template es muy sencillo y se compone de un solo objeto Border:

<ControlTemplate x:Name="tmplRepeatButton">
<Border Background="#66000000" BorderBrush="Black" 
BorderThickness="1" CornerRadius="3">
</Border>
</ControlTemplate>

Como podéis ver, tanto el template del LineButton como el del PageButton tienen el mismo nombre, esto se debe a que al ser plantillas incrustadas dentro de un estilo, su ámbito es el estilo y no colisionan entre sí.

ScrollThumb:

El scrollthumb es la parte móvil del scrollbar, se redimensiona a medida que es necesario más scroll o menos y podemos pincharlo y arrastrarlo para movernos por el contenido, el tipo de control usado es Thumb, puesto que incluye funcionalidad para Drag&Drop de forma nativa, su control template también es algo más complejo que los anteriores botones:

<ControlTemplate x:Name="tmplScrollThumb">
<Grid>
<Rectangle RadiusX="3" RadiusY="3" Fill="#66222222">
</Rectangle>
<Border CornerRadius="3" BorderBrush="DarkBlue" 
Background="{StaticResource GlassFX}">
<Path HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Data="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}">
</Path>
</Border>
</Grid>
</ControlTemplate>

Tenemos una grid que contendrá nuestros controles, un rectángulo que actúa como fondo base del Thumb. un Border para darle el efecto de cristal y dentro de este un objeto Path para que podamos incluir una geometría personalizada si lo deseamos.

Ahora que ya hemos definido las plantillas y estilos de nuestros controles base, podemos pasar a definir las plantillas de las Scrollbar tanto vertical como Horizontal:

Scrollbar vertical:

<ControlTemplate x:Key="VerticalScroll" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="18"></RowDefinition>
<RowDefinition Height="0.00001*"></RowDefinition>
<RowDefinition Height="18"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.RowSpan="3" CornerRadius="3" 
BorderBrush="DarkBlue" BorderThickness="1" 
Opacity=".6">
</Border>
<RepeatButton Grid.Row="0" 
Style="{StaticResource LineButton}" 
Height="18" Command="ScrollBar.LineUpCommand" 
Content="M 0 4 L 8 4 L 4 0 Z">
</RepeatButton>
<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" 
Style="{StaticResource LineButton}" 
Height="18" Command="ScrollBar.LineDownCommand" 
Content="M 0 0 L 4 4 L 8 0 Z">
</RepeatButton>            
</Grid>
</ControlTemplate>

Este ya es un control template más complejo, compuesto de más controles. Para empezar tenemos una grid a la que le definimos 3 Rows, la primera y la ultima contendrán los botones de subir y bajar usando repeatbuttons a los que les aplicamos el estilo que anteriormente creamos LineButton.

En la parte central de la grid definimos un objeto Track, puesto que esta parte de un scrollbar tiene código asociado le asignamos el mismo nombre que el del original: PART_Track y dentro del mismo tenemos 3 propiedades que debemos rellenar: DecreaseRepeatButton, Thumb e IncreaseRepeatButton. En el DecreaseRepeatButton e IncreaseRepeatButton definimos RepeatButtons con el estilo PageButton que creamos anteriormente y en Thumb definimos un control Thumb con el estilo ScrollThumb.

Algo a tener en cuenta es el Content de los RepeatButton usados con el estilo LineButton, estas combinaciones de letras y números son el “mini lenguaje” de geometría que usa el objeto Path para dibujar formas, es muy útil e interesante, en el apartado del estilo LineButton tenéis un enlace a una descripción completa de este lenguaje.

Scrollbar Horizontal:

El scrollbar horizontal es idéntico al scrollbar vertical, solo que en vez de dividir la Grid en Rows la dividimos en Columnas, usando la primera y ultima columna para los LineButtons y la columna central para el Track:

<ControlTemplate x:Key="HorizontalScroll" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"></ColumnDefinition>
<ColumnDefinition Width="0.00001*"></ColumnDefinition>
<ColumnDefinition Width="18"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" CornerRadius="3" 
BorderBrush="DarkBlue" BorderThickness="1" 
Opacity=".6" >
</Border>
<RepeatButton Grid.Column="0" 
Style="{StaticResource LineButton}" 
Width="18" Command="ScrollBar.LineLeftCommand" 
Content="M 4 0 L 4 8 L 0 4 Z">
</RepeatButton>
<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageRightCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Column="2" 
Style="{StaticResource LineButton}"
Width="18" Command="ScrollBar.LineRightCommand"
Content="M 0 0 L 4 4 L 0 8 Z">
</RepeatButton>
</Grid>
</ControlTemplate>

Por último solo nos queda definir un estilo común para el control Scrollbar que decida que plantilla aplicar dependiendo de la orientación designada por el control:

<Style TargetType="{x:Type ScrollBar}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="18"></Setter>
<Setter Property="Height" Value="Auto"></Setter>
<Setter Property="Template" Value="{StaticResource VerticalScroll}">
</Setter>
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"></Setter>
<Setter Property="Height" Value="18"></Setter>
<Setter Property="Template" Value="{StaticResource HorizontalScroll}">
</Setter>
</Trigger>            
</Style.Triggers>
</Style>

Este es un estilo sencillo, simplemente tenemos dos Triggers que controlan la propiedad Orientation, y dependiendo de su valor aplican una plantilla u otra.

ProgressBar

La barra de progreso es un control muy útil para ofrecer información al usuario a cerca de la realización de una tarea que se alarga en el tiempo un poco. En este caso a parte de darle una apariencia más atractiva también vamos a darle un toque más de funcionalidad, permitiendo indicar al usuario el porcentaje del trabajo realizado de forma numérica. También tenemos soporte para trabajos con duración indeterminada:

En la imagen superior podemos ver 3 estados de una ProgressBar: Determinado, Indeterminado y Desactivado. Como podéis ver en los estados Determinado y desactivado se ofrece una información visual del % realizado en forma de número.

El Control template es muy parecido al de cualquier otro control que hayamos visto:

<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="20">
<Border x:Name="BaseRectangle" 
Background="{StaticResource BaseColor}" 
CornerRadius="10,0,10,0">
</Border>
<Border x:Name="GlassRectangle" CornerRadius="10,0,10,0"  
Background="{StaticResource GlassFX}">
</Border>
<Border x:Name="animation" CornerRadius="10,0,10,0" 
Opacity=".7" Background="{StaticResource GlowFXProgress}" 
HorizontalAlignment="Left">
</Border>
<Border x:Name="PART_Indicator" CornerRadius="10,0,10,0" 
Background="{StaticResource GlowFXProgress}" 
HorizontalAlignment="Left">
</Border>
<Border x:Name="PART_Track" BorderThickness="1" 
CornerRadius="10,0,10,0" BorderBrush="Black">
</Border>
<Border x:Name="BordeCabeceraSombra" BorderThickness="2" 
CornerRadius="10,0,10,0" BorderBrush="DarkGray" 
Opacity=".2" Margin="1,1,1,0">
</Border>
<Label x:Name="Progress" VerticalAlignment="Stretch" 
HorizontalAlignment="Stretch" 
HorizontalContentAlignment="Center" 
VerticalContentAlignment="Center" 
FontWeight="Bold" Foreground="White" Opacity=".7" 
Content="{Binding Path=Value, 
RelativeSource={RelativeSource TemplatedParent}}">
</Label>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsIndeterminate" Value="True">
<Setter Property="Visibility" TargetName="Progress" Value="Hidden">
</Setter>
<Setter Property="Background" TargetName="PART_Indicator">
<Setter.Value>
<MultiBinding>
<MultiBinding.Converter>
<wintheme:ProgressBarHighlightConverter/>
</MultiBinding.Converter>
<Binding Source="{StaticResource GlowFXProgressAnimated}"/>
<Binding Path="ActualWidth"  ElementName="BaseRectangle"/>
<Binding Path="ActualHeight" ElementName="BaseRectangle"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value=".5"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Esta plantilla es larga pero no es complicada, lo más interesante de la misma se encuentra en dos puntos, primero, el control label que compone la plantilla, cuyo contenido está enlazado a la propiedad Value de la progressbar, de esta forma siempre que cambie la propiedad value se reflejará en el control label.

El segundo se encuentra en el Trigger que controla cuando la propiedad IsIndeterminate es verdadera, cambiamos el valor de la propiedad background del control PART_Indicator usando un Multibinding Converter, esto es una clase que acepta varios valores de entrada y devuelve un valor de salida. En nuestro caso queremos conservar la funcionalidad de Windows Vista y 7 en las barras indeterminadas, para ello debemos incluir en nuestro proyecto una referencia al ensamblado: PressentationFramework.Aero y referenciarlo en el archivo xaml de nuestro tema de la siguiente forma:

xmlns:wintheme="clr-namespace:Microsoft.Windows.Themes;
assembly=PresentationFramework.Aero"

Con esto nuestra progressbar funcionará perfectamente.

Conclusión

El tema Black Crystal incluye otros controles como son Datagrid, TabControl y GroupBox. Os dejo como tarea para casa el analizarlos, con lo visto aquí veréis que no es complicado comprenderlos. Un gran saludo y Happy Coding!

Descargar código

WPF: Personalizar nuestra aplicación con Styles y Control Templates (II)

Josué Yeray Julián Ferreiro — Mon, 26 Jul 2010 04:34:17 GMT

Revisión 1 enviado a Wiki sobre WPF en Geeks•ms por Josué Yeray Julián Ferreiro a 7/26/2010 6:34:17 AM

Si te lo perdiste o quieres darle un repaso aquí lo tienes:

WPF: Personalizar nuestra aplicación con Styles y Control Templates (I)

Esta vez vamos a ir directamente al meollo de la cuestión, examinando a fondo como personalizar varios controles estándar de WPF como son los siguientes:

Button
Textbox
Scrollbars (Horizontales y Verticales)
ProgressBar

Button

<Style TargetType="{x:Type Button}">

</Style>

Simplemente en la cabecera Style definimos la propiedad TargetType al tipo Button. Ahora vamos a incluir algunas propiedades por defecto para nuestro botón dentro de este bloque Style:

<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="White" />

El último objeto Setter que necesitamos establecerá la propiedad Template del botón y dentro de este Setter definiremos nuestro Control Template:

<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="tmpltButton">
</ControlTemplate>
</Setter.Value>
</Setter>

<Grid>
<Border x:Name="BaseRectangle" 
Background="{StaticResource BaseColor}" 
CornerRadius="10,0,10,0">
</Border>
<Border x:Name="GlassRectangle" 
Background="{StaticResource GlassFX}" 
CornerRadius="10,0,10,0">
</Border>
<Border x:Name="GlowRectangle" 
Background="{StaticResource GlowFX}" 
CornerRadius="10,0,10,0" 
Opacity="0">
</Border>
<Border x:Name="ButtonBorder" 
CornerRadius="10,0,10,0" 
BorderBrush="Black" 
Opacity="1"  
BorderThickness="1">
</Border>
<ContentPresenter x:Name="ButtonContent" 
Opacity=".7" 
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
HorizontalAlignment="center" 
VerticalAlignment="center">
</ContentPresenter>
</Grid>

Esquina Superior Derecha
Esquina Superior Izquierda
Esquina Inferior Izquierda
Esquina Inferior Derecha

Aplicando un valor de 10 en las esquinas superior derecha e inferior izquierda y un valor de 0 en las otras conseguimos el efecto deseado.

Binding Path= Indica la propiedad a la que queremos enlazarnos.
RelativeSource= Indica la fuente de esta propiedad, en nuestro caso la dirigimos a una fuente relativa de tipo templatedparent, es decir el objeto padre de nuestra plantilla, que en este caso será cada botón que la use.

<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowIn}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.LostFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowIn}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Background" TargetName="GlowRectangle"
Value="{StaticResource GlowFXPressed}">
</Setter>
<Setter Property="Opacity" TargetName="ButtonContent" 
Value="1">
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="ButtonContent" 
Value=".3">
</Setter>
<Setter Property="Opacity" TargetName="ButtonBorder" 
Value=".5">
</Setter>
<Setter Property="Background" TargetName="GlassRectangle" 
Value="{StaticResource GlassFXDisabled}">
</Setter>
</Trigger>
</ControlTemplate.Triggers>

Como podéis ver en este snippet, tenemos dos tipos de Triggers: Trigger y EventTrigger.

En el caso de nuestro Botón respondemos a 4 eventos: MouseEnter, MouseLeave, LostFocus y GotFocus.

También controlamos el cambio de 2 propiedades: IsPressed e IsEnabled.

Textbox

El código xaml del objeto ScrollViewer es este:

<ScrollViewer x:Name="PART_ContentHost" 
Opacity=".7" 
Content="{Binding Path=Content, 
RelativeSource={RelativeSource TemplatedParent}}" 
HorizontalAlignment="{Binding Path=HorizontalAlignment, 
RelativeSource={RelativeSource TemplatedParent}}" 
VerticalAlignment="{Binding Path=VerticalAlignment, 
RelativeSource={RelativeSource TemplatedParent}}" 
Width="{Binding Path=Width, 
RelativeSource={RelativeSource TemplatedParent}}" 
Height="{Binding Path=Height, 
RelativeSource={RelativeSource TemplatedParent}}">
</ScrollViewer>

En este caso los Triggers usados son más sencillos que los del botón, usamos 2 EventTrigger LostFocus y GotFocus y un Trigger a la propiedad IsEnabled:

<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="TextBox.LostFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="TextBox.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource GlowIn}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="PART_ContentHost" 
Value=".3">
</Setter>
<Setter Property="Opacity" TargetName="BorderExtern" 
Value=".5">
</Setter>
<Setter Property="Fill" TargetName="GlassRectangle" 
Value="{StaticResource GlassFXDisabled}">
</Setter>
</Trigger>
</ControlTemplate.Triggers>

Scrollbars

El control scrollbar nos va a dar algo más de trabajo que los dos primeros controles, pues involucra partes móviles y puede cambiar de orientación, de vertical a horizontal.

Para este control Debemos definir varios estilos por separado y controltemplates independientes, uno para la barra vertical y otro para la barra horizontal.

Primero empezaremos definiendo los estilos de los controles que componen un scrollbar, LineButtons, PageButtons y ScrollThumb:

LineButton:

Los LineButtons son los botones en los extremos del scrollbar, el tipo de control es repeatbutton y su controltemplate es muy sencillo:

<ControlTemplate x:Name="tmplRepeatButton">
<Border Background="#FF222222" BorderBrush="DarkBlue" 
BorderThickness="1" CornerRadius="3">
<Path HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Data="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}" 
Fill="Cyan" >
</Path>
</Border>
</ControlTemplate>

Su nombre viene indicado por la acción que realiza, pues cada vez que se pulsa un LineButton se avanza o retrocede una linea del control que estemos usando.

PageButtons:

Su control template es muy sencillo y se compone de un solo objeto Border:

<ControlTemplate x:Name="tmplRepeatButton">
<Border Background="#66000000" BorderBrush="Black" 
BorderThickness="1" CornerRadius="3">
</Border>
</ControlTemplate>

ScrollThumb:

<ControlTemplate x:Name="tmplScrollThumb">
<Grid>
<Rectangle RadiusX="3" RadiusY="3" Fill="#66222222">
</Rectangle>
<Border CornerRadius="3" BorderBrush="DarkBlue" 
Background="{StaticResource GlassFX}">
<Path HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Data="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}">
</Path>
</Border>
</Grid>
</ControlTemplate>

Ahora que ya hemos definido las plantillas y estilos de nuestros controles base, podemos pasar a definir las plantillas de las Scrollbar tanto vertical como Horizontal:

Scrollbar vertical:

<ControlTemplate x:Key="VerticalScroll" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="18"></RowDefinition>
<RowDefinition Height="0.00001*"></RowDefinition>
<RowDefinition Height="18"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.RowSpan="3" CornerRadius="3" 
BorderBrush="DarkBlue" BorderThickness="1" 
Opacity=".6">
</Border>
<RepeatButton Grid.Row="0" 
Style="{StaticResource LineButton}" 
Height="18" Command="ScrollBar.LineUpCommand" 
Content="M 0 4 L 8 4 L 4 0 Z">
</RepeatButton>
<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" 
Style="{StaticResource LineButton}" 
Height="18" Command="ScrollBar.LineDownCommand" 
Content="M 0 0 L 4 4 L 8 0 Z">
</RepeatButton>            
</Grid>
</ControlTemplate>

Scrollbar Horizontal:

<ControlTemplate x:Key="HorizontalScroll" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"></ColumnDefinition>
<ColumnDefinition Width="0.00001*"></ColumnDefinition>
<ColumnDefinition Width="18"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" CornerRadius="3" 
BorderBrush="DarkBlue" BorderThickness="1" 
Opacity=".6" >
</Border>
<RepeatButton Grid.Column="0" 
Style="{StaticResource LineButton}" 
Width="18" Command="ScrollBar.LineLeftCommand" 
Content="M 4 0 L 4 8 L 0 4 Z">
</RepeatButton>
<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource PageButton}" 
Command="ScrollBar.PageRightCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Column="2" 
Style="{StaticResource LineButton}"
Width="18" Command="ScrollBar.LineRightCommand"
Content="M 0 0 L 4 4 L 0 8 Z">
</RepeatButton>
</Grid>
</ControlTemplate>

Por último solo nos queda definir un estilo común para el control Scrollbar que decida que plantilla aplicar dependiendo de la orientación designada por el control:

<Style TargetType="{x:Type ScrollBar}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="18"></Setter>
<Setter Property="Height" Value="Auto"></Setter>
<Setter Property="Template" Value="{StaticResource VerticalScroll}">
</Setter>
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"></Setter>
<Setter Property="Height" Value="18"></Setter>
<Setter Property="Template" Value="{StaticResource HorizontalScroll}">
</Setter>
</Trigger>            
</Style.Triggers>
</Style>

Este es un estilo sencillo, simplemente tenemos dos Triggers que controlan la propiedad Orientation, y dependiendo de su valor aplican una plantilla u otra.

ProgressBar

El Control template es muy parecido al de cualquier otro control que hayamos visto:

<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="20">
<Border x:Name="BaseRectangle" 
Background="{StaticResource BaseColor}" 
CornerRadius="10,0,10,0">
</Border>
<Border x:Name="GlassRectangle" CornerRadius="10,0,10,0"  
Background="{StaticResource GlassFX}">
</Border>
<Border x:Name="animation" CornerRadius="10,0,10,0" 
Opacity=".7" Background="{StaticResource GlowFXProgress}" 
HorizontalAlignment="Left">
</Border>
<Border x:Name="PART_Indicator" CornerRadius="10,0,10,0" 
Background="{StaticResource GlowFXProgress}" 
HorizontalAlignment="Left">
</Border>
<Border x:Name="PART_Track" BorderThickness="1" 
CornerRadius="10,0,10,0" BorderBrush="Black">
</Border>
<Border x:Name="BordeCabeceraSombra" BorderThickness="2" 
CornerRadius="10,0,10,0" BorderBrush="DarkGray" 
Opacity=".2" Margin="1,1,1,0">
</Border>
<Label x:Name="Progress" VerticalAlignment="Stretch" 
HorizontalAlignment="Stretch" 
HorizontalContentAlignment="Center" 
VerticalContentAlignment="Center" 
FontWeight="Bold" Foreground="White" Opacity=".7" 
Content="{Binding Path=Value, 
RelativeSource={RelativeSource TemplatedParent}}">
</Label>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsIndeterminate" Value="True">
<Setter Property="Visibility" TargetName="Progress" Value="Hidden">
</Setter>
<Setter Property="Background" TargetName="PART_Indicator">
<Setter.Value>
<MultiBinding>
<MultiBinding.Converter>
<wintheme:ProgressBarHighlightConverter/>
</MultiBinding.Converter>
<Binding Source="{StaticResource GlowFXProgressAnimated}"/>
<Binding Path="ActualWidth"  ElementName="BaseRectangle"/>
<Binding Path="ActualHeight" ElementName="BaseRectangle"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value=".5"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

xmlns:wintheme="clr-namespace:Microsoft.Windows.Themes;
assembly=PresentationFramework.Aero"

Con esto nuestra progressbar funcionará perfectamente.

Conclusión

WPF: Personalizar nuestra aplicación con Styles y Control Templates (I)

Josué Yeray Julián Ferreiro — Mon, 26 Jul 2010 04:31:19 GMT

Revisión actual enviado a Wiki sobre WPF en Geeks•ms por Josué Yeray Julián Ferreiro a 7/26/2010 6:31:19 AM

Históricamente, desde los tiempos de Visual Basic a Windows Forms, si deseábamos crear una interface personalizada para nuestra aplicación estábamos, limitados a cambiar ciertas propiedades estándar de los controles como el color de fondo, ancho del borde o el tamaño de fuente. Si deseábamos ir más allá, nuestra única opción es crear un nuevo control, heredar desde el control existente e invalidar el método de dibujado para implementar nuestra propia lógica de dibujo.

Esto sigue siendo posible en WPF, pero ya no es necesario, pues WPF nos facilita un modelo de extensibilidad basado en Plantillas y Estilos, que nos permite realizar complejas modificaciones y redefiniciones del aspecto visual de un control, sin tener que crear uno nuevo.

Nuestro trabajo

A continuación puedes ver el origen desde el que vamos a partir:

Y nuestro objetivo es llegar a lo siguiente:

Como puedes ver el cambio es muy grande, es mucho mas atractivo a la vista, con lo que nuestros usuarios se sentirán más cómodos y nuestra aplicación ganará una apariencia exclusiva y única. Así que, manos a la obra, pero primero, vamos a repasar algunos conceptos básicos de Styles y ControlTemplates en WPF.

Un poco de teoría

WPF nos brinda varias formas de personalizar nuestros controles:

Contenido Enriquecido
Styles
Data Templates
Control Templates

En este post me voy a centrar en los Styles y los Control Templates.

Styles

Un objeto Style es una colección de valores que representan propiedades para el control indicado. Podemos asignarle automáticamente a todos los controles de un mismo tipo, por ejemplo un Button, ciertas propiedades como el color de fondo, tipo de letra, etc… de esta forma todos nuestros controles de este tipo obtendrán estas características:

<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Style>

También podemos establecer un nombre al estilo y aplicarlo manualmente a los controles que nos interese usando la propiedad Style de cada uno:

<Style x:Key="EstiloPropio" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Style>

<Button Style="{StaticResource EstiloPropio}"></Button>

Control Templates

Muchos controles en WPF utilizan plantillas para definir su estructura y apariencia. De esta forma su funcionalidad permanece intacta aunque cambiemos su apariencia, y nos da un grado de personalización sobre el aspecto del control sin precedentes. Esto nos permite elegir un control por su funcionalidad para llevar a cabo una tarea, sin tener en cuenta que su apariencia no se ajuste a lo que deseamos, pues esta puede ser redefinida totalmente. Este es un ejemplo sencillo de un ControlTemplate para un botón:

<ControlTemplate TargetType="{x:Type Button}">
<Border Name="fondoboton" BorderBrush="red" BorderThickness="5" 
Background="Yellow">
<ContentPresenter Name="contenido" 
Content="{Binding Path=Content, 
RelativeSource={RelativeSource TemplatedParent}}">
</ContentPresenter>
</Border>
</ControlTemplate>

Y el resultado de esta plantilla si ponemos un botón en nuestro proyecto sería este:

Como puedes ver, el control a perdido todo su aspecto, que ha sido reemplazado por el que hemos indicado, pero conservando todo su comportamiento y funcionalidad de botón.

Definir el estilo de nuestra aplicación

Un paso muy importante a la hora de definir el estilo de nuestra aplicación es que esta mantenga una coherencia visual a través de las diferentes pantallas de la misma, para que el usuario tenga una sensación de familiaridad con nuestra aplicación aunque se enfrente a pantallas nuevas.

Otro aspecto muy importante es la sencillez de implantación, en una aplicación con cientos de controles y decenas de pantallas, no podemos ir control por control y pantalla por pantalla ajustando parámetros visuales, debe realizarse de forma automática, para esto WPF nos facilita los ResourceDictionary, archivos Xaml donde podemos incluir todo nuestro código de estilado e incluirlos de forma global en toda la aplicación, con lo que, cualquier cambio que hagamos en el estilo o plantilla de un control se aplicará automáticamente a todos lo controles de nuestra aplicación.

Lo primero que debemos realizar es añadir en nuestra aplicación un nuevo elemento de tipo ResourceDictionary, en mi caso el nombre es BlackCrystal.xaml, este archivo solo tiene vista xaml y al incluirlo debería aparecer algo así:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


</ResourceDictionary>

Una vez que tengamos nuestro ResourceDictionary agregado, es momento de indicarle a nuestra aplicación que haga uso de el, esto lo podemos hacer editando el archivo Application.xaml para decirle la ruta de un nuevo diccionario de recursos que queremos que use, debería quedar así:

<Application x:Class="Application"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source="BlackCrystal.xaml"></ResourceDictionary>
</Application.Resources>
</Application>

Simplemente añadimos un nuevo nodo Application.Resources y dentro del mismo creamos un nuevo objeto ResourceDictionary, indicándole la Ruta (Source) desde la que cargar este diccionario. Con esto, cualquier estilo o plantilla que creemos en nuestro ResourceDictionary estará inmediatamente disponible en toda nuestra aplicación.

Elementos Comunes

Algo importante a la hora de diseñar el look & feel de nuestra aplicación es dotarla con una apariencia uniforme, mismos colores, mismas geometrías y mismas animaciones, si definiésemos directamente estos parámetros en cada uno de los estilos y plantillas convertiría el mantenimiento de los mismos en un infierno, teniendo que recorrer decenas de sitios para cambiar un solo color. Para solucionar esto el primer trabajo que debemos hacer es definir en nuestro resource dictionary todos los colores y animaciones que queramos usar.El tema de ejemplo que he creado, Black Crystal, usa en total 9 degradados distintos y 2 animaciones que se aplican a todos los controles, estos degradados son de tipo LinearGradient y RadialGradient y las animaciones son DoubleAnimations.

Aquí podéis ver un ejemplo de Degradado Lineal, este es usado para aplicar al fondo de las ventanas un degradado en tonos de grises:

<LinearGradientBrush x:Key="DarkBackground" StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="#FF333344"></GradientStop>
<GradientStop Offset="1" Color="#FF666677"></GradientStop>
</LinearGradientBrush>

El código xaml es muy sencillo, en la primera línea definimos el tipo de objeto (LinearGradientBrush) le asignamos una Key para poder usar el recurso que estamos creando desde cualquier parte e indicamos el Punto de inicio y de Final, estos puntos se especifican con una pareja de números que van de 0 a 1, indicando 0,0 la esquina superior izquierda y 1,1 la esquina inferior derecha, el primer numero de cada par indica el punto en el eje X y el segundo número indica el punto en el eje Y. de esta forma 0,0 a 1,1 indica que nuestro degradado recorrerá la diagonal desde la esquina superior izquierda a la esquina inferior derecha, un valor de 0,0 a 1,0 indicaría que nuestro degradado empezaría en la esquina superior izquierda y acabaría en la esquina superior derecha, con lo que tendríamos un aspecto de degradado de izquierda a derecha horizontal, un valor de 0,0 a 0,1 crearía un efecto de degradado vertical.

Los objetos gradientStop indican que color se usara en cada parte del degradado, un degradado puede tener tantos GradientStop como queramos, la propiedad Offset indica la posición del color dentro del degradado, siendo 0 el inicio y 1 el final, podemos usar cualquier valor entre estos números tal como .2, .35 o .98 y por ultimo Color indica el color a usar en ese punto del degradado, puede ser un color ya establecido por el sistema como White, Purple o Black o una combinación de colores ARGB (A = Alpha (transparencia), R = Rojo, G = Verde y B = Azul)

El Objeto RadialGradientBrush es muy parecido al LinearGradientBrush y se compone básicamente de los mismos objetos:

<RadialGradientBrush x:Key="GlowFX" GradientOrigin=".5,1" Center=".5,1">
<GradientStop Offset="0" Color="#990000FF"></GradientStop>
<GradientStop Offset=".5" Color="#660000DD"></GradientStop>
<GradientStop Offset="1" Color="#33000000"></GradientStop>
</RadialGradientBrush>

El mayor cambio aquí es que ya no tenemos las propiedades StartPoint y EndPoint, en vez de estas tenemos GradientOrigin y Center. GradientOrigin define el punto desde el que se inicia el degradado, y Center define el punto que será el centro del circulo externo que definirá el degradado, en este ejemplo tienen valores idénticos pero podrían ser distintos sin ningún problema.

Para aplicar estos recursos a una propiedad de un control basta con enlazar esa propiedad a un recurso estático y especificar el nombre de nuestro degradado, de esta forma:

<Button Content="Hola" 
Background="{StaticResource GlowFX}">
</Button>

Por último tenemos las animaciones, en mi caso las he usado para dar un efecto de activación al pasar el ratón sobre los controles o al recibir el foco ciertos controles usando el tabulador:

<Storyboard x:Key="GlowOut">
<DoubleAnimation x:Name="AnimGlowOut" BeginTime="00:00:00" 
Storyboard.TargetName="GlowRectangle" 
Duration="00:00:00.250" From="1" To="0" 
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
</Storyboard>

Como podrás ver no es un xaml complicado, en primer Lugar definimos un objeto StoryBoard y le damos un nombre para poder invocarlo desde otros objetos. Este Storyboard contiene nuestra animación, en WPF existen muchos tipos distintos de animación, la primera parte del nombre indica el tipo de valor que es capaz de animar, en nuestro caso es un valor de tipo Double, pero podemos encontrar BooleanAnimation, CharAnimation, ColorAnimation y muchos más tipos. Las propiedades que definimos son muy simples, name aplica un nombre a nuestra animación, BeginTime indica el momento después de invocar el storyboard en el que esta animación se iniciará, Duration indica el tiempo total que tomara nuestra animación para ejecutarse, la propiedad atada StoryBoard.TargetName indica el objeto sobre el que se aplicará la animación y StoryBoard.TargetProperty indica la propiedad de este objeto indicado que vamos a animar, por último From y To indican el valor inicial y el valor final aplicado a esta animación. En este caso esta animación se aplicará a un objeto llamado GlowRectangle, y modificará gradualmente su propiedad Opacity en el transcurso de 250 milisegundos para llevarla desde 1 (totalmente opaco) a 0 (totalmente transparente).

La aplicación de las animaciones se realiza a través de los disparadores de eventos (Event Triggers) de un control, en el próximo articulo lo explicaré en más detalle pero es algo así:

<Button Name="GlowRectangle" Content="Hola">
<Button.Triggers>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard Name="{StaticResource GlowOut}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>

A continuación os dejo un listado de todos los Degradados y animaciones que usaremos en este proyecto, para que podáis empezar a jugar con ellas y comprender su uso, en la segunda parte de este artículo entraremos directamente a ensuciarnos las manos creando los estilos de los controles.

Espero que os sea útil y os guste! Un gran saludo, nos vemos pronto.

<!-- DARK BACKGROUND -->
<LinearGradientBrush x:Key="DarkBackground" StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="#FF333344"></GradientStop>
<GradientStop Offset="1" Color="#FF666677"></GradientStop>
</LinearGradientBrush>

<!-- GLASS EFFECT -->
<LinearGradientBrush x:Key="GlassFX" StartPoint=".5,0" EndPoint=".5,.5">
<GradientStop Offset="1" Color="#33DDDDDD"></GradientStop>
<GradientStop Offset="1" Color="#33000000"></GradientStop>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GlassFXDisabled" StartPoint=".5,0" EndPoint=".5,.5">
<GradientStop Offset="1" Color="#33BBBBBB"></GradientStop>
<GradientStop Offset="1" Color="#11000000"></GradientStop>
</LinearGradientBrush>

<!-- GLOW EFFECT -->
<RadialGradientBrush x:Key="GlowFX" GradientOrigin=".5,1" Center=".5,1">
<GradientStop Offset="0" Color="#990000FF"></GradientStop>
<GradientStop Offset=".5" Color="#660000DD"></GradientStop>
<GradientStop Offset="1" Color="#33000000"></GradientStop>
</RadialGradientBrush>
<RadialGradientBrush x:Key="GlowFXPressed" GradientOrigin=".5,1" Center=".5,1">
<GradientStop Offset="0" Color="#660000CC"></GradientStop>
<GradientStop Offset="1.2" Color="#33FFFFFF"></GradientStop>
</RadialGradientBrush>
<LinearGradientBrush x:Key="GlowFXRowPressed">
<GradientStop Offset="0" Color="#660000FF"></GradientStop>
<GradientStop Offset=".7" Color="#660000AA"></GradientStop>
<GradientStop Offset="1" Color="#66000000"></GradientStop>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GlowFXProgress">
<GradientStop Offset="0" Color="#660099FF"></GradientStop>
<GradientStop Offset=".99" Color="#660022AA"></GradientStop>
<GradientStop Offset="1" Color="#00000000"></GradientStop>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GlowFXProgressAnimated" MappingMode="RelativeToBoundingBox">
<GradientStop Offset="0" Color="#00000000"></GradientStop>
<GradientStop Offset=".50" Color="#660099FF"></GradientStop>
<GradientStop Offset="1" Color="#00000000"></GradientStop>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GlowFXTabSelected" StartPoint=".5,1" EndPoint=".5,0">
<GradientStop Offset="0" Color="#33DDDDDD"></GradientStop>
<GradientStop Offset="1" Color="#332222FF"></GradientStop>
</LinearGradientBrush>

<!-- GLOW ANIMATION -->
<Storyboard x:Key="GlowOut">
<DoubleAnimation x:Name="AnimGlowOut" BeginTime="00:00:00" 
Storyboard.TargetName="GlowRectangle" 
Duration="00:00:00.250" From="1" To="0" 
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="GlowIn">
<DoubleAnimation x:Name="AnimGlow" BeginTime="00:00:00" 
Storyboard.TargetName="GlowRectangle" 
Duration="00:00:00.250" From="0" To="1" 
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
</Storyboard>