Obrazek instalacyjny Silverlight 2.0

Czy obrazek instalacyjny Silverlight 2.0 (patrz poniżej) wydaje Ci się intuicyjny? Czy użytkownik który nie wie co to Silverlight na pewno kliknie go aby zainstalować plugin do swojej przeglądarki?

Odpowiedź prawie zawsze brzmi nie!

Najgorsze co możemy zrobić, to wystraszyć użytkownika na samym początku. Jego pierwsze wrażenie wpłynie na to, czy będzie on używał aplikacji czy zniechęci się do niej od samego początku, dlatego też warto dbać o jego pierwsze wrażenie.

Czy możemy coś z tym zrobić?

Tak! Możemy wstawić swój własny obrazek, który bardziej będzie przypominać aplikację, którą próbuje uruchomić użytkownik. Możemy sprawić żeby user nie czuł się zagubiony i wiedział co zobaczy jak zainstaluje plugin.

Podmieńmy więc "obrazek braku plugin-a" w Silverlight.

Dla plików html

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication1.xap" />
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
    <img src="ClientBin/InstallSL.png" alt="Get Microsoft Silverlight" style="border-style: none" />
</a>
</object>

Aby wstawić własny obrazek, wystarczy zmienić wartość "src" dla tagu <img i wskazać na własny. Możemy także zmienić cały kod html i zamiast linka z tagu <a wstawić tylko informację lub alternatywną wersję aplikacji która nie wymaga Silverlighta. W ten sposób będziemy mieli pełną kontrolę nad tym, co zobaczy użytkownik, zanim zainstaluje Silverlight-a.

Dla plików aspx

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%">
<PluginNotInstalledTemplate>
  <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
      <img src="ClientBin/InstallSL.png" alt="Get Microsoft Silverlight" style="border-style: none" />
  </a>
</PluginNotInstalledTemplate>
</asp:Silverlight>

Dla plików ASP dodajemy parametr "PluginNotInstalledTemplate", a w nim możemy wrzucić dowolny kod html, który wyświetli się gdy użytkownik nie będzie miał zainstalowanego Silverlighta. W tym przykładzie skopiowałem kod html z przykładu powyżej.

Jak w prosty sposób przetestować obrazek instalacyjny

Aby sprawdzić jak będzie wyglądać aplikacja dla użytkowników którzy nie posiadają zainstalowanego plug-ina do Silverlighta, możemy użyć możliwości jakie daje nam Internet Explorer. Wystarczy przejść do “Tools” -> “Manage Add-ons” -> “Enable or Disable Add-ons”.

Teraz znajdź plug-in Silverlight-a i wyłącz go. Aplikacja zrestartuje się automatycznie.

Przykładowe rozwiązanie

Jak przykładowe rozwiązanie chciałem pokazać preinstaller dla mojej gry pasjans.

Gra wygląda tak:

Gdy użytkownik nie ma zainstalowanego plugina do Silverlighta, gra wygląda tak:

Jeśli zmodyfikujemy preinstallery, to brak plugina może wyglądać, np. tak:

Pozdrawiam,

Jacek Ciereszko