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>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *