Tipos de estilos en WPF & Silverlight

  • Estilo Heredado:

Permite definir un estilo como recurso para personalizar cualquier control de la interfaz de usuario.

  • Definición:
  1. <Style x:Key="estilo1" >
  2.             <Setter Property="Control.FontFamily" Value="Arial"/>
  3.             <Setter Property="Control.FontSize" Value="22"/>
  4.             <Setter Property="Control.Background" Value="Red"/>
  5.         </Style>

  • Aplicación:
  1. <Button Content="Pincha Aquí!!" Height="54" HorizontalAlignment="Left"
  2.                 Margin="134,132,0,0" Name="button1" VerticalAlignment="Top" Width="105"
  3.                 Style="{StaticResource estilo1}" />

 

  • Estilo por tipo

Permite definir un estilo como recurso para personalizar cualquier el tipo de control que decidamos.

  • Definición:
  1. <Style x:Key="estilo2" TargetType="TextBlock">
  2.             <Setter Property="Control.FontFamily" Value="Broadway"/>
  3.             <Setter Property="Control.FontSize" Value="30"/>
  4.             <Setter Property="Control.Background" Value="Orange"/>
  5.         </Style>

  • Aplicación:
  1. <TextBlock Height="130" HorizontalAlignment="Left" Margin="156,0,0,0" Name="textBlock1" Text="Bienveidos a WPF"
  2.                    VerticalAlignment="Top" Width="308" Style="{StaticResource estilo2}" />

  • Estlo por Tigger

Permite definir un estilo como recurso y aplicarlo en función de un disparador de un evento(Trigger), hay dos tipo de esta clase:

  • Trigger por Evento:

Este tipo de evento permite el cambio de las propiedades de un objeto cuando ocurre un evento. Pero además permite la realización de acciones dentro del estilo como por ejemplo realizar una animación del objeto sobre el que se va aplicar el estilo.

  • Definición:
  1. <Style x:Key="evento" TargetType="Rectangle">
  2.             <Setter Property="Fill" Value="RoyalBlue"/>
  3.             <Style.Triggers>
  4.                 <EventTrigger RoutedEvent="MouseEnter">
  5.                     <EventTrigger.Actions>
  6.                         <BeginStoryboard>
  7.                             <Storyboard>
  8.                                 <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Opacity" To="0">
  9.                                 </DoubleAnimation>
  10.                             </Storyboard>
  11.                         </BeginStoryboard>
  12.                     </EventTrigger.Actions>
  13.                 </EventTrigger>
  14.                 <EventTrigger RoutedEvent="MouseLeave">
  15.                     <EventTrigger.Actions>
  16.                         <BeginStoryboard>
  17.                             <Storyboard>
  18.                                 <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Opacity" To="1">
  19.                                 </DoubleAnimation>
  20.                             </Storyboard>
  21.                         </BeginStoryboard>
  22.                     </EventTrigger.Actions>
  23.                 </EventTrigger>
  24.             </Style.Triggers>
  25.             
  26.         </Style>

  • Aplicación:
  1. <Rectangle Height="200" Width="200" Fill="Black" Style="{StaticResource evento}"></Rectangle>

  • Trigger por Datos:

Permite la transformación de las propiedades de un control, basándose en los datos introducidos en otro control diferente.

Definición:

  1. <Style x:Key="datos" TargetType="Rectangle">
  2.             <Setter Property="Fill" Value="BurlyWood"/>
  3.             <Style.Triggers>
  4.                 <DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Rojo">
  5.                     <Setter Property="Fill" Value="Red"></Setter>
  6.                 </DataTrigger>
  7.                 <DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Azul">
  8.                     <Setter Property="Fill" Value="Blue"></Setter>
  9.                 </DataTrigger>
  10.                 <DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Verde">
  11.                     <Setter Property="Fill" Value="Green"></Setter>
  12.                 </DataTrigger>
  13.                 <DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Amarillo">
  14.                     <Setter Property="Fill" Value="Yellow"></Setter>
  15.                 </DataTrigger>
  16.                 <DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Negro">
  17.                     <Setter Property="Fill" Value="Black"></Setter>
  18.                 </DataTrigger>
  19.             </Style.Triggers>
  20.         </Style>

Aplicación:

  1. <Grid>
  2.         <TextBox Height="23" HorizontalAlignment="Left" Margin="190,46,0,0" Name="Entrada" VerticalAlignment="Top" Width="120" />
  3.         <Label Content="Elige el color:" Height="24" Name="label" HorizontalAlignment="Left"
  4.                Margin="100,44,0,0" VerticalAlignment="Top" Width="94" />
  5.         <Rectangle Stroke="red" Margin="171,134,80,35" Style="{StaticResource datos}"></Rectangle>
  6.     </Grid>

Trio de ases en Windows Phone 7

