Archive

Archive for the ‘Blend’ Category

Crear y manipular un menú contextual en Silverlight

April 18th, 2012 No comments

Una funcionalidad básica de prácticamente cualquier aplicación de escritorio es el uso del clic derecho para el común despliegue de un menú contextual, una funcionalidad que extraño mucho en las páginas web, afortunadamente en Silverlight podemos aprovechar la posibilidad de usar esta herramienta.

Comienza por crear una nueva solución, después, al hacerlo, crea una nueva carpeta llamada Controles, ahí por último crea un nuevo UserControl llamado MenuContextual, al terminar, tu proyecto deberá verse de la siguiente manera.

ProyectoMenu

Ahora en ese UserControl llamado Menu Contextual, coloca el siguiente XAML.

<usercontrol x:Class="Menu_Contextual.MenuContextual"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="150" Height="70">

<grid x:Name="LayoutRoot">
<rectangle Fill="#FF666666" Margin="0" Stroke="Black"/>
<textblock x:Name="txtOpcion1" Height="20" Margin="8,8,8,0" TextWrapping="Wrap" Text="Opción 1" VerticalAlignment="Top" Foreground="White" TextAlignment="Center" FontSize="14.667" MouseLeftButtonDown="txtOpcion_MouseLeftButtonDown"/>
<textblock x:Name="txtOpcion2" Height="20" Margin="8,0,8,8" TextWrapping="Wrap" Text="Opción 2" VerticalAlignment="Bottom" Foreground="White" TextAlignment="Center" FontSize="14.667" MouseLeftButtonDown="txtOpcion_MouseLeftButtonDown"/>
</grid>
</usercontrol>[/sourceode]

Nada complejo, simplemente un rectángulo de fondo y dos TextBlock que servirán como opciones. Cada uno de estos últimos tiene un manejador de eventos igual, este evento debes colocarlo en tu code behind.

[sourcecode lang='csharp']private void txtOpcion_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.Visibility = Visibility.Collapsed;
}

Listo, ese es el menú, ahora solo compila el proyecto para poder hacer reconocible el control que acabas de crear, al haberlo hecho ve a tu MainPage y primero coloca el siguiente XAML.

<usercontrol x:Class="Menu_Contextual.MainPage" xmlns:local="clr-namespace:Menu_Contextual"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480">

<grid x:Name="LayoutRoot" Background="White">
</grid><grid .ColumnDefinitions>
<columndefinition Width="0.5*"/>
<columndefinition Width="0.5*"/>
</grid>
<grid x:Name="contNormal" Margin="0">
<textblock Height="24" Margin="8,8,0,0" TextWrapping="Wrap" Text="Sin menú contextual" VerticalAlignment="Top" HorizontalAlignment="Left" Width="124"/>
</grid>
<grid x:Name="contContextual" Grid.Column="1" Margin="0" Background="#FF9F9F9F">
</grid>

</usercontrol>

Ahora reemplaza el tag del Grid que se llama “contContextual” con el siguiente XAML.

<grid x:Name="contContextual" Grid.Column="1" Margin="0" Background="#FF9F9F9F" MouseRightButtonDown="contContextual_MouseRightButtonDown">
<textblock Height="24" Margin="8,8,0,0" TextWrapping="Wrap" Text="Con menú contextual" VerticalAlignment="Top" HorizontalAlignment="Left" Width="124"/>
<local:menucontextual x:Name="ctrlMenu" VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="Collapsed"/>
</grid>

Así simplemente le colocas al grid un manejador para el evento MouseRightButtonDown y ahora lo último, colócate en el codeBehind para el evento generado y ahí escribe el siguiente código.

private void contContextual_MouseRightButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
e.Handled = true;
double izquierda = e.GetPosition(contContextual).X;
double arriba = e.GetPosition(contContextual).Y;
ctrlMenu.Margin = new Thickness(izquierda, arriba, 0, 0);
ctrlMenu.Visibility = Visibility.Visible;
}

La primera línea le indicará a tu aplicación que debe cancelar la conducta preestablecida para ese control, es decir, que deje de desplegar el menú contextual de Silverlight, después, por medio del manejador de eventos, podrás utilizar un método para obtener las coordenadas X e Y de tu puntero, para finalmente enviar esos valores al margen de tu control y hacerlo visible.

MenuContextualSilverlight

De este muy sencilla manera es como puedes crear y desplegar un menú contextual dentro de Silverlight.

Puedes descargar el código fuente aquí.

Categories: Blend, Tutoriales Tags:

Uso y creación de Behaviors en Silverlight

February 12th, 2012 No comments

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.

Interfaz

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

mouseDrag

 

Solo debes arrastrarla hasta el control en cuestión para que en tu pestaña de objetos puedas ver esto.

conducta

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><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><easingdoublekeyframe .EasingFunction>
<circleease EasingMode="EaseOut"/>
</easingdoublekeyframe>

<easingdoublekeyframe KeyTime="0:0:1" Value="0">
</easingdoublekeyframe><easingdoublekeyframe .EasingFunction>
<circleease EasingMode="EaseOut"/>
</easingdoublekeyframe>

</doubleanimationusingkeyframes>
</storyboard>
</usercontrol>

<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>
</rectangle>
<rectangle x:Name="rectangle" Fill="#FF4444F9" HorizontalAlignment="Left" Margin="60,377,0,236" Stroke="Black" Width="165" RenderTransformOrigin="0.5,0.5">
</rectangle><rectangle .RenderTransform>
<compositetransform />
</rectangle>

</grid>

Y de nuevo vas a llamar una conducta, ahora usaremos “Control Storyboard Animation”.

control

Al haber arrastrado esta conducta dentro de tu control, en la pestaña de propiedades aparecerán los argumentos que debemos poder utilizar.

argumentos

