Diplomado de Windows Phone 8

devmasters.com.mx

Mdulo 2: XAML

El Lenguaje XAML

Qu es XAML?
Lenguaje de Marcado acrnimo de eXtensible Application Markup Language Expresa declarativamente las interfaces de usuario en aplicaciones Silverlight 5, WPF, WP7.x, WP8 y Aplicaciones Metro en Windows 8.x El objetivo de XAML es ser un lenguaje de instanciacin de objetos
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Reglas bsicas de XAML

Mismas reglas que en XML
Debe haber un nodo raz Todo elemento debe cerrar Sensible a maysculas y minsculas Hay elementos y subelementos Hay atributos

devmasters.com.mx

Reglas bsicas de XAML

Los elementos instancian un objeto
<Ellipse />

Los atributos cambian las caractersticas los objetos

<Ellipse Width="100" Height="100" />

El anidamiento implica pertenencia

Es un acceso directo para establecer el contenido
<Grid> <Ellipse /> </Grid>
devmasters.com.mx

Reglas bsicas de XAML

A todo elemento le corresponde una clase que la respalda en el API de Silverlight
Ejemplo:
Elemento XAML <Ellipse /> <Rectangle /> <Button /> <ListBox /> <Storyboard />
devmasters.com.mx

Clase System.Windows.Shapes.Ellipse System.Windows.Shapes.Rectangle System.Windows.Controls.Button System.Windows.Controls.ListBox System.Windows.Media.Animation.Storyboard

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Espacios de nombres XML

Usados para organizar lgicamente las clases
http://schemas.microsoft.com/winfx/2006/xaml/presentation
Espacio de nombres base. Abarca varios espacios de nombres CLR

http://schemas.microsoft.com/winfx/2006/xaml
Espacio de nombres del lenguaje XAML

http://schemas.microsoft.com/expression/blend/2008
Espacio de nombres para atributos en tiempo de diseo

devmasters.com.mx

Espacios de nombres XML

Atributo XmlnsDefinition
Mapea un Espacio de nombres CLR con un Espacio de nombres XML Se establece a nivel de ensamblado

devmasters.com.mx

Espacios de nombres XML

El atributo xmlns importa un Espacio de nombres XML para poner a nuestro alcance todos sus miembros incluidos en l
Similar a la setencia using en C# o Imports en VB

De manera opcional, podemos asignar un alias a un Espacio de nombres (xmlns:alias)

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ... />
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Espacios de nombres XML

Podemos establecer el atributo xmlns en cualquier nivel
Sin embargo, la mejor prctica es colocarlo en la raz
UserControl PhoneApplicationPage Etc.

<Grid xmlns:otro="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <otro:Button Width="200" Height="100" Content="Botn" /> </Grid>

devmasters.com.mx

Sintaxis de Subelementos
Todas las propiedades se pueden establecer como subelementos Necesario nicamente cuando el valor de la propiedad es un objeto complejo y no se cuenta con un Convertidor de Tipo
<Rectangle Width="100" Height="100" Fill="Yellow" /> <Rectangle> <Rectangle.Width>100</Rectangle.Width> <Rectangle.Height>100</Rectangle.Height> <Rectangle.Fill>Yellow</Rectangle.Fill> </Rectangle>

devmasters.com.mx

Sintaxis de Contenido
Algunos tipos soportan la sintaxis de contenido
<Border> <Border.Child> <Ellipse /> </Border.Child> </Border>

<Border> <Ellipse /> </Border> <TextBlock>Hola</TextBlock> <Button>Botn</Button>

<TextBlock Text="Hola" /> <Button Content="Botn" />

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Extensiones de Marcado
Clases que permiten al intrprete de XAML el evaluar de manera diferente sus valores
{StaticResource} {Binding} {TemplateBinding} {RelativeSource} {x:Null}

Sintaxis:
<Elemento Propiedad={Extension [Propiedades]}
devmasters.com.mx

/>

Extensiones de Marcado
{StaticResource}
Referencia recursos de un diccionario

{Binding}
Expresa un enlace de datos

{TemplateBinding}
Permite enlazar el valor de una propiedad de una plantilla a un valor concreto de la clase que la implementa

{RelativeSource}
Expresa un enlace de datos ancestral relativo

{x:Null}
Permite asignar como valor un null
devmasters.com.mx