Si lo tuyo es el desarrollo en entornos de movilidad, no deberías perderte el evento del próximo 14 de diciembre que realizaremos en los Centros de Excelencia Software de Navarra, donde contaremos con: 

  • Eduardo Ortega, MVP en Movilidad perteneciente al Centro de Innovación en Movilidad de Microsoft

  • Isabel Gómez, Evangelista de Fabricantes de Software en Microsoft Ibérica

  • Iñaki Ayucar, MVP en DirectX/XNA y fundador de la empresa SIMAX

    EduOrtega     ponenteIsabelGomez     IAyucar

  •  

    Si deseas vivir una nueva experiencia a través de Windows Phone 7 y lanzarte a desarrollar en la citada plataforma deberías registrarte aquí para poder asistir.

    Utilizar Sample Data en Silverlight a través de Expression Blend

    Cuando comenzamos un nuevo proyecto , este consta de una parte de diseño y otra de desarrollo. En la mayoría de los desarrollos, el diseñador cuando  incluye elementos en la interfaz de usuario, no suele saber como estos son visualizados por el usuario final. Dicho objetivo lo consigue cuando el diseño es implementado con la parte elaborada por el desarrollador. Para este inconveniente, Microsoft nos plantea una solución a través de Expression Blend 4. Es la posibilidad de enlazar los distintos objetos de la interfaz de usuario con datos de ejemplo(Sample Data), que aunque el contenido de estos datos poco tengan que ver con el real, si que el formato de los mismos es exactamente el que va tener la aplicación final.

    Para entender esta nueva funcionalidad, vamos a empezar abriendo Expression Blend 4, bien creamos un nuevo proyecto de Silverlight o abrimos uno existente. En la parte superior derecha Expression Blend 4 nos ofrece tres pestañas (Propiedades,Recursos y Datos).

    1

    Seleccionamos la pestaña Datos, dentro de esta pestaña vamos a crear un nuevo Sample Data. Para ello presionamos en el icono que se muestra en la siguiente imagen:

    2

    Una vez presionado dicho icono elegimos la opción New Sample Data:

    3

    En la ventana emergente debemos otorgarle un nombre con el que sea fácilmente reconocible, en mi caso como mi aplicación va a basarse en los contactos de mi empresa, este será el nombre que le otorgaré como podemos ver a continuación:

    4

    Al realizar dicha acción por defecto dentro de nuestro Sample Data se ha generado una colección que consta a su vez de dos propiedades, veremos más adelante como podemos añadir, editar o eliminar estas colecciones y propiedades:

    5

    Seguidamente la colección la nombraremos como DPersonales, dentro de dicha colección vamos a introducir tres propiedades que llamaremos (Nombre, Apellidos y Dni). Por defecto se han creado dos propiedades, para añadir una nueva, debemos presionar sobre el icono más, junto a la colección DPersonales, como podemos observar en la siguiente imagen:

    6

    Por otro lado, cada una de las propiedades podemos otorgarle el forma que sea más adecuado a nuestras necesidades. Para ello desplegamos la propiedad Nombre y elegimos el formato que se muestra en la siguiente imagen:

    7

    Entrando más en materia como podemos observar no solo podemos elegir el tipo de datos que puede introducir el usuario, también podemos controlar el formato de los datos.

    A continuación vamos añadir una nueva propiedad, en este caso la nombraremos como foto. El tipo de datos ha de ser Image, por otro lado debemos elegir la ubicación donde se encuentran los citados elementos como podemos ver a continuación:

    8

    Por último, ¿cómo mostramos los datos en la interfaz de usuario?. Simplemente seleccionamos la colección DPersonales y la arrastramos al área de diseño de Expression Blend 4:

    9

    Al realizar la anterior acción, nos crea un ListBox en el que aparecen los elementos de la colección en cada uno de los items del ListBox:

    10

    El ListBox por defecto podemos personalizarlo como nosotros deseemos a través de las plantillas. Para ello vamos añadir una propiedad , pero esta ha de ser compleja debido a que dentro de esta propiedad compleja añadiremos propiedades simples.

    11

    Nombramos la propiedad compleja como Edad y dentro añadimos dos propiedades simples llamadas Años y Fecha Nacimiento. El campo Años será de tipo Número y una longitud de 3 dígitos. El campo Fecha de Nacimiento será de tipo cadena pero de formato de fecha.

    12 

    Seguidamente vamos añadir al ListBox un nuevo campo (Años). Para ello seleccionamos el citado elemento, presionamos con el botón derecho sobre el y seleccionamos Edit Additional Templates->Edit Generated Items->Edit Current. De este modo vamos a poder editar la plantilla que representa la apariencia de cada uno de los items del ListBox.

    13

    Dentro de la plantilla vamos a introducir un nuevo objeto. Accedemos a la barra de herramientas seleccionamos el objetos Textblock y lo introducimos dentro de la plantilla. El siguiente paso es enlazar dicho objeto con los datos de ejemplos de la edad (Años) como podemos observar a continuación:

    14

    Cerramos la plantilla presionado sobre le icono 16 y ejecutamos la aplicación siendo el aspecto de la misma el siguiente:

    17

    Gracias a Sample Data podemos asimilar la presentación de los datos antes de implementar nuestro diseño con la parte de desarrollo de cualquier proyecto, consiguiendo con ello la eliminación de posibles errores y el cumplimiento de tiempos.