Las conductas (o behaviors en inglés) son una de esas funcionalidades que he visto que muy pocos utilizan y que en lo personal se me hacen una herramienta sumamente potente, reutilizable y muy fáciles de dominar, por eso me animé a escribir sobre ellas.
Para empezar creo que lo mejor es definir que es lo que pueden hacer o para que fueron hechas ¿no crees? Bueno, pues las conductas tienen un fin muy sencillo, hacerte la vida fácil al momento de implementar funcionalidad específica en tus controles, veamos un ejemplo para poder entenderlo mejor.
Utilizar una conducta de forma básica
Comienza por crear un nuevo proyecto en Expression Blend (si, aquí es en donde trabajaremos en esta ocasión), y vamos a colocar un rectángulo en la pantalla, para quedar de la siguiente manera.
Utilizar las conductas no es nada del otro mundo, solo necesitamos presionar el botón de “Assets” para poder escribir el nombre de una conducta, la primera por la que comenzaremos se llama “MouseDragElementBehavoir”, el resultado de tu pantalla debe ser algo así.
Solo debes arrastrarla hasta el control en cuestión para que en tu pestaña de objetos puedas ver esto.
De esta forma el resultado es un control arrastrable por toda la interfaz, dando funcionalidad de una forma muy práctica.
Utilizar una conducta con parámetros
Hay algunas conductas previamente creadas que necesitan el uso de algunos argumentos para poder funcionar, para que veas como es esto, vamos a implementar en nuestro mismo rectángulo una conducta que requiere cierta configuración, pero antes deberemos crear una animación para el control, por lo que vamos a usar un nuevo control, para dejar intacto al anterior y al nuevo es al que le pondremos una nueva animación.
Crea la animación que gustes, al final el XAML que llevamos hasta ahora es algo así.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="Behaviors.MainPage" Width="1024" Height="768"> <UserControl.Resources> <Storyboard x:Name="moverElemento"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Rectangle Fill="#FF4444F9" HorizontalAlignment="Left" Height="155" Margin="60,65,0,0" Stroke="Black" VerticalAlignment="Top" Width="165" RenderTransformOrigin="0.5,0.5"> <i:Interaction.Behaviors> <ei:MouseDragElementBehavior/> </i:Interaction.Behaviors> </Rectangle> <Rectangle x:Name="rectangle" Fill="#FF4444F9" HorizontalAlignment="Left" Margin="60,377,0,236" Stroke="Black" Width="165" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <CompositeTransform/> </Rectangle.RenderTransform> </Rectangle> </Grid> </UserControl> |
Y de nuevo vas a llamar una conducta, ahora usaremos “Control Storyboard Animation”.
Al haber arrastrado esta conducta dentro de tu control, en la pestaña de propiedades aparecerán los argumentos que debemos poder utilizar.
Como puedes ver, aquí al implementar la conducta debes poder establecerle ciertos elementos, al final, tu resultado puede ser algo como esto.
Si lo ves por XAML el resultado deberá ser así.
La gran ventaja que tienes al implementar animaciones es que simplemente te ahorras muchísimo tiempo y además código por el lado de C#, entonces hasta aquí hemos visto como puedes usarlas en tu favor, pero como buen desarrollador no quedarás satisfecho con esto, sino que irás queriendo crear nuevas conductas de acuerdo a tus necesidades.
Crear tus propias conductas
Vamos a brincarnos a Visual Studio 2010, lo primero que debemos hacer es crear una clase por separado y después agregar la referencia System.Windows.Interactivity.
Una vez teniendo la clase “MiConducta” necesitamos crear la referencia al ensamblado que acabamos de llamar.
using System.Windows.Interactivity; |
Ahora si, con el ensamblado y la referencia, modifica la línea que declara la clase de la siguiente forma
public class MiConducta : TargetedTriggerAction<Rectangle> |
De esta forma la clase que recién acabas de crear heredará de la clase TargetedTriggerAction y a su vez, tendrá la funcionalidad por medio de su constructor para un rectángulo (aclaro que si modificas esta funcionalidad, puedes hacerla sin problema para cualquier elemento que necesites, solo por ejemplo escogí al rectángulo).
Después vamos a declarar tres objetos que nos servirán para la funcionalidad de nuestra conducta.
Shape elementoObjetivo; Brush color1; Brush color2 = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)); |
Y ahora, gracias a la herencia que acabamos de asignar, podremos utilizar un método sobrecargado que se llama Invoke, este es el método que se desencadena al momento de llamar a la conducta dentro de nuestro XAML, y debe quedarte así.
protected override void Invoke(object parameter) { elementoObjetivo = (Shape)this.AssociatedObject; color1 = (Brush)elementoObjetivo.Fill; elementoObjetivo.MouseLeftButtonDown += elementoObjetivo_MouseLeftButtonDown; elementoObjetivo.MouseLeftButtonUp += elementoObjetivo_MouseLeftButtonUp; } |
Como puedes ver, estamos utilizando dos manejadores para cuando nuestro objeto en cuestión sea utilizado, los dos manejadores tendrán lo siguiente.
void elementoObjetivo_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) { elementoObjetivo.Fill = color1; } void elementoObjetivo_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { elementoObjetivo.Fill = color2; } |
Si compilas tu aplicación, ya podrás comenzar a utilizar tu nueva conducta desde Expression Blend.
Conclusión
Crear conductas es una forma genial de ahorrar muchas líneas de código para personalizar tus controles, pueden quitarle a los diseñadores los problemas de interactuar con código y lo mejor es que pueden ser reutilizables si las creas como una biblioteca de clases, así que comienza a entretenerte con esta gran funcionalidad de Silverlight.