Layout y Presentación de la Información en WPF (Contenedores Primera Parte)

A mi juicio los contenedores en WPF es una cosa que debemos dominar  si queremos diseñar una buena aplicación WPF es la parte principal de un buen diseño.

WPF  por  defecto  solo  admite  la  colocación  de  un  solo  elemento  en  una ventana y esta debe de ser un contenedor, cuando creamos un usercontrol o page o window su hijo debe de ser un contenedor. y en este iremos añadiendo controles

En los contenedores  de WPF  tiene  lugar en dos  estados: Measure  (Medición)  y Arrange (distribución).

Measure

En estado de medición  (Measure) el contenedor comprueba por cada uno de
los  elementos  hijos  su  tamaño  deseado,  es  decir,  les  “pregunta”  que  tamaño
pretende ocupar en el contenedor.

Arrange

En este estado de distribución (Arrange), el contenedor coloca a cada uno de
los elementos hijos en su posición apropiada.

Veremos que entender estos estados son importantes cuando desarrollemos nuestros propios contenedores

 

Clase Panel 

La clase abstracta System.Windows.Controls.Panel es de  la que derivan todos
los  contenedores  de  WPF.  La  clase  Panel  expone  un  pequeño  grupo  de
miembros incluyendo las siguientes propiedades públicas:

Background

Utilizando  el  Brush  dado  pinta  el  fondo  del  panel.  Como  nota  importante
recalcar que debemos asignar un valor no nulo si queremos recibir eventos de
ratón. 
Podemos utilizar como color de fondo el transparente y asi disponemos de los
eventos del ratón.

Children

Importante colección donde se almacenan los elementos alojados en el panel.
Nos  referimos  al  primer  nivel de  elementos  hijos,  por  lo  que  es  posible  que
exitan más subniveles.

IsItemsHost

Esta propiedad  es  verdadera  cuando  el panel  se usa para mostrar  elementos
que  están  asociados  con un  ItemsControl como  los nodos de un ListBox por
ejemplo.

En el siguiente diagrama se muestra la jerarquía de clases de WPF5.jpg

System.Threading.DispatcherObject

Todos los objetos de WPF derivan de DispatcherObject. WPF trabaja  en STA, y el principal objetivo es manejar la concurrencia y threading. Cuando cualquier mensaje como por ejemplo un click del ratón son enviados al DispatcherObject  que verifica si el código se está ejecutando en el thread correcto

System.Windows.DependencyObject

La clase base para todos los objetos que tienen las propiedades de dependencia, las dependency properties únicamente se usar para definir las propiedades de los controles de interfaz de usuario y de los objetos de negocio que interactúan con la UI

System.Windows.Media.Visual

Esta clase se encarga del renderizado de la UI, del clipping, calculo del recuadro de dibujado, transformaciones y coordenadas. Es una clase muy importante en WPF, ya que cualquier clase que se tenga que renderizar debe heredar de ella.

System.Windows.UIElement

Maneja tres elementos importantes el layaout, los eventos y el input (eventos de teclado y ratón)

System.Windows.FrameworkElement

Es una clase fundamental dentro de WPF , implementa miembros de la clase UIElement y define los estados de Measure y Arrange, ademas se encarga del enlace a datos, estilos, animaciones, define los eventos del cliclo de vida del objeto.

 

 

 

 

 

 

 

 

Por debajo de Panel están los contenedores que viene por defecto en WPF que iremos viendo en siguiente posts

  • Canvas
  • Grid
  • StackPanel
  • WrapPanel
  • DockPanel
  • ViewBox

Además de los que viene por defecto dentro de WPF nosotros podremos crear nuestros propios contenedores con su compartimiento, veremos algún ejemplo de ello

Ribbon en WPF

Aparte de escribir el minitutorial de WPF, voy a ir escribiendo sobre herramientas y controles que existen de WPF para que los conozcáis y podáis utilizarlos en vuestras aplicaciones