Recursos

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Recursos
Los recursos son una bolsa de propiedades La clase base FrameworkElement implementa la propiedad Resources
Permite guardar cualquier tipo de objeto para reutilizarlo Se identifican por medio de una clave nica (atributo x:Key)
<Grid.Resources> <SolidColorBrush x:Key="Brocha" Color="Red" /> </Grid.Resources>
devmasters.com.mx

Recursos
Se referencian en XAML por medio de la extensin {StaticResource} {StaticResource} puede ser usada en propiedades regulares CLR
<UserControl.Resources> <SolidColorBrush x:Key="Brocha" Color="Red" /> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <Rectangle Width="100" Height="100" Fill="{StaticResource Brocha}" /> </Grid>
devmasters.com.mx

Recursos
Siempre se referenciar al recurso con nivel de visibilidad ms cercano
<UserControl.Resources> <SolidColorBrush x:Key="Brocha" Color="Red" /> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <Grid.Resources> <SolidColorBrush x:Key="Brocha" Color="Blue" /> </Grid.Resources> <Rectangle Width="100" Height="100" Fill="{StaticResource Brocha}" /> </Grid>/
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Recursos
Recursos va cdigo
En cdigo usamos la propiedad Resources para leer o agregar objetos al diccionario de recursos La propiedad Resources es un diccionario de tipo <object,object>
private void Button_Click(object sender, RoutedEventArgs e) { if (this.Resources.Contains("brocha1")) { var brocha = this.Resources["brocha1"] as SolidColorBrush; } this.Resources.Add("numero", 3.1416); }
devmasters.com.mx

Objetos CLR en XAML

Podemos hacer la instancia de cualquier objeto de .NET Es necesario importar el Espacio de nombres usando la siguiente sintaxis:
xmlns:alias="clr-namespace:Espacio de nombres;assembly=Ensamblado"

La clase requiere el constructor pblico sin parmetros

devmasters.com.mx

Objetos CLR en XAML

Ejemplo
namespace PhoneApp1 { public class Persona { public string Nombre { get; set; } public string Pais { get; set; } } }

<UserControl xmlns:local="clr-namespace:PhoneApp1" />

<UserControl.Resources> <local:Persona Nombre="Rodrigo" Pais="Mxico" x:Key="persona1" /> </UserControl.Resources>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Propiedades Adjuntas

Propiedades Adjuntas
Tipo especial de Propiedad Dependiente Notifican al elemento padre que se requiere cierto valor
Si se establece el valor de una propiedad de otro padre, se omitir

Sintaxis en XAML:
<Canvas> <ClasePadre> <ElementoCanvas.Left <Ellipse ClasePadre.Propiedad = "50" /> = "Valor" /> </ClasePadre> </Canvas>
devmasters.com.mx

Propiedades Adjuntas
Propiedades Adjuntas va cdigo
Puedes utilizar los mtodos SetValue() y GetValue() como en cualquier otra Propiedad Dependiente
if ((double)el1.GetValue(Canvas.LeftProperty) == 0) { el1.SetValue(Canvas.LeftProperty, 50); }

Puedes usar los mtodos especficamente pensados para leer o establecer los valores de las Propiedades Adjuntas
Evitan el boxing/unboxing
if (Canvas.GetLeft(el1) == 0) { Canvas.SetLeft(el1, 50); }

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Contenedores

Contenedores
Contenedores visuales Clases que heredan de la clase base Panel
Canvas StackPanel Grid

Otros
Border ScrollViewer
devmasters.com.mx

Canvas
Contenedor bsico de posicionamiento absoluto Propiedades adjuntas:
Left Top ZIndex

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Canvas
Ejemplo
<Canvas Width="600" Height="600" Background="Black"> <Button Width="200" Height="80" Content="Botn" Canvas.Left="20" Canvas.Top="20" /> <Canvas Width="400" Height="400" Background="LightBlue" Canvas.Left="50" Canvas.Top="100"> <Button Width="200" Height="80" Content="Botn" Canvas.Left="20" Canvas.Top="20" /> </Canvas> </Canvas>
devmasters.com.mx

StackPanel
Contenedor para apilar elementos de manera horizontal o vertical til en escenarios donde necesites alinear controles
Ejemplo: una barra de botones, un men, etc.

devmasters.com.mx

StackPanel
Ejemplo:
<StackPanel Background="White" Background="White"> Orientation="Horizontal"> <Ellipse Width="200" <Ellipse Width="200" Height="200" Height="200" Fill="Lime" /> <Ellipse Width="200" Fill="Lime" /> <Ellipse Width="200" Height="200" Height="200" Fill="Orange" /> <Ellipse Width="200" Fill="Orange" /> <Ellipse Width="200" Height="200" Height="200" Fill="Red" /> </StackPanel> Fill="Red" /> </StackPanel>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

