[Silverlight 4 nowości] WebBrowser

Kilka godzin temu pojawiła się nowa wersja Silverlighta 4, a wraz z nią setki nowości (tak, tak, nie przesadzam.. setki!!! J ). Te najważniejsze znajdziecie chociażby w artykule Bartłomieja Zassa czy też na blogu Tim'a lub Mike'a. Ja swoją przygodę rozpoczynam od kontrolki WebBrowser, a więc czegoś co pozwoli mi wreszcie na wyświetlenie kodu html w aplikacji Silverlight :]

Niestety nie wszystko tak pięknie działa jak byśmy mogli sobie to wymarzyć i już na początku zobaczymy, że kontrolka ta działa tylko gdy uruchamiamy aplikację jako "zainstalowaną lokalnie", czyli OutOfBrowser (OOB) i dodatkowo aplikacji powinna mieć włączony tryb działania z pełnymi uprawnieniami (to również nowości w Silverlight 4) jeśli chcemy oglądać strony które nie należą do nas (cross-domain-policy). Mimo to, kontrolka działa, a kod z niej wygenerowany wygląda jak z przeglądarki :)

Demo

Zaczynamy od instalacji Silverlight 4 (http://silverlight.net/getstarted/silverlight-4-beta/ ), a więc pobieramy Silverlight 4 Tools for Visual Studio 2010 i instalujemy (zakładam że macie już Visual Studio 2010 Beta 2 - download). Po instalacji tworzymy nowy projekt Silverlight i w momencie zapytania o wygenerowanie projektu Web, wybieramy z listy Silverlight 4 (patrz rysunek).

W nowym Visual Studio 2010 + Silverlight 4 mamy kolejną nowość w postaci pełnego edytora xaml-a, a więc Blend 3 nie będzie już nam aż tak potrzebny :]

WebBrowser

Dodajemy w XAML kontrolkę WebBrowser oraz nazwę, tak abyśmy mogli odwołać się do niej z code-behind. Np. w ten sposób:

<UserControl x:Class="SilverlightApplication1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="300" d:DesignWidth="400">
   <Grid x:Name="LayoutRoot" Background="White">
      <WebBrowser x:Name="webBrowser" />
   </Grid>
</UserControl>

Następnie w code-behind dodajemy ładowanie adresu:

public MainPage()
{
   InitializeComponent();
   this.Loaded += (o, e) => { webBrowser.Navigate(new Uri("http://microsoft.com", UriKind.Absolute)); };
}

Ostatnim krokiem jest włączenie opcji instalacji aplikacji (OOB) oraz włączenie potrzeby użycia większych uprawnień. Jeżeli nie włączymy zwiększenia uprawnień dla naszej aplikacji, będziemy mogli oglądać tylko strony które mają ustawiony dla nas cross-domain-policy lub strony wygenerowane z naszego kodu html (a więc poprzez opcję NavigateString, gdzie parametrem jest kod html).

W celu włączenia wszystkiego, klikamy prawym na projekcie Silverlightowym i wybieramy Properites:

Run and Fun

Jeśli wszystko się kompiluje, jesteśmy gotowi aby sprawdzić działanie naszej przeglądarki. Uruchamiamy aplikację i klikamy prawym klawiszem myszki gdziekolwiek. Z otwartego menu wybieramy opcję "Install …. onto this computer "

A następnie w nowym oknie opcję "Install". Zwróćcie uwagę, że skoro zaznaczyliśmy opcję potrzeby używania dodatkowych uprawnień, użytkownik otrzymuje o tym informację przed instalacją (patrz rysunek).

Kiedy aplikacja zainstalowana lokalnie uruchomi się, powinniśmy zobaczyć działającą stronę internetową wewnątrz naszej aplikacji Silverlight.

Pod prawym klawiszem myszki będziemy mieli menu prosto z przeglądarki, a nie z aplikacji Silverlight. Co fajniejsze, jeśli wejdziemy np. na http://youtube.com, zobaczymy że aplikacje Flash, czy też Silvelright również działają.

PS. W ramach zabawy próbowałem otworzyć moją aplikację Silverlight w aplikacji Silverlight, ale niestety, a raczej i dobrze!, Silverlight nie pozwolił zainstalować się ponownie z samego siebie. Aplikacja wykryła że jest zainstalowana. ;]

Moje demo

W ramach zabawy stworzyłem swoją mini przeglądarkę dostępną pod poniższym adresem (pamiętajcie o potrzebie jej zainstalowania przed użyciem):
Run demo

Przycisk "Przejdź" otwiera stronę spod wpisanego adresu, a "Hello World" generuje stronę z kodu html podanego jako string. Okno jest podzielone na dwie części, lewa jest to kontrolka WebBrowser która wyświetla stronę html, a prawa to Rectangle który jest malowany nowym typem brusha, "HtmlBrush". W momencie załadowania się strony, na Rectangle wywołuję metodę "Redraw()" i maluje wszystkim co znajduje się w kontrolce WebBrowser. Możemy także go odmalować klikając przycisk "Odmaluj".

Jak zapewne sami zauważyliście, próbowałem zrobić coś z Projection, niestety kontrolka WebBrowser sama poddaje się tym operacjom, ale już wyświetlona zawartość jest normalnie odwzorowana. A szkoda, już myślałem że będę mógł czytać sobie bloga do góry nogami :D

Kod źródłowy do dema:
WebBrowserDemo.zip
Słowem zakończenia, chciałem tylko podkreślić że wymienione funkcjonalności to nie wszystko. W internecie już możemy się doszukać przykładów z odwołaniem do kodu javascript i na odwrót, a więc całkiem pokaźny zbiór nowych możliwości.

Pozdrawiam i lecę do innych nowinek.. :]

Jacek Ciereszko