Modern UI Style para WPF
Desde que salió Windows Phone 7 con Metro Style Modern UI y posteriormente Windows 8, se empezó a vislumbrar el estándar de interfaces de usuarios que iban a ser la norma. Con rasgos minimalistas, es un lenguaje de diseño basado en tipografía, que prioriza una navegación a través del texto.
Metro esta basado en el “Estilo Tipográfico Internacional” o “Estilo Suizo” que posee las siguientes características (Wikipedia):
“Las características del estilo son el de la unidad en el diseño lograda a través de la asimetría en la composición, el uso de una malla tipográfica y una cuadrícula totalmente matemática. El estilo es asociado también a una preferencia por la fotografía en lugar de ilustraciones o dibujos.
Se presentaba la información basándose en la claridad, la legibilidad y la objetividad, usando tipografías sin serif como la Akzidenz Grotesk. Este uso de la tipografía reflejaba el espíritu progresista de la época. Algunos de los primeros diseñadores del Estilo Tipográfico Internacional presentaban la tipografía como un elemento principal además de su uso como texto, característica que da nombre al estilo. Los diseñadores de este estilo definían el diseño como una actividad socialmente útil e importante, y dejaban de lado la expresión artística y personal, y buscando una solución más científica y universal.”
Y claro, la tecnología más adecuada para tener una interfaz de usuario rica visualmente no es otra que WPF (sobre Silverlight hablaremos otro rato) al menos para Windows 7 y tal vez para Windows 8 en Modo Escritorio, ya que para Windows en ModoMetro Modern UI los mas conveniente es usar WinRT.
Ya con la idea de las aplicaciones Metro Modern UI Style en mente, veamos un ejemplo de ese tipo de aplicaciones:
El nombre de la aplicación es Zune y como se puede apreciar en las imágenes, tiene una interfaz bastante llamativa con títulos en letras grandes, thumbnails grandes, botones minimalistas de un solo color y algunos otros aspectos más que dan una sensación agradable al usar la aplicación. Ciertamente si nos ponemos a pensar cuanto tendríamos que invertir en personalizar nuestra aplicación para que se vea así, parece un gran trabajo y ciertamente lo es, pero afortunadamente al día de hoy ya existe una librería que nos facilitara el trabajo de personalización. La librería en cuestión se llama MashApp.Metro, y es de código abierto lo cual nos permite personalizar aún más nuestra aplicación si así lo deseamos. Para ver las capacidades de esta librería vamos a personalizar la aplicación de lectura de claves de registro que hice en este post.
En este momento la aplicación se ve de la siguiente manera:
Nuestro objetivo es que se parezca a Zune, para lo cual nuestro primer paso será instalar MashApp.Metro y lo haremos a través de Nugget, con el siguiente comando:
PM> Install-Package MahApps.Metro
Nuestro siguiente paso será irnos al XAML y remplazar la etiqueta <Window por la etiqueta <Controls:MetroWindow , después agregaremos el NameSpace:
Después, deberemos agregaremos los recursos, que será pegar el siguiente código debajo de la etiqueta de apertura de MetroWindow:
Y listo, si hacemos correr la aplicación podemos ver el cambio sustancial en la interfaz:
Source Code
“Las características del estilo son el de la unidad en el diseño lograda a través de la asimetría en la composición, el uso de una malla tipográfica y una cuadrícula totalmente matemática. El estilo es asociado también a una preferencia por la fotografía en lugar de ilustraciones o dibujos.
Se presentaba la información basándose en la claridad, la legibilidad y la objetividad, usando tipografías sin serif como la Akzidenz Grotesk. Este uso de la tipografía reflejaba el espíritu progresista de la época. Algunos de los primeros diseñadores del Estilo Tipográfico Internacional presentaban la tipografía como un elemento principal además de su uso como texto, característica que da nombre al estilo. Los diseñadores de este estilo definían el diseño como una actividad socialmente útil e importante, y dejaban de lado la expresión artística y personal, y buscando una solución más científica y universal.”
Y claro, la tecnología más adecuada para tener una interfaz de usuario rica visualmente no es otra que WPF (sobre Silverlight hablaremos otro rato) al menos para Windows 7 y tal vez para Windows 8 en Modo Escritorio, ya que para Windows en Modo
El nombre de la aplicación es Zune y como se puede apreciar en las imágenes, tiene una interfaz bastante llamativa con títulos en letras grandes, thumbnails grandes, botones minimalistas de un solo color y algunos otros aspectos más que dan una sensación agradable al usar la aplicación. Ciertamente si nos ponemos a pensar cuanto tendríamos que invertir en personalizar nuestra aplicación para que se vea así, parece un gran trabajo y ciertamente lo es, pero afortunadamente al día de hoy ya existe una librería que nos facilitara el trabajo de personalización. La librería en cuestión se llama MashApp.Metro, y es de código abierto lo cual nos permite personalizar aún más nuestra aplicación si así lo deseamos. Para ver las capacidades de esta librería vamos a personalizar la aplicación de lectura de claves de registro que hice en este post.
En este momento la aplicación se ve de la siguiente manera:
Nuestro objetivo es que se parezca a Zune, para lo cual nuestro primer paso será instalar MashApp.Metro y lo haremos a través de Nugget, con el siguiente comando:
PM> Install-Package MahApps.Metro
Nuestro siguiente paso será irnos al XAML y remplazar la etiqueta <Window por la etiqueta <Controls:MetroWindow , después agregaremos el NameSpace:
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro".
Después, deberemos agregaremos los recursos, que será pegar el siguiente código debajo de la etiqueta de apertura de MetroWindow:
<Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedRowTabControl.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources>Como último paso, debemos de irnos al código subyacente (Code-Behind) del MainWindow y cambiar de:
public partial class MainWindow : WindowA:
public partial class MainWindow : MetroWindow
Y listo, si hacemos correr la aplicación podemos ver el cambio sustancial en la interfaz:
Para más información vean:
Me despido con capturas de pantalla de
otras 2 aplicaciones con el mismo estilo, MetroTwit y GitHub para
Windows:
Source Code
Excelente post es justamente lo que estaba buscando ya que actualmente los clientes tienen expectativas de interfaces de usuarios modernas.
ResponderEliminarExelente aporte
ResponderEliminar