10

Diplomado de Windows Phone 8

devmasters.com.mx

Grid
Contenedor de tipo tabla El ms flexible de todos los contenedores
Predeterminado

Permite definir columnas y filas Propiedades adjuntas:

Column Row ColumnSpan RowSpan
devmasters.com.mx

Grid
Propiedades ColumnDefinitions y RowDefinitions
Permiten definir las columnas y filas para el Grid Inherentemente tiene una sola celda
<Grid Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> </Grid>
devmasters.com.mx

Grid
A travs de sus Propiedades Adjuntas se posicionan sus elementos hijos
<Grid Background="White"> ... <Ellipse Width="200" Height="200" Fill="Red" /> <Ellipse Width="200" Height="200" Fill="Blue" Grid.Row="1" Grid.Column="1" /> <Ellipse Width="200" Height="200" Fill="Lime" Grid.Row="1" Grid.Column="0" /> </Grid>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

11

Diplomado de Windows Phone 8

devmasters.com.mx

Grid
Los anchos y altos de las columnas y filas pueden ser de 3 tipos:
Fijo Automtico Proporcional (*)
Predeterminado

devmasters.com.mx

Grid
Tamao fijo
Valor absoluto expresado en pixeles Si el tamao de su contenido se desborda, se cortar
<Grid Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Ellipse Width="200" Height="200" Fill="Red" /> </Grid>
devmasters.com.mx

Grid
Tamao automtico
Crece en funcin de su contenido Expresado con el valor Auto
<Grid Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Ellipse Width="200" Height="200" Fill="Red" /> <Ellipse Width="300" Height="300" Fill="LightBlue" Grid.Column="1" /> </Grid>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

12

Diplomado de Windows Phone 8

devmasters.com.mx

Grid
Tamao proporcional
Factor de proporcin expresado con un nmero y * Es el tamao predeterminado (1*)
<Grid Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Ellipse Width="200" Height="200" Fill="Red" /> <Ellipse Width="300" Height="300" Fill="LightBlue" Grid.Column="1" /> <Ellipse Width="120" Height="120" Fill="Orange" Grid.Column="2" /> <Ellipse Width="120" Height="120" Fill="Black" Grid.Column="3" /> </Grid>

devmasters.com.mx

Border
System.Windows.Controls Dibuja un borde y/o un fondo alrededor de un objeto
<Border BorderThickness="10" BorderBrush="Blue" Background="Yellow" Width="200" Height="100" Padding="10"> <Button Content="Botn" /> </Border>
devmasters.com.mx

Propiedades de Distribucin
Propiedades de Distribucin dinmica para contenedores excepto el Canvas
HorizontalAlignment y VerticalAlignment Margin MaxWidth MaxHeight MinWidth MinHeight
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

13

Diplomado de Windows Phone 8

devmasters.com.mx

Propiedades de Distribucin
HorizontalAlignment y VerticalAlignment
Por default su valor es Stretch
<Grid Background="White"> <Ellipse Fill="Red" /> </Grid>

devmasters.com.mx

Propiedades de Distribucin
Margin
Distancia que tiene el elemento con respecto a sus lados externos Puede ser expresado con un solo valor numrico para los cuatro lados o con la forma:
Izquierda-Arriba-Derecha-Abajo
<Ellipse Fill="Red" Margin="100 20 100 50" />

devmasters.com.mx

Formas bsicas

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

14

Diplomado de Windows Phone 8

devmasters.com.mx

Clase Shape
System.Windows.Shapes Propiedades
Fill Stroke StrokeThickness StrokeDashCap StrokeDashOffSet

devmasters.com.mx

Formas Bsicas
System.Windows.Shapes
Ellipse Rectangle Line Polyline Polygon Path

devmasters.com.mx

Image
System.Windows.Controls Clase para representar una imagen Similar al elemento <img> de HTML Puede tener una fuente absoluta o relativa
<Image Source="WPLogo-small.png" />
<Image Source="http://www.microsoft.com/silverlight/fw/logoSilv erlight.jpg" />
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

15

Diplomado de Windows Phone 8

devmasters.com.mx

TextBlock
System.Windows.Controls Elemento principal para mostrar texto en las aplicaciones XAML Soporta cambiar el tamao de la fuente, el tipo, las decoraciones, alineaciones, etc.

