Posts Tagged Blend

Herumspielen mit Silverlight 3 ... eine späte Ostereiersuche - Revealed!

Etwa eine Woche und einen halben Tag ausgestellt ich eine Herausforderung für Leute, um herauszufinden, was die Silverlight 3 Anwendung unten tut. Ich ließ ein paar Hinweise, aber niemand ahnen es! Ich hatte gehofft Vermutungen für ein paar mehr, aber c'est la vie , nehme ich an. In der Zwischenzeit sollte ich meinen Teil der Abmachung zu erfüllen, und enthüllen die Geheimnisse meines Geheimnisses Anwendung, und einige der Dinge habe ich gelernt, während sie zusammen setzen.

Um die app, brauchen Sie die Silverlight 3 Beta auf Ihrem Rechner installiert (Download-Links hier):

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

Get Microsoft Silverlight

Zunächst lassen Sie mich Ihnen die "sichtbare" Teil meiner Bewerbung. Verzeihen Sie meine langsame verraten, aber es wird helfen, Drama, das verspreche ich!

 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: 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-Titel "> <chartingToolkit: ScatterSeries SelectedItem =" (Binding ElementName = dg, Mode = TwoWay, Path = SelectedItem) "DependentValuePath =" Y "IndependentValuePath =" X " ItemsSource = "(Binding) OneWay Mode =" AnimationSequence = "FirstToLast" IsSelectionEnabled = "true" /> </ chartingToolkit: Chart> <Daten: DataGrid x: Name = "GD" Margin = "8,8,279,223" ItemsSource = "( Binding Mode = OneWay, Path = Collection) "AutoGenerateColumns =" false "> <Daten: DataGrid.Columns> <Daten: DataGridTextColumn Header =" Bar "Binding =" (Binding Path = bar) "/> <Daten: DataGridTextColumn Header = "Bat" Binding = "(Binding Path = Bat)" /> <Daten: DataGridTextColumn Header = "Baz" Binding = "(Binding Path = Baz)" /> <Daten: DataGridTextColumn Header = "Foo" Binding = "(Binding Path = Foo) "/> <Daten: DataGridTextColumn Header =" Titel "Binding =" (Binding Path = Title) "/> <Daten: DataGridTextColumn Header =" X "Binding =" (Binding Path = X) "/> < Daten: DataGridTextColumn Header = "Y" Binding = "(Binding Path = Y)" /> </ data: DataGrid.Columns> </ data: DataGrid> <Kontrollen: Kalender 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> 

So kann es losgehen. Die XAML ist ziemlich einfach - es nutzt einige der Silverlight SDK Kontrollen (DataForm, DataGrid, und Kalender) sowie die Toolkit's Chart Kontrolle. Ein paar Leute in den Kommentaren des ursprünglichen Beitrags bemerkte auf das Verhalten der die Kontrollen hier. Einige lustige Dinge zu bemerken: der Chart, DataGrid, und DataForm sind alle mit der gleichen Kollektion gebunden. Darüber hinaus sind ihre SelectedItems alle zusammen als auch gebunden. Die Folge ist, dass die Änderung eines Wertes in der DataGrid oder DataForm wird bewegen es in der Tabelle und aktualisieren Sie ihren Wert in den anderen Steuerelementen. Alle coolen Sachen, obwohl ich es in den App Sie abzuwerfen!

Sie werden bemerken, dass ich ElementName Bindung verwendet - in neue SL3 (von WPF XAML) importiert, um alle für dieses Verhalten zu erreichen. Mit ElementName verbindlich und viele andere neue Features Silverlight, können Sie wirklich reich, dynamische Anwendungen mit sehr wenig Code . Und mit den neuen Features in der Blend 3 Preview, Bau dieses app war einfacher als je zuvor. Die neue Sample-Data-Funktion in Blend 3 ist für das Prototyping groß:

Blend 3's Sample Data feature makes prototyping easy!

