Entradas con la etiqueta de mezcla

Jugando con Silverlight 3 ... una tarde Caza de huevos de Pascua - revelados!

Acerca de una semana y media atrás me lanzó un reto a la gente para saber lo que la aplicación Silverlight 3 figura a continuación no. dejé caer algunas pistas, pero nadie ha adivinado! yo había esperado un mayor pocas conjeturas, pero c'est la vie , supongo. Mientras tanto, debo cumplir mi parte del trato y revelar los secretos de mi solicitud de misterio, y algunas de las cosas que aprendí mientras que armar.

Para ver la aplicación, debes contar con la Silverlight 3 Beta instalado en su máquina (enlaces de descarga aquí):

Windows:
http://go.microsoft.com/fwlink/?LinkID=143433
Mac:
http://go.microsoft.com/fwlink/?LinkID=143434

Obtener Microsoft Silverlight

En primer lugar, déjame que te enseñe el "visible" parte de mi solicitud. Perdonen mi lenta revelar, pero ayudará a crear un drama, lo prometo!

 x : Name ="LayoutRoot" Background ="White"> < Grid.RowDefinitions > < RowDefinition /> < RowDefinition Height ="Auto" /> </ Grid.RowDefinitions > < Grid DataContext ="{ Binding Source ={ StaticResource SampleDataSource }}"> < dataControls : DataForm CurrentIndex ="{ Binding ElementName =dg, Mode =TwoWay, Path =SelectedIndex}" HorizontalAlignment ="Right" Margin ="0,8,8,223" Width ="267" ItemsSource ="{ Binding Mode =OneWay, Path =Collection}"/> < chartingToolkit : Chart Height ="211" HorizontalAlignment ="Right" Margin ="0,0,8,8" DataContext ="{ Binding Mode =OneWay, Path =Collection}" VerticalAlignment ="Bottom" Width ="267" Title ="Chart Title"> < chartingToolkit : ScatterSeries SelectedItem ="{ Binding ElementName =dg, Mode =TwoWay, Path =SelectedItem}" DependentValuePath ="Y" IndependentValuePath ="X" ItemsSource ="{ Binding Mode =OneWay}" AnimationSequence ="FirstToLast" IsSelectionEnabled ="True"/> </ chartingToolkit : Chart > < data : DataGrid x : Name ="dg" Margin ="8,8,279,223" ItemsSource ="{ Binding Mode =OneWay, Path =Collection}" AutoGenerateColumns ="False"> < data : DataGrid.Columns > < data : DataGridTextColumn Header ="Bar" Binding ="{ Binding Path =Bar}"/> < data : DataGridTextColumn Header ="Bat" Binding ="{ Binding Path =Bat}"/> < data : DataGridTextColumn Header ="Baz" Binding ="{ Binding Path =Baz}"/> < data : DataGridTextColumn Header ="Foo" Binding ="{ Binding Path =Foo}"/> < data : DataGridTextColumn Header ="Title" Binding ="{ Binding Path =Title}"/> < data : DataGridTextColumn Header ="X" Binding ="{ Binding Path =X}"/> < data : DataGridTextColumn Header ="Y" Binding ="{ Binding Path =Y}"/> </ data : DataGrid.Columns > </ data : DataGrid > < controls : Calendar Height ="211" Margin ="8,0,279,8" VerticalAlignment ="Bottom"/> </ Grid > < Button Grid.Row ="1" Content ="Reset" Click ="Button_Click" Margin ="8,0,8,0" Height ="30" /> </ Grid > Grid <x: Nombre = "LayoutRoot" Background = "White"> Grid.RowDefinitions <> <RowDefinition /> Altura RowDefinition <= "Auto" /> </ Grid.RowDefinitions> <DataContext Grid = "(Fuente enlace = (StaticResource SampleDataSource)) "> <DataControls: DataForm CurrentIndex =" (enlace ElementName = dg, Modo = TwoWay, Path = SelectedIndex) "HorizontalAlignment =" derecha "Margen =" 0,8,8,223 "width =" 267 "ItemsSource =" ( Encuadernación Moda = OneWay, Ruta = Colección) "/> chartingToolkit <: el cuadro de height =" 211 "HorizontalAlignment =" derecha "Margen =" 0,0,8,8 "DataContext =" (enlace = Modo OneWay, Path = Colección) "VerticalAlignment =" Bottom "width =" 267 "title =" Título del gráfico "> <chartingToolkit: ScatterSeries SelectedItem =" (enlace ElementName = dg, Modo = TwoWay, Path = SelectedItem) "DependentValuePath =" Y "IndependentValuePath =" X " ItemsSource = "(enlace OneWay Moda =)" AnimationSequence = "FirstToLast" IsSelectionEnabled = "True" /> </ chartingToolkit: el cuadro de> datos <: DataGrid x: Nombre = "dg" Margen = "8,8,279,223" ItemsSource = "( Encuadernación Moda = OneWay, Ruta = Colección) "AutoGenerateColumns =" false "> <datos: DataGrid.Columns <> datos: DataGridTextColumn encabezado =" Bar "Enlazar =" (enlace = Ruta de Abogados) "/> <datos: DataGridTextColumn encabezado = "Bat" Enlazar = "(enlace = murciélago Ruta)" /> <datos: DataGridTextColumn encabezado = "Baz" Enlazar = "(enlace = Camino Baz)" /> <datos: DataGridTextColumn encabezado = "Foo" Enlazar = "(enlace Ruta de acceso = Foo) "/> <datos: DataGridTextColumn encabezado =" Título "Enlazar =" (enlace Ruta = Título) "/> <datos: DataGridTextColumn encabezado =" X "Enlazar =" (enlace Ruta X) = "/> < datos: DataGridTextColumn encabezado = "Y" Enlazar = "(enlace Ruta = Y)" /> </ datos: DataGrid.Columns> </ data: DataGrid> <controles: Calendario height = "211" Margen = "8,0,279, 8 "VerticalAlignment =" Abajo "/> </ Grid> Botón Grid.Row <=" 1 "Content =" Reset "Haga clic =" Button_Click "Margen =" 8,0,8,0 "height =" 30 "/> </> Cuadrícula 