devmasters.com.mx

TextBlock
Run
Permite estilizar partes del texto de un TextBlock

LineBreak
Salto de lnea explcito

devmasters.com.mx

MediaElement
System.Windows.Controls Representa un objeto que contiene audio y/o video Soporta:
Video: WMV, H.264 Audio: AAC, MP3 y WMA

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

16

Diplomado de Windows Phone 8

devmasters.com.mx

MediaElement
Propiedades
AutoPlay NaturalDuration Balance Volume CurrentState

Mtodos
Play() Stop() Pause()

Eventos
MediaOpened MediaEnded MediaFailed

devmasters.com.mx

Brochas

Brochas
SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

17

Diplomado de Windows Phone 8

devmasters.com.mx

VideoBrush
Fuentes:
MediaElement CaptureSource

CaptureSource requiere las siguientes capacidades:

ID_CAP_ISV_CAMERA ID_CAP_MICROPHONE

devmasters.com.mx

Transformaciones y Animaciones

Transformaciones
Modifican un elemento y sus hijos Se aplican en la propiedad UIElement.RenderTransform
ScaleTransform SkewTransform RotateTransform TranslateTransform CompositeTransform
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

18

Diplomado de Windows Phone 8

devmasters.com.mx

Transformaciones
CompositeTransform
Permite aplicar fcilmente un conjunto de transformaciones en XAML o en cdigo
<Button Name="boton1"> <Button.RenderTransform> <CompositeTransform Rotation="45" ScaleX="0.5" ScaleY="0.3" /> </Button.RenderTransform> var ct = new CompositeTransform() { </Button> Rotation = 45, ScaleX = 0.5, ScaleY = 0.3 }; boton1.RenderTransform = ct; devmasters.com.mx

Demo: Transformaciones
Moviendo un elemento de manera tctil

Animaciones

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

19

Diplomado de Windows Phone 8

devmasters.com.mx

Animaciones
Dos categoras principales
Animaciones de Lnea de Tiempo Animaciones por Recuadro

Se deben declarar dentro de un elemento Storyboard El Storyboard debe estar dentro de un Diccionario de Recursos
Tambin pueden ser construidos va cdigo

El Storyboard puede tener una o ms animaciones

Todas iniciarn al mismo tiempo en paralelo
devmasters.com.mx

Animaciones
Animaciones de Lnea de Tiempo (interpoladas)
Se establece un valor de inicio y un valor final, y la interpolacin se har automticamente <Storyboard x:Name="sb1"> Tipos
DoubleAnimation ColorAnimation PointAnimation

<DoubleAnimation From="100" To="200" Duration="00:00:03" Storyboard.TargetName="rec1" Storyboard.TargetProperty="Width" /> </Storyboard>

sb1.Begin();

devmasters.com.mx

Animaciones
Animaciones por recuadro (keyframe)
Permiten definir qu valor deseamos en cierta parte de la lnea de tiempo Tipos
DoubleAnimationUsingKeyFrames ColorAnimationUsingKeyFrames PointAnimationUsingKeyFrames ObjectAnimationUsingKeyFrames

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

20

Diplomado de Windows Phone 8

devmasters.com.mx

Animaciones
Interpolacin de valores
Linear Spline Discrete

devmasters.com.mx

Estilos

Estilos
System.Windows.Style Elementos que nos permiten cambiar un grupo de propiedades Similares a CSS
<Style x:Key="EstiloBotonBase" TargetType="Button"> <Setter Property="Width" Value="200" /> <Setter Property="Height" Value="80" /> <Setter Property="Foreground" Value="Yellow" /> </Style>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

21

Diplomado de Windows Phone 8

devmasters.com.mx

Estilos
Propiedad TargetType
Indica el tipo al cual el estilo puede aplicarse Es polimrfico (ejemplo: ButtonBase vs. Button)
<Style x:Key="EstiloBotonBase" TargetType="ButtonBase"> </Style> <Button Style="{StaticResource EstiloBotonBase}" /> <RadioButton Style="{StaticResource EstiloBotonBase}" /> <HyperlinkButton Style="{StaticResource EstiloBotonBase}" />
devmasters.com.mx

Estilos
Propiedad BasedOn
Permite crear estilos en cascada
<Style x:Key="EstiloBotonBase" TargetType="ButtonBase"> </Style> <Style x:Key="EstiloBoton" BasedOn="{StaticResource EstiloBotonBase}" TargetType="Button"> <Setter Property="Foreground" Value="Blue" /> <Setter Property="FontSize" Value="20" /> </Style>
devmasters.com.mx