Como puedes ver, aquí al implementar la conducta debes poder establecerle ciertos elementos, al final, tu resultado puede ser algo como esto.

configuracion

Si lo ves por XAML el resultado deberá ser así.

<rectangle x:Name="rectangle" Fill="#FF4444F9" HorizontalAlignment="Left" Margin="60,377,0,236" Stroke="Black" Width="165" RenderTransformOrigin="0.5,0.5">
<i:interaction .Triggers>
<i:eventtrigger EventName="MouseLeftButtonDown">
<ei:controlstoryboardaction Storyboard="{StaticResource moverElemento}"/>
</i:eventtrigger>
</i:interaction>
</rectangle><rectangle .RenderTransform>
<compositetransform />
</rectangle>

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.

Proyecto

 

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.

MiConducta

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.

Puedes descargar el código desde aquí.

Categories: Blend, Herramientas, Tutoriales Tags:

Día 19: Tilt effect

December 15th, 2011 No comments

Esta es una traducción de Day 19:Tilt Effect, puedes encontrarlo aquí en su versión original en inglés.

dia19

Las aplicaciones que se ven y comportan como aplicaciones nativas de Windows Phone serán mas atractivas para usuarios que las aplicaciones que no se ven de esa manera. Así que, tus aplicaciones deberían tratar de incorporar una conducta tan nativa como sea posible. Una conducta de control que es común en muchas aplicaciones nativas es la de TiltEffect. Mira la aplicación de Teléfono y verás la lista de usuarios que has llamado.

Ahora pon atención mientras seleccionas un elemento en la lista. Cuando seleccionas ese elemento, puedes ver una ligera inclinación al elemento que seleccionaste. Al soltar el elemento, regresa a su posición original. Esta animación de inclinación te da la seguridad de que la aplicación del teléfono ha recibido tu instrucción. Es un cambio sutil, pero incrementa la experiencia de usuario.

Este artículo te muestra como agregar el TiltEffect behavior para controlar tus aplicaciones Silverlight. Una aplicación de ejemplo es creada y la cual muestra la conducta en acción y como prenderla y apagarla en tiempo de ejecución.

Ajustes para usar la TiltEffect Behavior

La conducta TiltEffect no esta incluida en los controles preestablecidos. Tenemos que incluirla a partir de un ejemplo que Microsoft lanzó de modo que los desarrolladores pudieran agregarla en sus aplicaciones. La conducta que vamos a usar esta en un archivo C# llamado TiltEffect.cs en el Control de Ejemplo TiltEffect en MSDN.

Primero que nada, descarga ese ejemplo y extrae los archivos a una carpeta en tu computadora. El archico TiltEffect.cs esta en el subdirectorio ControlTiltEffect con todo el código fuente para el ejemplo. Recuerda la ubicación del archivo de modo que puedas agregarlo a tu proyecto.

Para agregarlo en tu proyecto Silverlight, necesitas:

1.- Abre tu proyecto en Visual Studio y damos clic derecho en el proyecto.

2.- Seleccionamos la opción “Add” y después seleccionamos la opción “Existing Item”

clip_image002_thumb22

3.- En el diálogo de “Add Existing Item”navega para seleccionar el archivo TiltEffect.cs que acabas de descargar.

4.- Esto hará una copia del archivo en el directorio fuente de tu proyecto y después lo agregará al mismo.

Espacio de nombres

Abre el archivo TiltEffect.cs. Nota que el espacio de nombres para este archivo es ControlTiltEffect. Puedes cambiarlo para hacerlo del mismo espacio de nombres de tu proyecto o dejarlo así como está. Para nuestro ejemplo, vamos a dejarlo con el de la aplicación.

Cuando quieras usar este TiltEffect en tu aplicación necesitas agregar el espacio de nombres a los archivos que usas. Para agregar el espacio de nombres a las páginas en donde quieras usar el TiltEffect en tus controles, agrega estas líneas a la cima de tu archivo XAML.

xmlns:efecto=”clr-namespace:Dia_19_TiltEffect” efecto:TiltEffect.IsTiltEnabled=”True”

Esto creará un nuevo alias llamado efecto para el espacio de nombres Dia_19_TileEffect y lo hará disponible para estar disponible en esta página.

La segunda línea habilita el TiltEffect. Con estas dos líneas agregadas, todos los botones y ListBox en esta página tendrán la conducta TiltEffect. Como verás mas adelante, podemos habilitar o inhabilitar el TitleEffect para controles específicos de la página.

Ahora que sabemos como agregar la conducta TiltEffect a nuestro proyecto y páginas XAML vamos a mirar un ejemplo de como podríamos usarlo en una aplicación.

Aplicación de ejemplo

Esta aplicación de ejemplo tiene muchos controles los cuales demostrarán como funciona la conducta TiltEffect. La mayoría de los botones y ListBox se inclinarán cuando los presiones. Con TiltEffect.IsTiltEnabled=”True” es la conducta preestablecida para la página.

Si quieres suprimir el efecto de inclinado en un solo control: Suprime la propiedad Tilt

Asume que tenemos un botón específico en nuestra página que no queremos que cuente con el efecto. Podemos habilitar y suprimir el TiltEffect para cada control o elemento de un ListBox de manera aislada. En nuestro ejemplo, el segundo botón no se inclinará, esto es porque la propiedad ha sido establecida a detenerse de la inclinación. Aquí está el XAML para el segundo botón.

<Button efecto:TiltEffect.SuppressTilt=”True” Content=”Sin efecto” Height=”82″ HorizontalAlignment=”Left” Margin=”229,52,0,0″ VerticalAlignment=”Top” Width=”221″ />

Nota que tiene la propiedad efecto:TiltEffect.SuppressTilt=”True”. Esto suprime todos los efectos de inclinación para este control. El segundo item del ListBox tiene la misma propiedad ajustada así que tampoco la ejecutará. Todos los demás controles que no incluyan esta propiedad, lo harán sin problema.