Para todos aquellos que os guste las barras de herramientas Ribbon, el equipo de WPF esta desarrollando desde Octubre del 2008 el nuevo WPF Ribbon control que puede ser bajado desde aquí, en la siguiente dirección tenéis un buen tutorial de como se utiliza. No es que sea un control que a mi me enloquezca pero se que a mucha gente que empieza con WPF le llama la atención y enseguida quiere implementarlo.

Ribbon Screenshot

Espero que os sirva

 

Un saludo Oskar

Primeros Pasos en WPF

XAML

XAML  es  el  acrónimo de  eXtensible Application Markup Language. Xaml  es
un  lenguaje  declarativo  basado  en  XML  y  que  esta  optimizado  para
representar  interfaces  de  usuario  visualmente  ricas  desde  el  punto  de  vista
gráfico. 
XAML  nace  para  ser  el  nexo  de  unión  entre  desarrolladores  y  diseñadores,
facilitando  la  colaboración  entre  ambos  en  aplicaciones  WPF.  Aunque
aparezcan  dudas  sobre  por  qué  usar  un  lenguaje  markup,  es  importante
entender las posibilidades inherentes en la plataforma WPF.
Cuando  se  decidió  crear  XAML  como  un  lenguaje  markup  para  expresar
interfaces,  se  comprobó  la  evolución  de  otros  lenguajes  como HTML,  XUL,
SVG,  WordML,  etc  y  como  por  ejemplo  HTML  ha  sido  un  éxito  para
representar interfaces de usuario.
La  claves  esta  en  que  la  sintaxis  de  tipo  markup  tiene  la  habilidad  de  ser
entendible y de fácil lectura por los humanos al igual que por las máquinas. A
saber, gracias a esto podemos ver en el día a día como personas sin experiencia
escribiendo  software  no  se  ven  intimidados  con  la  sintaxis  que  presenta
HTML. En definitiva, XAML es un lenguaje al igual que HTML, entendible por
un humano y para una máquina.

Sintaxis XAML

Es importante recalcar y tener en cuenta con respecto a la diferencia entre por
ejemplo HTML y XAML que en  la especificación de XAML se especifican una
serie de reglas que mapean espacios de nombres, tipos, propiedades y eventos
de  .NET  con  sus  correspondencias  en  XML.  Es  decir,  podemos  crear  un
elemento con XAML y realizar un elemento equivalente directamente con C#.

Elementos = Objetos

Declarando  un  elemento  XML  mediante  la  sintanxis  XAML  podemos
instanciar una clase o estructura Common Language Runtime (CLR). Ha esto
se  le  conoce  como  Object  Element  Syntax.  Esta  sintaxis  comienza  con  un
menor  que  (<)  y  seguido  del  nombre  de  la  clase  o  estructura  a  inicializar.
Seguidamente  se puden  añadir  sin que  sean obligatorios atributos  separados
por  un  espacio  y  en  el  formato:  nombre=”Valor”.  Finalmente  el  elemento  se
puede cerrar con un (/>).
A continuación se muestra un par de ejemplos:

Propiedades de objetos como atributos XAML

Mediante  los atributos en XAML podemos asignar un valor a una propiedad.
El elemento será siempre declarado utilizando OES  (Object Element Syntax).
El nombre del atributo debe coincidir con el nombre de la propiedad o evento.
La  sintaxis  es  sencilla,  el  nombre  del  atributo  seguida  del  operador  de
asignación (=). El valor es una cadena de texto entre dos comillas dobles.

image 

Propiedades de objetos como atributos XAML

Mediante  los atributos en XAML podemos asignar un valor a una propiedad.
El elemento será siempre declarado utilizando OES  (Object Element Syntax).
El nombre del atributo debe coincidir con el nombre de la propiedad o evento.
La  sintaxis  es  sencilla,  el  nombre  del  atributo  seguida  del  operador  de
asignación (=). El valor es una cadena de texto entre dos comillas dobles.

 

image 

 

Propiedades de objetos como elementos