Estilos
Estilos Implcitos
No utilizan x:Key Se basan en el TargetType
<Style TargetType="TextBlock"> <Setter Property="FontFamily" Value="Arial Black" /> <Setter Property="FontSize" Value="30" /> <Setter Property="Foreground" Value="White" /> </Style> <TextBlock>Estilo</TextBlock> <TextBlock>Implcito</TextBlock>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

22

Diplomado de Windows Phone 8

devmasters.com.mx

Estilos
Diccionarios Mezclados
Permiten compartir Estilos entre proyectos Los archivos XAML pueden estar en el XAP o en un ensamblado externo
Usa una ruta explcita en la propiedad Source. Ejemplo: /Ensamblado;component/TuDiccionario.xaml
<Application xmlns="..." xmlns:x="..." x:Class="MyApp.App"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="MiDiccionario.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
devmasters.com.mx

XAML Dinmico

XAML dinmico
Todo lo que declaras en XAML puede ser expresado va cdigo
XAML es un lenguaje de instanciacin de objetos A todo elemento de XAML le corresponde una clase en el API

No es ms eficiente que declararlo va XAML Pros:

til en escenarios de interfaces dinmicas

Contras:
Pierdes el Blendability
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

23

Diplomado de Windows Phone 8

devmasters.com.mx

XAML dinmico
<Canvas Background="Black" Width="300" Height="300"> <Button Width="200" Height="100" Content="Nuevo botn" Canvas.Left="100" Canvas.Top="100" /> </Canvas>

this.Loaded += (s, a) => { var canvas = new Canvas() { Width = 300, Height = 300, Background = new SolidColorBrush(Colors.Black) }; var button = new Button() { Width = 200, Height = 100, Content = "Nuevo Botn" }; canvas.Children.Add(button); Canvas.SetLeft(button, 100); Canvas.SetTop(button, 100); this.Content = canvas; };

devmasters.com.mx

XAML dinmico
Clase XamlReader
System.Windows.Markup Permite interpretar una cadena de XAML La cadena requiere un Espacio de Nombres XML
StringBuilder sb = new StringBuilder(); sb.Append(@"<Canvas xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>"); sb.Append(@"<Rectangle Width='100' Height='100' Fill='Red' Name='rec1' />"); sb.Append(@"</Canvas>");

var canvas = XamlReader.Load(sb.ToString()) as FrameworkElement; this.LayoutRoot.Children.Add(canvas);

devmasters.com.mx

XAML dinmico
Clase XamlReader
Si se usa el atributo Name o x:Name se crear un mbito privado a ese rbol
var canvas = XamlReader.Load(sb.ToString()) as FrameworkElement; canvas.FindName("rec1"); // S lo encontrar this.LayoutRoot.Children.Add(canvas); this.LayoutRoot.FindName("rec1"); // No lo encontrar
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

24

Diplomado de Windows Phone 8

devmasters.com.mx

XAML Reusable

XAML reusable
XAML est ligeramente fragmentado
Aplicaciones Metro de Windows 8

WPF

Silverlight 5

Silverlight 4
Windows Phone 7.x Windows Phone 8
devmasters.com.mx

XAML reusable
Estrategias para reutilizacin
Usar Diccionarios de Recursos Mezclados Separar al mximo las preocupaciones (MVVM) Evitar la creacin dinmica de XAML en cdigo Mantener el rbol visual lo ms compacto posible Usar distribuciones dinmicas y evitar las estticas

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

25

Diplomado de Windows Phone 8

devmasters.com.mx

XAML reusable
Windows 8.x Windows Phone 8 Silverlight 5 WPF

XAML reusable

Cdigo compartido
Lgica de Negocio Integracin con la Nube Acceso a Base de Datos
devmasters.com.mx

Enlace de Datos

Enlace de Datos
Destino del Enlace
FrameworkElement
Propiedad Dependiente Objeto de Enlance (Binding)

Fuente del Enlace

Objeto CLR
Propiedad

Convertidor de Valores

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

26

Diplomado de Windows Phone 8

devmasters.com.mx

Enlace de Datos
Modelo robusto
Objeto Fuente
Propiedad en el Objeto Fuente

Control Destino
Propiedad en el Control Destino

Se expresan a travs de la extensin del Markup {Binding}