Si quieres suprimir el efecto de inclinado en la página entera: Usa la propiedad IsTiltEnabled

Es también posible detener el efecto TiltEffect para una página entera. Esto podría ser útil para mostrar un modo “retro” en tu aplicación. Al final de la página, hay un botón que dice “Detener efectos”. Cuando este botón es presionado, todos los controles detienen el uso de ese efecto. Si lo presionas de nuevo, el efecto de inclinación será restablecido.

El manejador de eventos btnDetener_Click hace el trabajo. El código C# es en donde esto sucede. Para usar el efecto de inclinación en C#, si no cambiaste el espacio de nombres deberás incluirlo en una sentencia using.

Después en el manejador de eventos btnDetener_Click, tenemos la propiedad IsTiltEnabled para la página entera. Para hacer esto usamos el método GetIsTiltEnabled para leer la propiedad de dependencia para la página entera que fue dada por la clase TiltEffect. Nota el objeto this dentro del paréntesis que representa la página entera. Este valor es guardado en la variable tiltEnabled.

Después ajustamos el contenido del botón basado en la propiedad IsTiltEnabled.

Finalmente, cambiamos la propiedad IsTiltEnabled para la página entera, para ser lo opuesto de lo que suele hacer. Esta ocasión estamos modificando la propiedad de dependencia con el método SetIsTiltEnabled.

Hasta ahora, ninguno de los botones o elementos del ListBox se inclinarán. Prueba y chécalo. Después presiona de nuevo el botón btnDetener para hacer a los botones inclinarse de nuevo.

using System.Windows;
using Microsoft.Phone.Controls;

namespace Dia_19_TiltEffect
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}

private void btnDetener_Click(object sender, System.Windows.RoutedEventArgs e)
{
bool efectosHabilitados = TiltEffect.GetIsTiltEnabled(this);
btnDetener.Content = (efectosHabilitados) ? “Iniciar efectos” : “Detener efectos”;
TiltEffect.SetIsTiltEnabled(this, !efectosHabilitados);
}
}
}

Código XAML completo

<phone:PhoneApplicationPage x:Class=”Dia_19_TiltEffect.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″
FontFamily=”{StaticResource PhoneFontFamilyNormal}”
FontSize=”{StaticResource PhoneFontSizeNormal}”
xmlns:efecto=”clr-namespace:Dia_19_TiltEffect”
efecto:TiltEffect.IsTiltEnabled=”True”
Foreground=”{StaticResource PhoneForegroundBrush}”
SupportedOrientations=”Portrait” Orientation=”Portrait”
shell:SystemTray.IsVisible=”True”>

<Grid x:Name=”LayoutRoot” Background=”Transparent”>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
<TextBlock x:Name=”ApplicationTitle” Text=”LA LIGA SILVERLIGHT” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”inclinación” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
</StackPanel>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
<TextBlock Height=”48″ HorizontalAlignment=”Left” Margin=”20,6,0,0″ Text=”Botones” VerticalAlignment=”Top” Width=”402″ FontSize=”32″ FontWeight=”Bold” />
<Button Content=”Con efecto” Height=”82″ HorizontalAlignment=”Left” Margin=”0,52,0,0″ VerticalAlignment=”Top” Width=”202″ />
<Button efecto:TiltEffect.SuppressTilt=”True” Content=”Sin efecto” Height=”82″ HorizontalAlignment=”Left” Margin=”229,52,0,0″ VerticalAlignment=”Top” Width=”221″ />
<CheckBox Content=”CheckBox” Height=”72″ HorizontalAlignment=”Left” Margin=”229,140,0,0″ VerticalAlignment=”Top” />
<RadioButton Content=”RadioButton” Height=”72″ HorizontalAlignment=”Left” Margin=”9,140,0,0″ VerticalAlignment=”Top” />
<HyperlinkButton Content=”HyperlinkButton” Height=”30″ HorizontalAlignment=”Left” Margin=”20,218,0,0″ VerticalAlignment=”Top” Width=”200″ />
<TextBlock FontSize=”32″ FontWeight=”Bold” Height=”48″ HorizontalAlignment=”Left” Margin=”20,282,0,0″ Text=”ListBox” VerticalAlignment=”Top” Width=”402″ />
<ListBox Height=”100″ HorizontalAlignment=”Left” Margin=”8,334,0,0″ VerticalAlignment=”Top” Width=”440″ d:LayoutOverrides=”GridBox”>
<ListBoxItem Content=”Efectos 1″ />
<ListBoxItem efecto:TiltEffect.SuppressTilt=”True” Content=”Efectos suprimidos 2″ />
<ListBoxItem Content=”Efectos 3″ />
</ListBox>
<Button x:Name=”btnDetener” Content=”Detener efectos” Height=”82″ HorizontalAlignment=”Left” Margin=”14,495,0,0″ VerticalAlignment=”Top” Width=”438″ Click=”btnDetener_Click” />

</Grid>
</Grid>
</phone:PhoneApplicationPage>

En resumen

Agregar efectos de inclinación a tus controles agrega un efecto que permite a los usuarios saber que si entrada fue recibida. Es un poco mas de trabajo agregar conductas  como esta a tus aplicaciones, pero lo valdrá con una aprobación mayor de tu usuario. Hasta ahora has visto como agregar la conducta de inclinación a tu aplicación, como habilitarla para las páginas enteras, como deshabilitarla para un control único y como hacerlo para la página completa. La atención a los detalles mas insignificantes como este hará a tu aplicación destacar.

Por cierto, si tienes curiosidad, te sugiero que le des un vistazo al archivo TiltEffect.cs. Es un ejemplo excelente de como usar animaciones y manipulaciones táctiles para crear efectos desde los huesos. Toma un poco de tiempo para entender como están construidas las conductas como esta para incrementar tu conocimiento y confianza con el desarrollo de Windows Phone. Este es un control versátil que tu puedes adaptar en otras formas si es necesario.