Y esto es todo. El XAML es bastante simple - usa algunos de los controles de Silverlight SDK (DataForm, DataGrid, y calendario), así como el control del juego de herramientas para gráficos. Unas cuantas personas en los comentarios del post original comentó sobre el comportamiento de los controles. Un poco de diversión cosas a destacar: el Gráfico, DataGrid y DataForm están unidos a la misma colección. Además, su SelectedItems están unidas entre sí también. El resultado es que el cambio de un valor en el DataGrid o DataForm se moverá en la tabla y actualizar su valor en los demás controles. Todas las cosas interesantes, aunque lo puse en la aplicación para que pierdas el!

Se dará cuenta de que he usado ElementName vinculante - nuevo en SL3 (importado de WPF XAML) para llevar a cabo todos los de este comportamiento. Con ElementName vinculante y muchas de las características de Silverlight otros nuevos, usted puede hacer realmente ricos, aplicaciones dinámicas con muy poco código . Y con las nuevas características de la mezcla de 3 vista preliminar, la construcción de esta aplicación era más fácil que nunca. La nueva muestra de datos en función de Blend 3 es ideal para prototipos:

Blend 3's Sample Data feature makes prototyping easy!

Con la función de datos de ejemplo, puede definir un origen de datos (como lo hice anteriormente) y agregar campos que son simples (cadenas, enteros, etc), objetos complejos (en la que podrá añadir otros ámbitos "), o colecciones. Mezcla generará datos de la muestra que van desde Lorem Ipsum de texto a números al azar. A continuación, puede vincular a su interfaz de usuario para estos datos de ejemplo y utilizar el enlace de interfaz de usuario en Blend para crear tus fijaciones:

Editing bindings in Blend 3 is easy!

Una vez más, muy buen material. Blend 3 y Silverlight 3 hacen que sea muy fácil de construir rica interfaz de usuario para su aplicación y hacerlo rápidamente. En definitiva, la creación de esta pieza de la solicitud de misterio con Blend 3 no me llevó más de una hora, y la única razón que entiende que de ello es que pasé algún tiempo jugando con algunas de las características de mezcla y el control de cuadro!

Ok, ok, estoy estancamiento, lo sé ...

Supongo que es hora de que me revelan lo que el verdadero huevo de Pascua es. "Todos los que Silverlight 3 y Blend 3 cosas es grande ...", estoy seguro de que usted está diciendo ", pero llegar al secreto ya!"

En primer lugar, permítanme esbozar las pistas que di:

  • Le señaló gizmodo.com - un artículo que apareció el día de la entrada. Esa mañana, un poco de diversión artículo acerca de un huevo de Pascua en un popular sitio de redes sociales apareció.
  • En los comentarios, he señalado que la funcionalidad de tipo empresarial era demasiado grave de una conjetura!
  • El botón Reset realmente hace algo.

En verdad, en realidad sólo el primer indicio que le dará una idea de qué hacer con esta aplicación. Sin tener una mirada allí, no era probable que averiguar qué hacer con mi solicitud.

Así que, si todavía no lo ha averiguado de mis revelaciones anteriores, el huevo de pascua en mi solicitud es que el Código Konami hace un secreto de mensajes especiales-super aparecen! Pensé que si es lo suficientemente bueno para Facebook, es lo suficientemente bueno para mí ! Esto es lo que debe hacer:

Haga clic en la aplicación para dar el foco. Vistas las siguientes claves:

Arriba, Arriba, Abajo, Abajo, Izquierda, Derecha, Izquierda, Derecha, B, A

Y observar!

"UberCool!" shown in the Mystery Application

Y fiel a su estilo, el botón Reset se ocultaba el mensaje y le permitirá volver a introducir el código.

Al habilitar esta funcionalidad resulta ser bastante simple. A los efectos de esta solicitud misterio, he creado un control KonamiCode que simplemente cambia su estado visual una vez que el código se introduce. Su plantilla utiliza las funciones de facilitar nuevos (muy fácil de configurar en un transición de estado visual en Blend 3) en Silverlight para animar la rotación del mensaje "secreto". El control es un ContentControl KonamiCode y la escucha de pulsaciones de teclas en su contenido. Para patadas, hice el trabajo de control de manera más general, lo que permite un desarrollador para especificar las pulsaciones de teclas que activará el cambio de estado visual. Quién sabe, tal vez alguien encontrará algo más útil que ver con eso!

Con el control KonamiCode, usted también puede agregar el código Konami huevo de Pascua a su Silverlight 3 aplicaciones! Es tan simple como envolver la interfaz de usuario en el control, así:

 : KonamiCodeControl x : Name ="kcc"> < Grid x : Name ="LayoutRoot" Background ="White"> < Grid.RowDefinitions > < RowDefinition /> < RowDefinition Height ="Auto" /> </ Grid.RowDefinitions > < Grid DataContext ="{ Binding Source ={ StaticResource SampleDataSource }}"> < dataControls : DataForm CurrentIndex ="{ Binding ElementName =dg, Mode =TwoWay, Path =SelectedIndex}" HorizontalAlignment ="Right" Margin ="0,8,8,223" Width ="267" ItemsSource ="{ Binding Mode =OneWay, Path =Collection}"/> < chartingToolkit : Chart Height ="211" HorizontalAlignment ="Right" Margin ="0,0,8,8" DataContext ="{ Binding Mode =OneWay, Path =Collection}" VerticalAlignment ="Bottom" Width ="267" Title ="Chart Title"> < chartingToolkit : ScatterSeries SelectedItem ="{ Binding ElementName =dg, Mode =TwoWay, Path =SelectedItem}" DependentValuePath ="Y" IndependentValuePath ="X" ItemsSource ="{ Binding Mode =OneWay}" AnimationSequence ="FirstToLast" IsSelectionEnabled ="True"/> </ chartingToolkit : Chart > < data : DataGrid x : Name ="dg" Margin ="8,8,279,223" ItemsSource ="{ Binding Mode =OneWay, Path =Collection}" AutoGenerateColumns ="False"> < data : DataGrid.Columns > < data : DataGridTextColumn Header ="Bar" Binding ="{ Binding Path =Bar}"/> < data : DataGridTextColumn Header ="Bat" Binding ="{ Binding Path =Bat}"/> < data : DataGridTextColumn Header ="Baz" Binding ="{ Binding Path =Baz}"/> < data : DataGridTextColumn Header ="Foo" Binding ="{ Binding Path =Foo}"/> < data : DataGridTextColumn Header ="Title" Binding ="{ Binding Path =Title}"/> < data : DataGridTextColumn Header ="X" Binding ="{ Binding Path =X}"/> < data : DataGridTextColumn Header ="Y" Binding ="{ Binding Path =Y}"/> </ data : DataGrid.Columns > </ data : DataGrid > < controls : Calendar Height ="211" Margin ="8,0,279,8" VerticalAlignment ="Bottom"/> </ Grid > < Button Grid.Row ="1" Content ="Reset" Click ="Button_Click" Margin ="8,0,8,0" Height ="30" /> </ Grid > </ KonamiCode : KonamiCodeControl > <KonamiCode: KonamiCodeControl x: Nombre = "kcc"> Cuadrícula <x: Nombre = "LayoutRoot" Background = "White"> Grid.RowDefinitions <> <RowDefinition /> Altura RowDefinition <= "Auto" /> </ Grid.RowDefinitions > <Grid DataContext = "(enlace Fuente = ()) StaticResource SampleDataSource"> <DataControls: DataForm CurrentIndex = "(enlace ElementName = dg, Modo = TwoWay, Path = SelectedIndex)" HorizontalAlignment = "derecha" Margen = "0,8 , 8223 "width =" 267 "ItemsSource =" (enlace = Modo OneWay, Ruta = Colección) "/> <chartingToolkit: el cuadro de height =" 211 "HorizontalAlignment =" derecha "Margen =" 0,0,8,8 "DataContext = "(enlace = Modo OneWay, Path = Colección)" VerticalAlignment = "Bottom" width = "267" title = "Título del gráfico"> <chartingToolkit: ScatterSeries SelectedItem = "(enlace ElementName = dg, Modo = TwoWay, Path = SelectedItem ) "DependentValuePath =" Y "IndependentValuePath =" X "ItemsSource =" (enlace OneWay Moda =) "AnimationSequence =" FirstToLast "IsSelectionEnabled =" True "/> </ chartingToolkit: Gráfico> <datos: DataGrid x: Nombre =" dg "Margen =" 8,8,279,223 "ItemsSource =" (enlace = Modo OneWay, Path = Colección) "AutoGenerateColumns =" false "> <datos: DataGrid.Columns <> datos: DataGridTextColumn encabezado =" Bar "Enlazar =" (enlace Ruta = Barra) "/> <datos: DataGridTextColumn encabezado =" Bat "Enlace =" (enlace = murciélago Ruta) "/> <datos: DataGridTextColumn encabezado =" Baz "Enlace =" (enlace = Camino Baz) "/> datos < : DataGridTextColumn encabezado = "Foo" Enlazar = "(enlace Ruta = Foo)" /> <datos: DataGridTextColumn encabezado = "Título" Enlazar = "(enlace Ruta = Título)" /> <datos: DataGridTextColumn encabezado = "X" Enlace = "(enlace Ruta X) =" /> <datos: DataGridTextColumn encabezado = "Y" Enlazar = "(enlace Ruta = Y)" /> </ datos: DataGrid.Columns> </ data: DataGrid <controles>: Calendario height = "211" Margen = "8,0,279,8" VerticalAlignment = "Abajo" /> </ Grid> Botón Grid.Row <= "1" Content = "Reset" Haga clic = "Button_Click" Margen = "8,0 , 8,0 "height =" 30 "/> </> Cuadrícula / KonamiCode:> KonamiCodeControl 

Anyhoo, aquí está el código. Usted puede descargar sólo el control o el código fuente completo para la aplicación Misterio:

Disfrute y déjame saber lo que piensas! Incluso las aplicaciones RIA se merecen tener un poco de diversión, y espero que esto trae minuto incontables horas de entretenimiento a la gente leyendo mi blog! :)

ACTUALIZACIÓN: 05/19/2009 - 12:52 AM. Ok, justo después de publicada la presente, lo siguiente apareció en mi cuenta de administración de WordPress. Tan perfecto:

WP-Konami WordPress plugin

Además, este plugin me dirigió a este sitio: http://konamicodesites.com/

Voy a tener que estar en la lista!

PD Mi colega, un compañero de trabajo, y su colega PM Scott Morrison acaba de regresar de TechEd 2009 y publicado algunos de los grandes de Silverlight 3 y. NET RIA contenido de Servicios que demos allí. Échale un vistazo!

: 11/07/2009 21:48 - Muestras de actualización de actualización para Silverlight 3!

, , , ,

9 Comentarios