<TextBlock Text="{Binding Source={StaticResource album1}, Path=Titulo}" />
devmasters.com.mx

Enlace de Datos
Parmetros principales de {Binding}
Source
Indica el Objeto fuente

Path
Indica una ruta a la Propiedad en el Objeto fuente Parmetro predeterminado

Mode
Indica el modo para el Enlace

devmasters.com.mx

Modos de Enlace
OneTime
El enlace se establece y el Objeto fuente y el Control destino no se vuelven a comunicar entre s

OneWay
El enlace se establece y cualquier cambio que suceda en el Objeto fuente le avisar al Control destino Predeterminado

TwoWay
El enlace se establece y cualquier cambio que suceda en el Objeto fuente le avisar al Control destino y viceversa (bi-direccional)
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

27

Diplomado de Windows Phone 8

devmasters.com.mx

Modos de Enlace
Se expresan a travs del atributo Mode <TextBlock Text="{Binding Source={StaticResource disco1}, Path=Titulo, Mode=OneTime}" />

devmasters.com.mx

Demo: Enlace de Datos con un objeto

Interfaces
Los modos OneWay y TwoWay requieren que el Objeto fuente implemente alguna de las Interfaces INotifyPropertyChanged o INotifyCollectionChanged
Implementan un evento el cual es escuchado en la infraestructura de Enlace de Datos INotifyPropertyChanged en objetos individuales, para notificar que una propiedad ha cambiado INotifyCollectionChanged en colecciones, para notificar que la coleccin ha cambiado
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

28

Diplomado de Windows Phone 8

devmasters.com.mx

Interfaces
Ejemplo con INotifyPropertyChanged
public class Album : INotifyPropertyChanged { string titulo; public string Titulo { get { return titulo; } set { titulo = value; if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Titulo")); } } public string Banda { get; set; } public event PropertyChangedEventHandler PropertyChanged; }
devmasters.com.mx

Interfaces
Es recomendable tener un mtodo utilitario en la clase o en una clase base para disparar el evento
void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } string nombre; public string Nombre { get { return nombre; } set { nombre = value; OnPropertyChanged("Nombre"); } }
devmasters.com.mx

Interfaces
Windows Phone 8 soporta el atributo CallerMemberName
Obtiene automticamente el nombre del mtodo o propiedad que llam al mtodo en cuestin Evita el uso de cadenas mgicas difciles de dar mantenimiento Disponible en System.Runtime.CompilerServices

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

29

Diplomado de Windows Phone 8

devmasters.com.mx

Interfaces
CallerMemberName
void OnPropertyChanged([CallerMemberName] string propertyName = null) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); }

string nombre; public string Nombre {

get { return nombre; } set { nombre = value; OnPropertyChanged(); } }

devmasters.com.mx