Para descargar un proyecto completamente funcional de Windows Phone que muestre los efectos de inclinación, puedes hacerlo en el siguiente enlace.

Descarga el código aquí.

Mañana, vamos a ver como crear tonos de llamada para tus usuarios, y como Windows Phone soporta ahora esta genial herramienta. Nos vemos.

Categories: Blend, Videos, WP7 Tags:

Día 18: Usando información de ejemplo

December 15th, 2011 2 comments

Esta es una traducción de Day 18: Using Sample Data, puedes encontrarlo aquí en la versión original en inglés.

dia18

Hoy, vamos a explorar otro gran elemento de Expression Blend creando un poco de información de ejemplo que nuestra aplicación puede usar. Muchas veces, cuando comienzas a crear una aplicación, quieres ver como se verá la información en la interfaz antes de que la base de datos (o servicio web) esté listo. Para hacer esto, podemos usar Expression Blend.

Desde que he usado Expression Blend y muchas de sus características en el pasado,  podría darte algunas lecturas recomendadas aquí.

* 31 days of Windows Phone | Day 5: System Theming

* 31 days of Windows Phone | Day 6: Application Bar

* 31 days of Windows Phone | Day 29: Animations

* Expression Blend Training Kit

Para el artículo de hoy, vamos a meternos directamente. Si quieres probar esta aplicación en tu Windows Phone gratis,  está disponible en el Windows Phone Marketplace.

Crear tu aplicación de Windows Phone

Como en la mayoría de mis artículos en esta serie, también he creado un video para demostrar lo que estoy tratando de cumplir en este artículo. Explicaré todo lo que esté mostrado en el video, pero si prefieres verlo primero, aquí esta.

Puedes ver el video aquí.

Comenzaremos creando un nuevo proyecto de Windows Phone. Espero que hayas hecho esto esto ya muchas veces en Visual Studio 2010, así que comenzaré por hacerlo por medio de Expression Blend esta ocasión.

image8

Una vez que tengas tu proyecto, con tu MainPage.xaml abierta, vamos a agregar un ListBox a nuestra página. Para hacer esto, da clic en la en la barra de menú ubicada a la izquierda, escoge “Controls” y selecciona el ícono del ListBox.

image9

Ya que hayas seleccionado el ListBox, puedes hacer clic y arrastrarlo en la superficie de diseño.

image10

He expandido mi ListBox para tomar el espacio entero dentro de mi grid ContentPanel que fue creado “por default” cuando cree mi proyecto (Este es todo el espacio que esta abajo del texto que dice “page name” en la pantalla).

Crear un poco de información de ejemplo

Si miras en la esquina derecha de Expression Blend, deberías ver una pestaña con la palabra “Data” en ella. Abre esta pestaña.

image11

Al dar clic en el botón de “New Sample Data” en la parte superior derecha de este panel, seremos capaces de comenzar a crear nuestra aplicación de ejemplo.

image12

Esto hará que se muestre un cuadro de diálogo “New Sample Data”. Dale a tu información un nombre (Nombré a la mía Muebles, para seguir el ejemplo que usé en el video).

image13

Notarás que tienes la opción para definir esta información en tu proyecto, o en una página específica. Yo recomiendo escoger “Project” porque creará bastantes estructuras en tu aplicación que puedas usar en mas de una sola forma.

Al dar clic en OK te mandará de regreso a la pestaña de “Data”, con unas cuantas cosas agregadas.

image14

Ahora tenemos una estructura que parecería familiar a cualquiera que haya trabajado con una base de datos antes. “Muebles” representa nuestra base de datos y “Colección” es una tabla en esa base de datos. “Propiedad 1” y “Propiedad 2” son campos en la tabla de Colección.

Voy a agregar dos nuevas propiedades a la base de datos y renombrar las dos existentes, así las cosas serán mas descriptivas. La colección se volverá “Sillas” y ahora tenemos 4 propiedades: SKU, Precio, Descripción e Imagen.

image15

En la extrema derecha de cada propiedad, hay un ícono para indicar que tipo de información es. Para descripción, quiero tener una larga cadena de palabras. Puedes hacer esto eligiendo el tipo de cadena “Lorem ipsum”. Esto nos dará cadenas aleatorias de 20 palabras, sin ninguna palabra mayor a 8 caracteres.

image16

Queremos que la propiedad imagen contenga imágenes, así que deberías elegir el tipo Imagen. Puedes especificar tu propio set de imágenes si quieres, nosotros haremos eso un poco después en este artículo.

image17

Ajustaré rápidamente la propiedad Precio a un tipo String/Price y SKU a un valor de nombre con 6 caracteres.

image18  image19

Si das clic en el botón de “View Sample Data” a la derecha del título de Sillas, se te mostrará en una tabla la información que contiene información aleatoria para cada una de las propiedades que hemos especificado. Al cambiar el valor del número de registros al fondo, puedes determinar cuantos registros te gustaría usar.

SNAGHTML27ad8b6d

Ahí lo tienes. Hemos creado la información de ejemplo. En este punto, estás probablemente preguntándote como sabía que debía usar imágenes de sillar. Sin importar el nombre de la estructura de tu información, si usas un tipo de imagen y no especificas un conjunto de imágenes, este conjunto de imágenes será siempre el utilizado. No hay magia, solo una demostración con truco.

Para cambiar las imágenes a algo mas apropiado en tu proyecto, puedes re abrir la definición para la propiedad de imagen que creé y especificar una carpeta en tu computadora. Cuando hagas esto, terminarás con valores de ejemplo que se verán mas como estos (asumiendo que hayas usado las imágenes que yo usé).

