Jag installerade Silverlight 3, javisst lite sent kanske, men nu är det gjort.

Vart tog min Designer Preview vägen???

Är det tänkt att man ska koda XAML i blindo och behöva köra igång projektet för att se om man tänkte rätt med kolumner, rader, färger och annat som kan vara lite lurigt att få till???

Nejdå, här är lösningen:

http://weblogs.asp.net/hpreishuber/archive/2009/07/18/silverlight-3-visual-studio-2008-designer-preview.aspx

Och för er som hellre vill läsa om det på svenska:

1. Sätt markören strax under den horisontella scrollbaren så att du får en dubbelriktad pil (uppåt och neråt).
2. Håll ner musknappen och dra uppåt.
3. Nu kommer vår Designer Preview fram, bara att ladda om den och titta igen!

Tyvärr så försvinner den igen om du stänger filen och om man öppnar filen igen så visas inget i designern...

Inte helt optimalt, men bättre än ingenting!

Vi får hoppas på en Service Pack...

Nu när alla semestrar är slut och höstmörkret faller så är det dags att börja testa nya sätt att koda Silverlight igen.

Då jag kollade på lite exempelkod på MSDN så snubblade jag över följande SampleBrowser som kan vara bra att känna till om man vill koda nåt man inte provat tidigare.

http://samples.msdn.microsoft.com/Silverlight/SampleBrowser

/Lars

Eftersom alla service-anrop i Silverlight måste göras ansynkrona behöver de kunna testas.
Men eftersom de är asynkrona så går det inte på ett vanligt sätt, utan det behövs lite extra.
Hemligheten ligger i ett attribut som heter [Asynchronous].
Dessutom måste testklassen ärva från SilverlightTest
Testen som markeras som asynkron får inte sitt testresultat förrens metoden EnqueueTestComplete anropas. 

Exempel:

Ha en bra sommar

/Lars

Tänkte att så här inför semestertider tipsa om enhetstestning av Silverlight-sidor.

http://code.msdn.microsoft.com/silverlightut/

 Här kommer en liten introduktion till hur man kan enhetstesta en Silverlight applikation:

1. Ladda ner binärerna för Silverlight Unit Testing Framework här: http://code.msdn.microsoft.com/silverlightut/Release/ProjectReleases.aspx?ReleaseId=2913
2. Spara DLL:erna på ett bra ställe där de är lätta att hitta från referensdialogen.
3. Lägg till ett nytt Silverlight projekt, kalla det t.ex. "Test"
4. Lägg till följande två referenser till projektet "Test":
   Microsoft.Silverlight.Testing.dll
   Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll
5. Ta bort filen Page.xaml
6. Ändra på vad som tilldelas RootVisual i App.xaml.cs till UnitTestSystem.CreateTestPage:
   this.RootVisual = UnitTestSystem.CreateTestPage();
7. Skapa en klass som kallas "ClientTest", för att det testar själva klienten
8. Lägg till följande using statements:
   using Microsoft.VisualStudio.TestTools.UnitTesting;
   using Microsoft.Silverlight.Testing;
   till klassen "ClientTest".
9. Lägg till ett till using statement:
   using UnitTestingSample;
   (om ditt testprojekt heter något annat så byt namn)
10. Märk klassen ClientTest med [TestClass]
11. Se till att klassen "ClientTest" ärver från klassen "SilverlightTest" enligt:
    "public class ClientTest: SilverlightTest"
12. Skapa en privat variabel för Silverlight-applikationens klass som brukar heta Page:
    private Page TestPage;
13. Lägg till en metod som initierar silverlight-sidan och visar upp den på Testpanelen så att den går att testa:
    [TestInitialize]
    public void PrepareTest()
    {
         TestPage = new Page();
         TestPanel.Children.Add(TestPage);
     }
14. Lägg sedan till en test:
    [TestMethod]
    public void TestExample()
    {
         Assert.IsTrue(true);
    }
15. Markera projektet "Test" som "StartUp Project"
16. Kör och din browser kommer att visa vilka tester som körts och hur det gick.
17. Lägg till riktiga tester som testar all logik som din Silverlight-applikation innehåller så att du får allt testat

TIPS: För att du ska kunna komma åt interna variabler och metoder i de projekt som du vill testa så skriv in följande i AssemblyInfo.cs under Properties i det projekt som ska testas:
[assembly: InternalsVisibleTo("Test")]
Det gör att från projektet Test kommer man åt alla interna variabler och metoder.