Interfaces
El cambio se notificar automticamente desde el Objeto fuente hacia el Control destino
private void button1_Click(object sender, RoutedEventArgs e) { //La IU se actualizar automticamente (this.Resources["album1"] as Datos.Album).Titulo = "Let it Be"; }

devmasters.com.mx

Interfaces
Ejemplo con INotifyCollectionChanged
public class Personas : Collection<Persona>, INotifyCollectionChanged { protected override void InsertItem(int index, Persona item) { base.InsertItem(index, item); OnCollectionChanged(NotifyCollectionChangedAction.Add, index, item); } protected override void RemoveItem(int index) { base.RemoveItem(index); OnCollectionChanged(NotifyCollectionChangedAction.Remove, index); } protected override void SetItem(int index, Persona item) { Persona oldItem = this[index]; base.SetItem(index, item); OnCollectionChanged(NotifyCollectionChangedAction.Replace, item, oldItem, index); } public event NotifyCollectionChangedEventHandler CollectionChanged; } devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

30

Diplomado de Windows Phone 8

devmasters.com.mx

Interfaces
NotifyCollectionChangedEventArgs tiene tres constructores
Se ha agregado un elemento en la coleccin Se ha removido un elemento en la coleccin Se ha cambiado un elemento en la coleccin

Generalmente, no es necesario implementar directamente la interfaz INotifyCollectionChanged

Utiliza ObservableCollection<T> para tus colecciones
devmasters.com.mx

ObservableCollection<T>
Coleccin genrica recomendada para escenarios de Enlace de Datos Implementa INotifyPropertyChanged y INotifyCollectionChanged Automticamente actualiza el control de lista al que est enlazada System.Collections.ObjectModel

public class Albumes : ObservableCollection<Album> { . . . }

devmasters.com.mx

Demo: ObservableCollection<T>

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

31

Diplomado de Windows Phone 8

devmasters.com.mx

Contexto de Datos
Propiedad FrameworkElement.DataContext Permite establecer un Objeto como fuente de datos en un control o en un contenedor padre en la jerarqua (inmediato o no) Todos los hijos adquieren el DataContext ms inmediato
<Grid x:Name="LayoutRoot" DataContext="{StaticResource album1}"> <TextBlock FontSize="24" Text="{Binding Path=Titulo, Mode=OneWay}" /> </Grid>
devmasters.com.mx

Contexto de Datos
Se va al elemento padre Checa si tiene DataContext Checa si tiene Source
Inicio
devmasters.com.mx

Contexto de Datos
TextBlock Grid StackPanel CheckBox TextBox
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

32

Diplomado de Windows Phone 8

devmasters.com.mx

Contexto de Datos de diseo

La propiedad adjunta d:DataContext permite establecer un Contexto de Datos en tiempo de diseo
Permite tener Blendability incluso en enlaces que dependen de la interaccin del usuario (ejemplo: SelectedItem en un control de lista)
<StackPanel Grid.Column="2" Margin="5" Background="LightGray" DataContext="{Binding SelectedItem, ElementName=listBox1}" d:DataContext="{Binding Source={StaticResource ViewModel}, Path=Personas.[0]}"> devmasters.com.mx

Demo: Contexto de Datos

Enlace entre Elementos

Silverlight soporta el Enlace entre controles y/o Elementos {Binding} incluye la propiedad ElementName
Indica el nombre del control al que deseas enlazarte

<TextBox Text="{Binding SelectedItem.Nombre, ElementName=dataGrid1} />

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

33

Diplomado de Windows Phone 8

devmasters.com.mx

Demo: Enlace entre Elementos

Parmetro StringFormat
Establece un formato para presentar correctamente las cadenas

<TextBlock Text="{Binding Path=Precio, StringFormat='c'}" />

devmasters.com.mx

Parmetro TargetNullValue
Indica qu se mostrar cuando el valor sea null

<TextBlock Text="{Binding Path=Titulo, TargetNullValue='N/D'}" />

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

34

Diplomado de Windows Phone 8

devmasters.com.mx

Parmetro FallbackValue
Indica qu se mostrar cuando la expresin de Enlace cause un error

<TextBlock Text="{Binding Path=Titulo, FallbackValue='Error'}" />

devmasters.com.mx

Plantillas de Datos

Plantillas de Datos
Expresan el XAML que representa a cada uno de los elementos en un control de lista

<DataTemplate> <StackPanel> <TextBlock Text="{Binding Titulo}" FontWeight="Bold" FontSize="14" /> <TextBlock Text="{Binding Banda}" /> </StackPanel> </DataTemplate>
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

35

Diplomado de Windows Phone 8

devmasters.com.mx

Plantillas de Datos
Se expresan con el elemento DataTemplate
En la propiedad ItemTemplate de los Controles de Lista, en lnea o referenciando un Recurso
<ListBox Name="listBox1" ItemsSource="{Binding}" Margin="50,50,204,50"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Titulo}" FontWeight="Bold" FontSize="14" /> <TextBlock Text="{Binding Banda}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

<ListBox Name="listBox1" ItemsSource="{Binding}" ItemTemplate="{StaticResource AlbumDataTemplate}" />

devmasters.com.mx

Plantillas de Datos
Pueden tener cualquier contenido en XAML
<DataTemplate x:Key="AlbumDataTemplate"> <StackPanel> <TextBlock Text="{Binding Titulo}" FontWeight="Bold" FontSize="14" /> <TextBlock Text="{Binding Banda}" /> <Button Width="60" Height="20" Click="Button_Click">Comprar</Button> </StackPanel> </DataTemplate>
devmasters.com.mx

Plantillas de Datos
La manera ms sencilla es utilizar Blend para la creacin y edicin de Plantillas de Datos

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

36

Diplomado de Windows Phone 8

devmasters.com.mx

Plantillas de Datos
Si estn declaradas en los Recursos, pueden ser reutilizadas entre diferentes controles de lista
<ListBox ItemTemplate="{StaticResource AlbumesDataTemplate}" />

<phone:LongListSelector ItemTemplate="{StaticResource AlbumesDataTemplate}" />