SNAGHTML27b15a01

Ahora es momento de usar esta información.

Usar la información de ejemplo en una aplicación Windows Phone

Primero, a pesar de que es llamada “Información de ejemplo”, si tienes un conjunto pequeño de información estática que estés intentando utilizar en tu aplicación, no hay absolutamente nada malo al hacerla parte permanente de tu aplicación. Dicho esto, para hacer que esta información se vaya a nuestro ListBox que creamos desde casi el principio, puedes simplemente arrastrar “Sillas” de la pestaña de datos directamente a tu control ListBox, algo como esto (la caja azul es mi mouse arrastrando la información al ListBox, puedes darle clic a la imagen para hacerla mas larga).

image_thumb

En el momento en que dejas a tu aplicación ir, inmediatamente creará dos cosas para ti.

* Una plantilla de datos para diseñar los elementos individuales en el ListBox.

* Un enlazado entre la información de ejemplo y tu ListBox

En este ejemplo, la plantilla de datos es almacenada directamente dentro de nuestra página MainPage y se ve como esto.

<DataTemplate x:Key=”ChairsItemTemplate”>
<StackPanel Width=”297″>
<Canvas Height=”143″ Margin=”1,0,-57,0″>
<TextBlock Text=”{Binding SKU}” Canvas.Top=”44″ Canvas.Left=”148″ Width=”205″/>
<TextBlock Text=”{Binding Price}” FontSize=”16″ Foreground=”#FF339933″ Canvas.Top=”86″ Width=”205″ Canvas.Left=”148″ Height=”50″/>
<TextBlock Text=”{Binding Description}” Height=”32″ TextWrapping=”Wrap” Width=”298″ Canvas.Top=”8″ Canvas.Left=”148″/>
<Image Source=”{Binding Image}” HorizontalAlignment=”Left” Height=”136″ Width=”136″/>
</Canvas>
</StackPanel>
</DataTemplate>

Verás que nuestro ListBox contiene un ItemTemplate enlazado a este DataTemplate y el ItemSource es definido como nuestra información Silla

<ListBox Margin=”8,8,0,8″ ItemTemplate=”{StaticResource ChairsItemTemplate}” ItemsSource=”{Binding Chairs}” SelectionChanged=”ListBox_SelectionChanged”/>

Para editar la apariencia de nuestro DataTemplate, podemos usar Expression Blend para hacer esto también. Da clic derecho en tu ListBox en Expression Blend y escoge

Edit Additional Templates > Edit Generated Items (Item Template) > Edit Current

image_thumb1

Al hacer esto, notarás que muchas  cosas en nuestra interfaz ha cambiado. Primero, hasta arriba de nuestro panel de diseño, ahora indica que estamos trabajando en ItemTemplate de nuestro ListBox.

image22

En segundo lugar, echa un vistazo a tu panel de Object and Timeline. Ahora específicamente enfocado en el contenido del ItemTemplate el cual contiene 3 TextBlock y un control de Imagen.

image23

Podemos ahora manipular los elementos de nuestro ItemTemplate directamente en el diseño de la superficie. Por ejemplo, solo hice la primer imagen mas grande. Dado que estamos editando la plantilla, notarás que todas esas imágenes también se hacen mas grandes.

image24

En la siguiente imagen, notarás que moví el TextBlock de Description al fondo de la plantilla y alineados a la derecha todos los TextBlock. El Precio también incrementó el tamaño de su fuente y el color de fuente es ahora verde.

image25

Hasta ahora, a menos de que tengas la necesidad de hacerlo mas presentable, tienes un aplicación trabajando. Al correrla en el emulador resultará en una aplicación que tiene un ListBox con un desplazador. Así es como aparece, basado en los cambios que he hecho.

image26

¿Donde esta toda la información almacenada?

Ahora que podemos desplegar toda la aplicación en el emulador, la información aparece, podemos usarla y manipularla, quizá te estás preguntando donde está almacenada en nuestra aplicación, y como funciona.

Si le das un vistazo a la estructura de tu proyecto, notarás una nueva carpeta llamada SampleData.

image27

Dentro de esta carpeta, tienes un archivo llamado Muebles.xaml el cual contiene tu información actual generada. Su contenido es algo como esto:

<!–
*********    DO NOT MODIFY THIS FILE     *********
This file is regenerated by a design tool. Making
changes to this file can cause errors.
–>
<SampleData:Furniture xmlns:SampleData=”clr-namespace:Expression.Blend.SampleData.Furniture” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”>
<SampleData:Furniture.Chairs>
<SampleData:ChairsItem SKU=”November 1, 2011″ Price=”http://bit.ly/mango31-day1″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day1-EmulatorTools.png” Description=”Day #1 – The New Emulator Tools” />
<SampleData:ChairsItem SKU=”November 2, 2011″ Price=”http://bit.ly/mango31-day2″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day2-DeviceStatus.png” Description=”Day #2 – DeviceStatus” />
<SampleData:ChairsItem SKU=”November 3, 2011″ Price=”http://bit.ly/mango31-day3″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day3-Reminders.png” Description=”Day #3 – Alarms &amp; Reminders” />
<SampleData:ChairsItem SKU=”November 4, 2011″ Price=”http://bit.ly/mango31-day4″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day4-Compass.png” Description=”Day #4 – Compass” />
<SampleData:ChairsItem SKU=”November 5, 2011″ Price=”http://bit.ly/mango31-day5″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day5-Gyroscope.png” Description=”Day #5 – Gyroscope” />
<SampleData:ChairsItem SKU=”November 6, 2011″ Price=”http://bit.ly/mango31-day6″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day6-Motion.png” Description=”Day #6 – Motion API” />
<SampleData:ChairsItem SKU=”November 7, 2011″ Price=”http://bit.ly/mango31-day7″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day7-RawCamera.png” Description=”Day #7 – Raw Camera Feed” />
<SampleData:ChairsItem SKU=”November 8, 2011″ Price=”http://bit.ly/mango31-day8″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day8-ContactsAPI.png” Description=”Day #8 – Contacts API” />
<SampleData:ChairsItem SKU=”November 9, 2011″ Price=”http://bit.ly/mango31-day9″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day9-CalendarAPI.png” Description=”Day #9 – Calendar API” />
<SampleData:ChairsItem SKU=”November 10, 2011″ Price=”http://bit.ly/mango31-day10″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day10-NetworkInformation.png” Description=”Day #10 – Network Information” />
<SampleData:ChairsItem SKU=”November 11, 2011″ Price=”http://bit.ly/mango31-day11″ Image=”/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day11-LiveTiles.png” Description=”Day #11 – Live Tiles” />

