Estilos en WPF: heredados, por tipo y por Trigger

Estilos de WPF

¿Que es un estilo?

Se definen como recursos así que o van en la propia ventana en la sección Windows.Resources o en un diccionario de recursos

Es una serie de parejas propiedad/valor, que serán aplicadas a una serie de elementos, es decir podemos definir para cada propiedad de un control un valor que será el que se aplique

Tipos de estilos

Estilo Heredado

Estilo por tipo

Estilo por Trigger

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

Definición:

<Style x:Key="estilo1" >

<Setter Property="Control.FontFamily" Value="Arial"/>

<Setter Property="Control.FontSize" Value="22"/>

<Setter Property="Control.Background" Value="Red"/>

</Style>

Aplicación:

<Button Content="Pincha Aquí!!" Height="54" HorizontalAlignment="Left"

Margin="134,132,0,0" Name="button1" VerticalAlignment="Top" Width="105"

Style="{StaticResource estilo1}" />

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

Definicion:

Aplicación:

<Style x:Key="estilo2" TargetType="TextBlock">

<Setter Property="Control.FontFamily" Value="Broadway"/>

<Setter Property="Control.FontSize" Value="30"/>

<Setter Property="Control.Background" Value="Orange"/>

</Style>

<TextBlock Height="130" HorizontalAlignment="Left" Margin="156,0,0,0" Name="textBlock1" Text="Bienveidos a WPF"

VerticalAlignment="Top" Width="308" Style="{StaticResource estilo2}" />

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:

Aplicación:

<Style x:Key="evento" TargetType="Rectangle">

<Setter Property="Fill" Value="RoyalBlue"/>

<Style.Triggers>

<EventTrigger RoutedEvent="MouseEnter">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Opacity" To="0">

</DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger RoutedEvent="MouseLeave">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Opacity" To="1">

</DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

<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.

<Style x:Key="datos" TargetType="Rectangle">

<Setter Property="Fill" Value="BurlyWood"/>

<Style.Triggers>

<DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Rojo">

<Setter Property="Fill" Value="Red"></Setter>

</DataTrigger>

<DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Azul">

<Setter Property="Fill" Value="Blue"></Setter>

</DataTrigger>

<DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Verde">

<Setter Property="Fill" Value="Green"></Setter>

</DataTrigger>

<DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Amarillo">

<Setter Property="Fill" Value="Yellow"></Setter>

</DataTrigger>

<DataTrigger Binding="{Binding ElementName=Entrada,Path=Text}" Value="Negro">

<Setter Property="Fill" Value="Black"></Setter>

</DataTrigger>

</Style.Triggers>

</Style>

<Grid>

<TextBox Height="23" HorizontalAlignment="Left" Margin="190,46,0,0" Name="Entrada" VerticalAlignment="Top" Width="120" />

<Label Content="Elige el color:" Height="24" Name="label" HorizontalAlignment="Left"

Margin="100,44,0,0" VerticalAlignment="Top" Width="94" />

<Rectangle Stroke="red" Margin="171,134,80,35" Style="{StaticResource datos}"></Rectangle>

</Grid>

Definición:

Aplicación:

Actividad 2.1.- Estilos en WPF

Alumno: Tut Lemus Elio David

Matricula:18470379

Grupo: MS-4

23/04/2020

Fuentes de informacion:

https://geeks.ms/rmayo/2010/12/22/tipos-de-estilos-en-wpf-silverlight/

https://docs.microsoft.com/es-es/dotnet/framework/winforms/advanced/walkthrough-styling-wpf-content

https://riptutorial.com/es/wpf/topic/4090/estilos-en-wpf

https://geeks.ms/oalvarez/2009/07/08/estilos-y-templates-en-wpf/