WPF/E - kodsnippets från MS Live och ett gäng bra resurser

Artikel
04/10/2007

Under MS Live visade vi flera exempel på olika WPF/e-applikationer. En av dessa visade hur WPF/e och ASP.NET AJAX kan kombineras i form av en skivalbum-söktjänst. Applikationen heter "Album Viewer" och är skapad av en amerikansk Microsoft MVP som heter Dan Wahlin. Det här är en mycket tacksam applikation att köra demos med eftersom den både innehåller flera intressanta tekniker och dessutom är grafiskt intressant . Men den är även mycket snyggt uppdelad i lager och skulle enkelt kunna göras till en flerskiktad lösning (till skillnad från många andra demo-appar) - med Business, Data och Model-lager. Du hittar källkoden för denna och en beskrivning på Dan's blog: https://weblogs.asp.net/dwahlin/archive/2007/02/23/wpf-e-and-asp-net-ajax-albumviewer-application-now-live.aspx (Dan har t.o.m. spelat in en liten demo-film som visar hur applikationen är uppbyggd).

En teknik som Dan's applikation använder sig av och som jag också visade ytterligare exempel på var möjligheten att hämta nya WPF/E-objekt i form av XAML-fragment från servern och sedan dynamiskt lägga till dessa objekt på rätt ställe i objektshierarkin med hjälp av CreateFromXaml-metoden. CreateFromXaml är väldigt straightforward att använda, du skapar eller hämtar helt enkelt ett XAML-fragment och lägger till det som en "child" till det objekt du vill (exempel i Javascript nedan):

// Få tag på WPF/E-kontrollen - root Canvas i detta fall

var control = document.getElementById("WpfeControl");

// Definiera ett XAML-fragment.

var xamlFragment = '<TextBlock Canvas.Top="200" Text="Det här är en ny text" />';

var textblock = control.createFromXaml(xamlFragment);

// Lägg till XAML-fragment till root Canvas

control.children.add(textblock);

I mitt exempel använde jag även WPF/E:s inbyggda Downloader-objekt för att hämta själva XAML-innehållet från servern (I Dan's exempel används ASP.NET AJAX för själva hämtningen). Downloader-objektet är modellerat efter XMLHTTRequest så det påminner mycket om hur man använder det:

// Skapa referens till WPF/E control.

var control = sender.getHost();

// Skapa downloader objekt.

var downloader = control.createObject("downloader");

// Lägg till eventhandlers för DownloadProgressChanged och Completed-event.

// (använde inte progresschanged i detta fall

// downloader.downloadProgressChanged = "javascript:onDownloadProgressChanged";

downloader.completed = "javascript:onCompleted";

// intitialisera downloadobjekt.

downloader.open("GET", "nickelodeon.xaml", true);

// Exekvera request.

downloader.send();

I min onCompleted så plockade jag sedan resultatet i form av ett XmlFragment (en canvas med ett nytt utseende på videospelare i mitt fall) ur sender.Response och satte sedan in på rätt ställe:

// Eventhandler för Completed.

function onCompleted(sender, eventArgs)

{

// hämta download XAML

var xamlFragment = sender.responseText;

// hämta id på WPF/E control

var control = sender.getHost();

var newCanvas = control.CreateFromXaml(xamlFragment);

var root = control.findName("root");

root.children.clear();

var canvas = control.findName("canvas");

root.children.add(newCanvas);

}

En intressant effekt som jag demade var hur du kan stacka flera olika lager av XAML-objekt ovanpå varandra för att t.ex. lägga en videospelare ovanpå en halvtransparant rektangel som innehåller ytterligare en videospelare:

Så här ser XAML-koden ut för ovanstående effekt:

<Canvas xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>

Glöm inte stänga av ljudet på den en mediaspelaren (IsMuted=true) om du ska använda den effekten, eftersom även ljudet dubbleras annars!

Lite blandade bra WPF/E- och XAML-resurser:

På Channel9:s "playground" finns alla samples från Feb SDK:n och ett par till tillgängliga: https://channel9.msdn.com/playground/wpfe/

Michael Swanson har gjort ett riktigt smidigt litet program som konverterar befintliga Flash-filer till XAML: https://www.mikeswanson.com/SWF2XAML/

Han har även skapat en plug-in till Illustrator som exporterar till XAML: https://www.mikeswanson.com/XAMLExport/

OCH han har även gjort en fantastiskt bra sammanställning över olika WPF/XAML/WPF/e-resurser: https://blogs.msdn.com/mswanson/articles/WPFToolsAndControls.aspx

Några olika alternativa XAML-editorer: https://rrelyea.spaces.live.com/blog/cns!167AD7A5AB58D5FE!1695.entry ( den mest intressanta, förutom den som följer med Windows SDK:n, är kanske Mike Harsh webbaserade wpfepad där man direkt i en WPF/e applikation kan editera XAML: https://www.simplegeek.com/mharsh/wpfepad/ )

På Wynapse.com finns ett gäng coola WPF/e-exempel: https://www.wynapse.com/WPFE.aspx

Delen via

WPF/E - kodsnippets från MS Live och ett gäng bra resurser

Aanvullende resources