La estructura actual de la información en este archivo esta definida por el archivo Muebles.xaml.cs, el cual contiene las clases y propiedades que están mostradas aquí, también las referencias a la ubicación de nuestras imágenes.

//      *********    DO NOT MODIFY THIS FILE     *********
//      This file is regenerated by a design tool. Making
//      changes to this file can cause errors.
namespace Expression.Blend.SampleData.Furniture
{
using System;

// To significantly reduce the sample data footprint in your production application, you can set
// the DISABLE_SAMPLE_DATA conditional compilation constant and disable sample data at runtime.
#if DISABLE_SAMPLE_DATA
internal class Furniture { }
#else

public class Furniture : System.ComponentModel.INotifyPropertyChanged
{
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}

public Furniture()
{
try
{
System.Uri resourceUri = new System.Uri(“/Day18_BlendSampleData;component/SampleData/Furniture/Furniture.xaml”, System.UriKind.Relative);
if (System.Windows.Application.GetResourceStream(resourceUri) != null)
{
System.Windows.Application.LoadComponent(this, resourceUri);
}
}
catch (System.Exception)
{
}
}

private Chairs _Chairs = new Chairs();

public Chairs Chairs
{
get
{
return this._Chairs;
}
}
}

public class ChairsItem : System.ComponentModel.INotifyPropertyChanged
{
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}

private string _SKU = string.Empty;

public string SKU
{
get
{
return this._SKU;
}

set
{
if (this._SKU != value)
{
this._SKU = value;
this.OnPropertyChanged(“SKU”);
}
}
}

private string _Price = string.Empty;

public string Price
{
get
{
return this._Price;
}

set
{
if (this._Price != value)
{
this._Price = value;
this.OnPropertyChanged(“Price”);
}
}
}

private System.Windows.Media.ImageSource _Image = null;

public System.Windows.Media.ImageSource Image
{
get
{
return this._Image;
}

set
{
if (this._Image != value)
{
this._Image = value;
this.OnPropertyChanged(“Image”);
}
}
}

private string _Description = string.Empty;

public string Description
{
get
{
return this._Description;
}

set
{
if (this._Description != value)
{
this._Description = value;
this.OnPropertyChanged(“Description”);
}
}
}
}

public class Chairs : System.Collections.ObjectModel.ObservableCollection<ChairsItem>
{
}
#endif
}

Finalmente, tienes el folder, el cual contiene todas las imágenes que estamos usando. Dado que es usamos ambas colecciones de imágenes, las de las sillas y las de mi colección propia, encontrarás cada una de ellas en esta carpeta para ti. Como los comentarios lo muestran, si estás planeando editar esta información de ejemplo desde Blend, no lo hagas. Tus cambios serán ignorados. Estos son archivos generados de código y deberán ser tratados como tales.

En Resumen

Aquí lo tienes. Tienes una aplicación que usa la información de ejemplo que creaste en Expression Blend para poblar un ListBox usando un DataTemplate. Hay muchos lugares donde podrás encontrar esta técnica útil, así que tenlo en mente para conjuntos de información estática en lugar de usar algo mas complicado como una base de datos o un servicio web.

Si quieres descargar una aplicación entera de Windows Phone que use esta información de ejemplo, puedes hacerlo en el siguiente link.

Puedes descargar el código aquí.

Mañana, Doug Mair esta de vuelta para discutir la adición de el TiltEffec a los elementos XAML dándote un poco de interacción a los gestos táctiles de tu usuario. Nos vemos.

Categories: Blend, Tutoriales, WP7 Tags:

Atajos de teclado en Expression Blend

April 3rd, 2011 No comments

Hola Universo:

En el blog de Kunal Chowdhury, Microsoft MVP en Silverlight, me he encontrado un post de mucha utilidad: atajos de teclado para nuestro programa de diseño visual favorito, Expression Blend. Veamos.