Mit dem Sample Data-Funktion können Sie eine Datenquelle definieren (wie ich oben schon) und Hinzufügen von Feldern, die einfach sind (Streicher, ints, etc.), komplexe (Objekte, auf denen Sie weitere Felder hinzugefügt werden können "), oder Sammlungen. Blend wird von Sample-Daten bis hin zu generieren Lorem ipsum Text Zufallszahlen. Sie können dann binden Sie Ihre Benutzeroberfläche, um dieses Beispiel Daten und nutzen die verbindliche UI in Blend, um Ihre Bindungen:

Editing bindings in Blend 3 is easy!

Wieder sehr coole Sachen. Blend 3 und Silverlight 3 macht es sehr einfach zu reich UI für Ihre Anwendung zu bauen und tun es schnell. Alles in allem, Bau dieses Stück des Geheimnisses Anwendung mit Blend 3 hat mich nicht mehr als eine Stunde, und der einzige Grund, es dauerte so lange, dass ich einige Zeit spielte er mit einigen der Funktionen und der Blend Chart Kontrolle!

Ok, ok, ich bin ins Stocken geraten, ich weiß ...

Ich denke, es ist Zeit für mich zu offenbaren, was die wirklichen Easter Egg ist. "All das Silverlight 3 und Blend 3 stuff groß ist ..." Ich bin sicher, du sagst, "aber erhalten, um das Geheimnis schon!"

Zunächst lassen Sie mich die Andeutungen gab ich:

  • Ich zeigte Ihnen, gizmodo.com - ein Artikel erschienen, die Post der Tag des. An diesem Morgen, ein wenig Spaß Artikel über ein Easter Egg auf einer populären Social-Networking-Website erschienen.
  • In den Kommentaren habe ich darauf hingewiesen, dass die Business-ähnliche Funktionalität zu ernst, der eine Vermutung war!
  • Die Reset-Taste tatsächlich etwas tut.

In Wahrheit, eigentlich nur der erste Hinweis geben würde und Sie wissen, was mit dieser Anwendung zu tun. Ohne einen Blick gibt, waren Sie wahrscheinlich nicht, um herauszufinden, was mit meiner Bewerbung zu tun.

Also, wenn Sie schon nicht herausgefunden aus meiner Enthüllungen über die Oster-Ei in meiner Bewerbung ist, dass die Konami Code macht einen super-geheimen Spezialeinheit Meldung angezeigt! Ich dachte mir, wenn sie Facebook ist gut genug für, es ist gut genug für mich ! Hier ist was Sie tun müssen:

Klicken Sie auf die Anwendung zu geben, sie zu konzentrieren. Hit die folgenden Schlüssel:

Up, Up, Down, Down, Left, Right, Left, Right, B, A

Und beachten!

"UberCool!" shown in the Mystery Application

Und treu, die Reset-Taste wird die Nachricht versteckt und lassen Sie sich zu geben Sie den Code.

Durch die Aktivierung dieser Funktion erweist sich als ziemlich einfach. Für die Zwecke der Anwendung dieses Geheimnis, habe ich ein KonamiCode Steuerung, die einfach ändert seine visuellen Zustand , nachdem der Code eingegeben wird. Die Vorlage verwendet den neuen Funktionen erleichtert (sehr einfach einzurichten in einer Visual State-Transition in Blend 3) in Silverlight, um die Rotation der "geheime Botschaft zu animieren." KonamiCode Die Steuerung ist ein ContentControl, und wartet auf Tastendruck über dessen Inhalt. spaßeshalber, habe ich die Kontrolle der Arbeit im Allgemeinen, so dass ein Entwickler die Tastenanschläge, dass der optische Zustand ändern auslösen angeben. Wer weiß, vielleicht jemanden finden, das viel nützlicher zu tun!

Mit dem KonamiCode Kontrolle, können auch Sie das Konami Code Easter Egg auf Ihre Silverlight 3 Anwendungen hinzuzufügen! Es ist so einfach wie Umhüllung Ihre UI in der Kontrollgruppe, etwa so:

 : 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: 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 , 8223 "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-Titel"> <chartingToolkit: ScatterSeries SelectedItem = "(Binding ElementName = dg, Mode = TwoWay, Path = SelectedItem ) "DependentValuePath =" Y "IndependentValuePath =" X "ItemsSource =" (Binding) OneWay Mode = "AnimationSequence =" FirstToLast "IsSelectionEnabled =" true "/> </ chartingToolkit: Chart> <Daten: DataGrid x: Name =" dg "Margin =" 8,8,279,223 "ItemsSource =" (Binding Mode = OneWay, Path = Collection) "AutoGenerateColumns =" false "> <Daten: DataGrid.Columns> <Daten: DataGridTextColumn Header =" Bar "Binding =" (Binding Path = bar) "/> <Daten: DataGridTextColumn Header =" Bat "Binding =" (Binding Path = Bat) "/> <Daten: DataGridTextColumn Header =" Baz "Binding =" (Binding Path = Baz) "/> <Daten : DataGridTextColumn Header = "Foo" Binding = "(Binding Path = Foo)" /> <Daten: DataGridTextColumn Header = "Titel" Binding = "(Binding Path = Title)" /> <Daten: DataGridTextColumn Header = "X" Binding = "(Binding Path = X)" /> <Daten: DataGridTextColumn Header = "Y" Binding = "(Binding Path = Y)" /> </ data: DataGrid.Columns> </ data: DataGrid> <Kontrollen: Kalender 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> 

Anyhoo, hier ist der Code. Sie können entweder nur die Kontrolle oder die vollständige Quelle für die Mystery-Anwendung herunterladen:

Viel Spaß! Und lassen Sie mich wissen, was Sie! Glaube sogar RIA apps verdienen, um Spaß zu haben, ein wenig, und ich hoffe, das bringt unzählige Stunden Minuten Unterhaltung auf Leute mein Blog lesen! :)

UPDATE: 2009.05.19 - 00.52 Uhr. Ok, kurz nachdem ich gepostet, erschien der folgende auf meinem WordPress Admin Dashboard. So perfekt:

WP-Konami WordPress plugin

Darüber hinaus richtet das Plugin mich zu dieser Site: http://konamicodesites.com/

Ich muss aufgelistet zu bekommen!

PS Mein Kollege, Mitarbeiter, Kollegen und PM Scott Morrison gerade zurückgekehrt aus TechEd 2009 veröffentlicht und einige der großen Silverlight 3 und. NET RIA Services Inhalt , dass er dort vorgeführt. Check it out!

Update: 7/11/2009 09.48 - Proben für Silverlight 3 aktualisiert!

, , , ,

9 Kommentare