devmasters.com.mx

Demo: Plantillas de Datos

Convertidores de Valor
Clases que implementan la interfaz IValueConverter La interfaz IValueConverter incluye dos mtodos a implementar:
Convert
Mtodo que se ejecuta cuando el valor fluye del Objeto fuente hacia el Control destino

ConvertBack
Mtodo que se ejecuta cuando el valor fluye de regreso: del Control destino hacia el Objeto fuente
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

37

Diplomado de Windows Phone 8

devmasters.com.mx

Convertidores de Valor
Ejemplo:
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { int entrada = (int)value; SolidColorBrush resultado = new SolidColorBrush(Colors.Green); if (entrada < 50) { resultado = new SolidColorBrush(Colors.Red); } return resultado; }
devmasters.com.mx

Convertidores de Valor
Se usan declarndolos en un Diccionario de Recursos e invocndolos a travs del parmetro Converter
<UserControl.Resources> <local:InventarioConverter x:Key="InventarioConverter" /> </UserControl.Resources> <TextBlock Text="{Binding Banda} Foreground="{Binding Inventario, Converter={StaticResource InventarioConverter}}" />
devmasters.com.mx

Convertidores de Valor
De manera opcional, pueden recibir parmetros
Se establecen a travs del atributo ConverterParameter en {Binding}
<TextBlock Text="{Binding Banda}" Foreground="{Binding Inventario, Converter={StaticResource InventarioConverter}, ConverterParameter=255,255,0}" />

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

38

Diplomado de Windows Phone 8

devmasters.com.mx

Demo: Creando Convertidores de Valor

Principio de Blendability
Muchas veces, no podemos darnos cuenta de cmo se vera nuestra Aplicacin

devmasters.com.mx

Principio de Blendability

Habilidad para que nuestra Interfaz de Usuario se vea correctamente en tiempo de diseo
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

39

Diplomado de Windows Phone 8

devmasters.com.mx

Principio de Blendability
La idea es tener datos de ejemplo, que nos ayuden a tener una vista clara de cmo se vera el diseo Propiedad DesignerProperties.IsInDesignTool
System.ComponentModel Indica si el cdigo est ejecutando en tiempo de diseo
if (System.ComponentModel.DesignerProperties.IsInDesignTool) { Add(new Album() { Banda = "The Beatles", Titulo = "Help!" }); Add(new Album() { Banda = "The Beatles", Titulo = "Revolver"}); Add(new Album() { Banda = "The Beatles", Titulo = "For Sale"}); Add(new Album() { Banda = "The Beatles", Titulo = "Abbey Road"}); }
devmasters.com.mx

Principio de Blendability
Con datos de ejemplo, podemos editar las Plantillas de Datos de una manera ms eficiente

devmasters.com.mx

Demo: Blendability

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

40

Diplomado de Windows Phone 8

devmasters.com.mx

Comandos
Son funcionalidad enlazable Clases que implementan la interfaz ICommand Miembros:
Execute: Indica qu accin se realizar CanExecute: Determina si el Comando puede ejecutar CanExecuteChanged: Re-evala el CanExecute

devmasters.com.mx

Comandos
Estn soportados en la familia de clases ButtonBase y en la clase HyperLink
Button CheckBox RadioButton HyperlinkButton ToggleButton RepeatButton Etc.
devmasters.com.mx

Comandos
Utiliza los atributos Command y CommandParameter para enlazar <Button Content="Consultar..." Command="{Binding GetAlbumCommand}" CommandParameter="{Binding Text, ElementName=textBox1}" />

devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

41

Diplomado de Windows Phone 8

devmasters.com.mx

Comandos
Implementacin bsica
public class ConsultaCommand : ICommand { Action action; public ConsultaCommand(Action action) { this.action = action; } public bool CanExecute(object parameter) { return true; } public event EventHandler CanExecuteChanged; public void Execute(object parameter) { action(); } }
devmasters.com.mx

<Button Command="{Binding Path=ConsultaCommand}" Content="Consulta" />

Comandos
Implementaciones existentes recomendadas
Prism 4.1 (clase DelegateCommand) MVVM Light (clase RelayCommand)
public DelegateCommand ConsultaCommand { get; private set; } public ViewModel() { ConsultaCommand = new DelegateCommand(()=> ... ); }

devmasters.com.mx

Demo: Comandos

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

42

Diplomado de Windows Phone 8

devmasters.com.mx

Resumen

Preguntas?

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

43