Jag har lagt till en ZIP-fil med en solution som innehåller en Silverlight-sida som enhets-testas enlight ovan.

/Lars

 UnitTestingSample.zip (734,50 kb)

Har ni provat DeepZoomComposer?

Det har jag och det är inte så svårt att få till ett fotoalbum, importera bilder, sprid ut bilderna och exportera till t.ex. ett Silverlight-projekt.

Starta VS och kör projektet och vips så har du ett interaktivt fotoalbum.

Jag funderade sedan vidare ihop med Andreas om vi inte kunde göra ett Fotoalbum med flera album, ungefär som man har sina bilder i kataloger...

Det som behövdes var då ett sätt att autogenerera DeepZoom-filerna.

Efter en hel del googlande så fanns svaret rätt nära, nämligen som en DLL bland filerna i DeepZoomComposer-katalogen (DeepZoomTools.DLL).

Det fanns inte nån direkt hjälp om hur man göra så det var det bara att börja testa sig fram...

Referera DLL:en, hittade att namespacet var Microsoft.DeepZoomTools och där fanns lite trevliga klasser att leka med och följande verkade mest intressanta:

• Image - Används för att hantera en bild som ska läggas till i ett så kallat album.
• CollectionCreator - Genererar en kollektion av de bilder man laddar in i sitt album.
• SparseImageCreator - Genererar albumet som en bild.

Följande kodsnutt genererar en kollektion av två bilder:

//-------------------------
string Destination = "MyAlbum";
Collection<Microsoft.DeepZoomTools.Image> Images = new Collection<Microsoft.DeepZoomTools.Image>();
Images.Add(new Microsoft.DeepZoomTools.Image(".\\Images\\PC040248.JPG") { Dpi = new System.Windows.Point(1, 1), ViewportOrigin = new System.Windows.Point(-1, 0), ViewportWidth = 10 });
Images.Add(new Microsoft.DeepZoomTools.Image(".\\Images\\PB290059.JPG") { Dpi = new System.Windows.Point(1, 1), ViewportOrigin = new System.Windows.Point(-2, 0), ViewportWidth = 10 });
collectionCreator.Create(Images, Destination); 
//-------------------------

Dpi borde vara DotPerInch, men jag har inte lyckats få den att spela någon roll...
ViewPostOrigin är den position som bilden ska få, det konstig är att både X och Y ska vara negativa för att hamna på skärmen.
Normalt är att origo (x=0, y=0) sitter i det övre vänsta hörnet på skärmen och det verkar också var fallet med DeepZoom, men sedan måste X vara negativt åt höger och Y negativt neråt.
ViewPortWidth är hur stor hela albumet ska vara då ViewportOrigin används.
Om ViewportWidth har ett stort värde så måste ViewportOrigin ha stora värden för att hamna längre in på skärmen.

Projektet som DeepZoomComposern skapade har antagligen följande i sin XAML:

<MultiScaleImage x:Name="msi"/>

Vilket är själva bakgrunden till albumet och det är denna msi som behöver få reda på mitt nya album, så jag kopierar in filerna i min ClientBin-katalog och ser till så att ett event kör följande kod:

msi.Source = new DeepZoomImageTileSource(new Uri("MyAlbum.xml", UriKind.Relative));

Och vips så visas mitt nya album istället...

Om ni får problem eller undrar över något så hör av till mig: Lars

Har du missat Silverlight Toolkit?

Då tycker jag att du ska ta dej en titt på http://silverlight.codeplex.com/

Silverlight Toolkit är en samling komponenter m.m. från Microsoft som inte levereras med den ordinare releasen av Silverlight.

Här finns en hel del trevliga saker som kan hjälpa oss i vardagen som Silverlightutvekcklare.

Tanka hem, installera och hare bra!

/Lars

Vill du kunna ta hand om högerklick i Silverlight?

Visst är det bra att man kan se att det är en Silverlight-app genom att högerklicka, men ibland kanske man vill kunna styra över vad som händer om man högerklickar.

Hur gör man då?

Hemligheten ligger i att koppla på sig på event från Htmlsidan genom att anropa HtmlPage.Document.AttachEvent()

Om man har en metod som ser ut så här:

private void OnContextMenu(object sender, HtmlEventArgs e)

Så går det att köra följande kodsnutt:

HtmlPage.Document.AttachEvent("oncontextmenu", OnContextMenu);

Det som behöver göras i OnContextMenu är att förhindra den ordinare hanteringen av det här eventet (visa inställningsmenyn för silverlight) och det görs genom att anropa PreventDefault(); på den HtmlEventArgs-variabel som man fick in i eventet.

Något som är viktigt att påpeka är att aspx-sidan där silverlight-appen ska visas måste vara windowless, alltså där det finns en tag som börjar med <asp:Silverlight så måste det finnas en parameter som säger så här: Windowless="true"

Jag har i exemplet skapat upp en liten meny som dyker upp via en Storyboard och som innehåller tre trevliga länkar.

För att höger-klicket ska visa upp menyn måste rätt event kopplas på, tryck på knappen "Attach Event".

Sedan byter knappen text mot "Detach Event" och om man vill få tillbaka ordinarie hantering av Höger-klick i silverlight så tryck på knappen då det står "Detach Event".

Tanka ner exemplet nedan och njut...

/Lars

RightClick.zip (558,50 kb)

Om det är intressant att välja färg i Silverlight så är det här lilla projektet jag skapat kanske intressant.

Webbsidan visar fyra sliders, som representerar de delar som en färg byggs upp av i Silverlight.

Red, Green, Blue & Alpha

Ändra på dessa sliders så ändras färgen på en rektangel.

Det går också att klicka på några rektanglar med färdiga färger i så att det lättare går att utgå ifrån desa färger.

Koden bakom visar hur man kan sätta färg till controller i Silverlight och hur Alpha kan användas för att få genomskinlig färg!

SelectColor.zip (556,01 kb)

I Silverlight 2 fick vi en massa kontroller.

Jag har skapat en liten Silverlight-app där jag lagt in de flesta kontroller som följer med Silerlight 2 så att man kan se hur de kan användas.

Detta projekt kan var till hjälp, som en lite uppslagbok då minnet sviker eller för att få inspiration eller liknande…

Håll till godo

/Lars

Silverlight2ControlDemo.zip (1,48 mb)

Om en TabControl används och en kontroll ska animeras med Storyboards som kopplas ihop via C#−kod kan det bli fel.
Det som går fel är att när man växlar bort den tab som har den animerade kontrollen och det är
dags för att starta nästa Storyboard så hittar den inte kontrollen.
För att komma runt detta så bör man kontrollera om det är rätt TabItem som är aktiv, annars ska
inte nästa Storyboard startas.
För att få igång animationen då man byter tillbaka till den tabben så går det att starta den
första Storyboarden när Kontrollen har laddats, för den laddas om för varje gång en tab
aktiveras.

Följande exempel har en TabControl med två tabbar, animerar en Ellipse på en tab med hjälp av två StoryBoards.

XAML:

<basics:TabControl x:Name="TheTabControl" SelectedIndex="1">

<basics:TabItem Header="Tab 1" >

</basics:TabItem>

<basics:TabItem x:Name="Tab2" Header="Tab 2">

<Canvas>

<Canvas.Resources>

<Storyboard x:Name="BallAnimation1"

Completed="BallAnimation1_Completed">

<DoubleAnimation Storyboard.TargetName="Ball"

Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100"/>

</Storyboard>

<Storyboard x:Name="BallAnimation2"

Completed="BallAnimation2_Completed">

<DoubleAnimation Storyboard.TargetName="Ball"

Storyboard.TargetProperty="(Canvas.Left)" From="100" To="0"/>

</Storyboard>

</Canvas.Resources>

<Ellipse x:Name="Ball" Width="30" Height="30" Fill="Blue"

Loaded="Ball_Loaded"/>

</Canvas>

</basics:TabItem>

</basics:TabControl>

C#−code:

private void Ball_Loaded(object sender, RoutedEventArgs e)

{

    BallAnimation1.Begin();

}

private void BallAnimation1_Completed(object sender, EventArgs e)

{

    if (TheTabControl.SelectedIndex == 1)

    {

        BallAnimation2.Begin(); 

    }

}

private void BallAnimation2_Completed(object sender, EventArgs e)

{

    if (TheTabControl.SelectedIndex == 1)

    {

        BallAnimation1.Begin();

    }

}