Atajo de Teclado Función
F1 Guia de usuario
Ctrl + + Aumentar Zoom en vista diseñador
Ctrl + - Disminuir Zoom en vista diseñador
Ctrl + 0 Ajustar la pagina entera en la vista diseñador
Ctrl + 1 Zoom al tamaño actual
Ctrl + 9 Ajustar selección a la vista diseñador
F9 Mostrar manejadores
Ctrl + Shift + H Mostrar los límites de objeto
F11 Cambiar a vista de documento activo
F2 Editar texto o renombrar el control seleccionado
Ctrl + E Editar Control
Ctrl + Shift + ] Lleva el control al frente
Ctrl + ] Llevar control adelante
Ctrl + Shift + [ Llevar control al fondo
Ctrl + [ Llevar control atras
Ctrl + G Agrupar en un control Grid
Ctrl + Shift + G Desagrupar un elemento
Ctrl + Shift + D fijar contenedor activo
Ctrl + Shift + 5 Auto-tamaño según el ancho
Ctrl + Shift + 6 Auto-tamaño según el alto
Ctrl + Shift + 1 Hacer que el ancho en los controles seleccionados sea el mismo
Ctrl + Shift + 2 Hacer que el alto  en los controles seleccionados sea el mismo
Ctrl + Shift + 9 Hacer que el tamaño de  los controles seleccionados sea el mismo
Ctrl + Shift + 3 Rotar controles horizontalmente
Ctrl + Shift + 4 Rotar controles verticalmente
Ctrl + 7 Hacer trazado de recorte
Ctrl + Shift + 7 Liberar un trazado de recorte
Ctrl + 8 Hacer trazado compuesto
Ctrl + Shift + 8 Liberar trazado compuesto
Ctrl + L Bloquear controles seleccionados
Ctrl + Shift + L Desbloquear todos los controles
Ctrl + T Mostrar los controles seleccionados en el diseñador
Ctrl + 3 Ocultar los controles seleccionados en el diseñador
Alt + Shift + R Agregar referencia al proyecto
Ctrl + Shift + B Construir proyecto
F5 Correr proyecto en modo depuración
Ctrl + F5 Correr proyecto sin modo depuración
F8 Volver a los controles seleccionados un Control de Usuario
Ctrl + Shift + T Crear una anotación para el elemento seleccionado
F6 Cambiar a los espacios de trabajos activos
Ctrl + Shift + R Reestablecer los espacios de trabajo actuales
F12 Mostrar el panel de resultados
F4 Auto ocultar / mostrar todos los paneles
Ctrl + Tab Alternar entre documentos abiertos
Ctrl + . Abrir el panel de “Assets”
Ctrl + N Agregar un nuevo elemento
Alt + Drag Crear una copia del control seleccionado
Space + Drag Arrastra el diseñador
Ctrl + I Agrega un elemento existente
Ctrl + Shift + N Agrega un nuevo proyecto
Ctrl + Shift + O Abre un proyecto o solución existente
Ctrl + W Cerrar documento
Ctrl + Shift + W Cerrar todos los documentos
Ctrl + S Guardar el documento actual
Ctrl + Shift + S Guardar todos los documentos sin guardar
Ctrl + Shift + P Guardar una copia del proyecto como…
Ctrl + Q Salir de Expression Blend

 

Compilación Completa…

Categories: Blend Tags: ,

Tutorial Silverlight 4 – Instalación del Framework MVVM Light

February 1st, 2011 1 comment

Bienvenido de nuevo.

En este video tutorial te explicaré paso a paso el proceso de instalación del Framework MVVM Light. Éste Framework es desarrollado por Laurent Bugnion en Suiza y está enfocado en permitir de un modo simple el desarrollo de aplicación WPF y Silverlight (incluído WP7). El principal enfoque que tiene éste Framework es el de ser amigable con Expression Blend por lo que te permite desarrollar aplicaciones a través de la interfaz gráfica de Blend.

Los temas cubiertos en el video son:

  • Presentación corta del Framework MVVM.
  • Donde encontrar recursos, documentación y los archivos de instalación.
  • Guía paso a paso de la instalación en Visual Studio 2010 y Expression Blend.
  • Creación de un proyecto MVVM Light para probar la instalación del Framework

PARA VER EL VIDEO TUTORIAL VE A: alFador en punto NET

Segunda entrada un pequeño SIG (Servicios web ASP)

January 16th, 2011 No comments

Este es el segundo post de cinco para establecer el uso de varias tecnologías para la implementación de información geográfica asociada a datos. Si quieres ver el primero puedes ir a la entrada de Usar bing maps en Silverlight o puedes comenzar desde aquí descargando hasta aquí .

Descargar código.

Bien antes de comenzar aquí nos iremos a SQL, necesitas crear una tabla de la siguiente manera

Como verás, tengo la tabla Lugares, de la base de datos Lugares (si, ya se, no tengo mucha imaginación, perdón!!), en donde guardaré los registros de cada uno de los elementos que ya tengo en mi interfaz, para eso bríncate a Visual Studio y desde ahí seguirás.
Da click derecho sobre la carpeta de Site de tu proyecto y selecciona “Agregar” y “Nuevo elemento”.

En la ventana auxiliar selecciona la opción de Web Service, en este caso lo llamé Servicio Datos

Hago un pequeño paréntesis para aclarar que este tipo de servicio web es una forma que los desarrolladores de ASP encontrarán muy familiar, además de que su uso es muy extendido dada su antigüedad, pero ahora han sido reemplazados por los maravillosos servicios WCF, esos los verás mas adelante, pero la idea es que seas capaz de usar ambos.

Bien después del breviario, continua con el servicio web, en donde quedará de la siguiente manera

Como puedes ver esto es sencillo, simplemente escribir una función, anteponiendo [WebMethod] para especificar que se trata de un método accesible, igualmente importante es el que el método sea público, también te comento que debes siempre regresar un valor en este tipo de elementos, en este caso la confirmación de que la operación fue realizada por medio de un comando, dentro del método, usamos sentencias base de SQL para poder insertar la información que estamos recibiendo por medio de los parámetros del método, al terminar ejecutamos el proyecto y tendremos una vista así.

Como puedes ver señalé en la imagen la dirección, dado que necesitamos usarla, copia esa dirección y después regresa a Visual Studio, en tu proyecto de desarrollo da click derecho sobre el y escoge la opción de “Agregar referencia de servicio”.

Es en la siguiente ventana en donde deberás copiar la URL que te mencioné en el paso anterior y además ponerle un nombre de referencia, yo lo dejé como Servicio1.

Ya solo hace falta que te vayas al evento click del botón de actualizar de tu interfaz, y escribas el siguiente fragmento de código.

Bien, entonces creas una instancia del cliente SOAP de tu servicio web y por medio de ese objeto mandarás llamar al método web que creaste hace unos pasos así como pasarle los parámetros necesarios, al completar la operación si no hay ningún error simplemente mandas un mensaje de texto diciendo que todo está en orden.

Categories: Blend, Herramientas, Tutoriales Tags:

Un pequeño sistema de información Geográfica

January 15th, 2011 2 comments

Bien, como dije en mi primer post, trabajo para una empresa de tipo geográfico, muchas de las herramientas que usamos ahí son restringidas, pero en mis ratos libres me gusta poder usar herramientas accesibles a todo el mundo, por eso este post puede existir, la serie de artículos consiste en cinco etapas diferentes, quedando de la siguiente manera.

1.- Usar bing maps en Silverlight 4
2.- Implementar un servicio web ASP dentro de mi aplicación Silverlight
3.- Publicar mi aplicación web
4.- Crear un servicio WCF para obtener datos
5.- Consumir el servicio WCF desde Windows Phone 7

Espero sus comentarios en caso de que haya alguna duda.

Categories: Blend, Tutoriales Tags:

Lector de RRS en Silverlight 4

January 12th, 2011 2 comments

En febrero del 2009 Rodrigo Díaz publicó como elaborar un lector de RSS en Silverlight, bueno, pues actualizando un poco las cosas aquí hay una versión que realizé para mi trabajo, en Silverlight 4.
Lo primero que debes hacer será crear un nuevo proyecto (Yo siempre inicio un proyecto Silverlight en Expression Blend para no generar páginas .aspx pues creo que usar html es más factible a ser alojado en cualquier servidor web sin limitarme a una sola tecnología).

Ya que estas en Blend, vamos a añadir tres controles que serán los únicos que realmente utilizarás, un TextBox, un Button y un DataGrid quedando únicamente de la siguiente forma.

Por la parte de la interfaz es lo único que necesitas, ahora sí, nos brincamos a Visual Studio para la parte funcional (antes de seguir con este paso, recomiendo que le establezcas un nombre a cada control).

Ya dentro de Visual Studio, lo primero que harás es crear una clase sencilla para poder organizar de una forma adecuada la información que vas a recibir.

Ya teniendo la clase creada te vas al evento Click del botón que creaste y de ahí partir, primero verifica que exista algo de texto en la caja de texto de dirección, y en caso afirmativo, vas a mandar llamar el método CargarRSS al que después le darás funcionalidad.

Como puedes ver el método está recibiendo un parámetro, en este caso el contenido del texto, así que considerando esto ya le puedes meter funcionalidad a este método, quedando de la siguiente forma

Mandamos llamar a un webClient, ojo, para que este elemento pueda funcionar correctamente, necesitas mandar llamar a la librería System.Net

Ya que no tenemos ningún error, podemos ver uqe hicimos, primero creamos un objeto de tipo WebClient, después creamos un EventHandler para la el método OpenReadCompleted del objeto que recién creaste, por último crea otro objeto de tipo Uri que recibirá el parámetro y que a su vez lo mandará al WebCLient.

Después solo te faltará escribir la funcionalidad del Event Handler, que es la siguiente

En donde verificarás que no exista ningún error al cargar la dirección web, en caso de que si exista, te mandará un mensaje de texto, de lo contrario utilizando el resultado crearás un objeto XMLReader para leerlo y por medio de LINQ crearemos un elemento por cada ítem recibido que al final irá a parar al data grid.

Si eres de los míos y prefieres ver las cosas funcionando para entenderle mejor, aquí está el código.

Lector RSS

Categories: Blend Tags:

Como hacer una galería de imágenes con Silverlight 4

October 24th, 2010 2 comments

En este video tutorial te explicaré como hacer una galería de imágenes con Silverilght 4 desde Blend 4 de una manera sencilla y rápida. Te demostraré como gracias al gran poder del ‘DataBinding’ de Silverlight y a al uso de ‘Behaviors’ y ‘Templating’, hacer una galería no es tan complicado como lo parece ya que no es necesario utilizar el ‘Code Behind’ para manejar eventos y posicionar elementos en pantalla.

Los temas vistos en el video son:

  • Posicionamiento de controles en el área de trabajo.
  • Mostrar datos dinámicos a través de DataBinding.
  • Como mejorar la visualización de estos elementos a través de ‘Templates’.
  • Usar ‘Behaviors’ para animar los elementos mostrados.

PARA VER EL VIDEO TUTORIAL VE A alFador en punto net.

Descarga el código fuente de ejemplo: Galeria Simple de Imágenes en Silverlight 4

Como Crear una guía de Movimiento con Expression Blend

October 5th, 2010 1 comment

En este post mostraré como podemos crear una guía de movimiento ,  la cual será la ruta de movimiento de un objeto en particular.

Ver Demo

Read more…

Categories: Blend Tags: ,

Expression Studio 4 disponible ahora

June 7th, 2010 5 comments

El día de hoy ha sido anunciado y liberado oficialmente la suite Expression Studio 4, de donde podemos destacar Expression Blend 4.  Expression Blend 4 contiene una gran cantidad de características nuevas tales como:

  • Compatibilidad con Visual Studio .NET 2010
  • Soporte para Windows Phone 7
  • PathListBox
  • Nuevos Efectos Visuales (Pixel Shaders)
  • Nuevos Comportamientos
  • Soporte para el patrón de diseño MVVM
  • Mejoras en SketchFlow, como la opción de publicar directamente a una lista en SharePoint y poder ver el feedback de varias personas al mismo tiempo!
  • Etc…

Si son subscriptores, la descarga ya está disponible en MSDN.  Además les recuerdo que la actualización de Expression Studio 3 a Expression Studio 4 es totalmente gratuita.  Lo único que tienen que hacer es instalar la versión Trial de Expression Studio 4 *sobre* su versión licenciada de la v3.

Para mayor información de todas las novedades en el resto de productos de la familia Expression visiten su sitio oficial.

Salu2!

Categories: Blend, Eventos, General Tags: ,