Esto es una característica especial de XAML. Este tipo de sintaxis difiere de la
sintaxis de XML básica, a saber, en XML el valor de un atributo es por defecto
una cadena de texto con la única posible varación del formato de codificación
utilizado,  sin  embargo  en  XAML  podemos  asignar  como  valor  de  una
propiedad  cualquier  otro  elemento  objeto.  El  formato  a  utilizar  es
nombreTipoElemento.nombrePropiedad  contendrá  un  elemento  objeto  y  por
tanto nunca tendrá atributos.
Veamos un ejemplo donde veremos mejor esta característica:

image

En  el  ejemplo  anterior  podemos  observer  como  a  la  propiedad  Content  del
botón  se  le  asigna  un  elemento  XML  en  vez  de  un  atributo  XML.  Además
siempre  será  posible  utilizar  estas  propiedades  para  valores  simples,  como
veremos en el siguiente ejemplo:

 

image

Atributos con convertidores de tipo

Para explicar esto vamos a fijarnos en el siguiente código c# donde se crea un
rectángulo cuyo color de relleno es rojo.

image

Y ahora veamos su equivalente en XAML:

image
¿Cuál es  la principal diferencia o que es  lo extraño? Lógicamente  la pregunta
que  nos  podemos  hacer  es  que  cómo  Red  (el  valor  de  tipo  texto  de  la
propiedad Fill) equivale al campo estático System.Windows.Media.Brushes.Red
de tipo System.Windows.Media.SolidColorBrush.
Lo  que  ocurre  es  que  el  analizador  de XAML  o  el  compilador mismo  deben
buscar  un  conversor  de  tipos  para  poder  saber  como  se  ha  de  hacer  la
conversión de la representación en texto al tipo de dato deseado.
WPF  provee  varios  conversores  para  tipos  comunes  aunque  es  posible  crear
conversores propios para tipos de datos propios.

Attached Properties

 

Otro  concepto nuevo de XAML  son  las  attached properties. Las propiedades adjuntas  son  aquellas  que  pertenecen  y  son  definidas  por  un  tipo  pero  que
pueden ser asignadas por cualquier elemento. 

image

Attached Events

Es  un  nuevo  concepto  introducido  por  XAML  al  igual  que  las  attached properties. Por tanto se definirían como eventos que pueden ser definidos por
un tipo pero los handlers pueden ser adjuntados a cualquier objeto.

image

Un buen ejemplo de WPF

Hola. aquí tenéis un buen ejemplo de lo que se puede hacer con WPF, no tiene que ser una aplicación espectacular con imágenes y animaciones sino funcional y con gran capacida de configuración y a la vez bien diseñada su interfaz de usuario.

Esta aplicación es bDule un cliente de Twitter y Facebook hecha en WPF, merece la pena que la instaléis y la utilicéis para que veáis el potencial de WPF.

La tenéis disponible en http://www.sobees.com/bdule

 

Arquitectura básica de WPF

En los siguientes post que voy a ir escribiendo voy a intentar crear un pequeño tutorial de WPF, mi intención no es que sea un curso sino una introducción básica de esta tecnología

 

En  el  siguiente  diagrama  se muestran  los  componentes más  importantes  de WPF, siendo las partes que aparecen en rojo las de mayor porción de código:

 

image

PresentationFramework
Contiene todos los controles WPF más otras funcionalidades usables.

PresentationCore
API de bajo nivel que  trata directamente  con el  sistema  visual base  (2D,  3D,
etc)  es una  combinación de wrappers  con  la  capa MilCore  y un  conjunto de
características escritas en código manejado. Además se incluye en esta capa la
implementación base de los elementos raíz UIElement y ContentElement. 

MilCore
Esta  parte  ha  sido  escrita  en  código  no  manejado  para  poder  soportar  la
integración  con  DirectX.  Es  decir,  todo  lo mostrado  por WPF  es  realizado
através del motor de DirectX, por lo que se consigue una gran eficiencia en el
renderizado por Software y Hardware.

 

 

 

A  continuación  se  puede  ver  un  diagrama  básico  de  la  arquitectura  más detallada de WPF. Se divide en cuatro grandes grupos,  saber: Servicios Base,
Servicios  de  Interfaz  de  usuario,  Servicios  de  documentos  y  Capa  de integración Multimedia

image