Introdução
No Silverlight 4, foi incluído um controle bem interessante chamado WebBrowser. Esse controle é usado para apresentar conteúdo HTML. Note que esse controle funciona somente em aplicações rodando fora do browser. Isso por que não faria muito sentido usar este controle em uma aplicação rodando dentro do Browser, já que é possível interagir com o navegador (para saber mais, leia sobre HtmlPage e HtmlDocument).
Voce pode baixar o código da aplicação desenvolvida para este tutorial no link abaixo:
http://cid-1498c467c14dc20b.skydrive.live.com/self.aspx/BrSilverlight/Tutoriais/SilverlightBrowser.zip
Configurando Out-of-Browser
Primeiramente, crie uma nova aplicação Silverlight no Visual Studio. Como o controle WebBrowser só funciona para aplicações Out-of-Browser, temos que configurar nossa aplicação para funcionar fora do navegador. Para fazer isso, clique com o botão direito no projeto Silverlight e vá em Propriedades.
Feito isso, na guia “Silverlight” marque a opção “Enable running application out of the browser”.
Agora, temos que ter certeza que a aplicação irá rodar fora do browser. Para fazermos isso, temos que ter duas “telas” distintas. Uma para quando a aplicação está rodando no browser, que irá pedir para o usuário instala-la em sua máquina, e outra, que irá ter o controle WebBrowser, quando a aplicação estiver fora do browser.
Clique com o botão direito no projeto Silverlight, vá em “Add” > “New Item” e escolha “Silverlight Child Window”.
Dê o nome de InstalaçãoWindow e clique em “Add”. Essa janela irá pedir ao usuário que instale a aplicação em sua máquina.
Adicione o seguinte XAML ao arquivo InstalacaoWindow.xaml:
Code Snippet
- <controls:ChildWindow x:Class="SilverlightBrowser.InstalacaoWindow"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
- Width="400" Height="110"
- Title="InstalacaoWindow">
- <Grid x:Name="LayoutRoot" Margin="2">
- <Grid.RowDefinitions>
- <RowDefinition />
- <RowDefinition Height="Auto" />
- </Grid.RowDefinitions>
-
- <TextBlock x:Name="notificacaoTxt" Text="Esta aplicação precisa rodar Out-of-Browser" HorizontalAlignment="Center" Margin="10" />
- <Button x:Name="CancelButton" Content="Cancelar" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
- <Button x:Name="OKButton" Content="Instalar" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
- </Grid>
- </controls:ChildWindow>
Snippet 1
Nesse XAML, criamos um um botão (OKButton) que irá verificar se a aplicação está instalada na máquina do usuário. Caso não esteja, irá instala-la.
No arquivo InstalacaoWindow.xaml.cs, adicione o seguinte código:
Code Snippet
- private void OKButton_Click ( object sender, RoutedEventArgs e )
- {
- if ( Application.Current.InstallState == InstallState.NotInstalled )
- Application.Current.Install ( );
- else
- MessageBox.Show ( "Aplicação já instalada" );
- this.DialogResult = true;
- }
Snippet 2
Na linha 3, checamos o InstallState da aplicação, que nos diz se a aplicação está ou não instalada na máquina do usuário. Caso, não esteja (NotInstalled), chamamos o método Install(), que irá mostrar ao usuário o prompt de instalação.
Clique em OK. Agora o runtime do Silverlight irá instalar a aplicação na máquina do usuário, criando atalhos (caso o usuário marque as CheckBoxes) no Menu Iniciar e na Área de Trabalho.
Agora vamos configurar o Visual Studio para executar a aplicação instalada, e não a página que hospeda o controle Silverlight.
Vá nas propriedades do projeto Silverlight, na guia Debug, em “Start Action”, marque a opção “Instaled out-of-browser application”.
Em seguida, clique com o botão direito no projeto Silverlight, e marque a opção “Set as StartUp Project”.
WebBrowser Control
Iremos agora criar o controle que irá mostrar o WebBrowser. Adicione um novo UserControl a solução chamado BrowserControl.
No arquivo BrowserControl.xaml, adicione o seguinte XAML:
Code Snippet
- <UserControl x:Class="SilverlightBrowser.BrowserControl"
- 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">
-
- <Grid x:Name="LayoutRoot" Background="White">
- <Grid.RowDefinitions>
- <RowDefinition Height="23" />
- <RowDefinition Height="*" />
- </Grid.RowDefinitions>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="*" />
- <ColumnDefinition Width="25" />
- </Grid.ColumnDefinitions>
-
- <TextBox x:Name="urlTxt" Text="http://www.bing.com" />
- <Button x:Name="navBtn" Content="Go" Grid.Column="1" Click="navBtn_Click" />
-
- <WebBrowser x:Name="browser" Grid.Row="1" Grid.ColumnSpan="2" Width="1000" Height="700" />
- </Grid>
- </UserControl>
Snippet 3
Neste snippet, criamos uma TextBox que onde o usuário irá digitar a URL da página que ele deseja visitar, um botão que irá navegar para a página desejada.
Na linha 21, criamos o controle WebBrowser, demos a ele um nome (browser) e setamos sua largura, altura e sua posição no Grid.
No arquivo BrowserControl.xaml.cs, edite o EventHandler navBtn_Click, adicionando o seguinte código:
Code Snippet
- private void navBtn_Click ( object sender, RoutedEventArgs e )
- {
- String html = String.Empty;
- if ( urlTxt.Text.StartsWith ( "http://" ) )
- html = "<iframe src=\"" + this.urlTxt.Text + "\" style=\"width:100%;height:100%;\" />";
- else
- html = this.urlTxt.Text;
-
- this.browser.NavigateToString ( html );
- }
Snippet 4
O controle WebBrowser possui 2 métodos que podem ser usados para mostrar o conteúdo HTML.
- Navigate(URI source): esse método recebe uma URI que irá apontar para o site que deseja-se mostrar no WebBrowser. Entretanto, há um porém. Devido a restrições de segurança, o WebBrowser só renderiza páginas no mesmo domínio da sua aplicação. Uma maneira de contornar essa situação é usando o método abaixo.
- NavigateToString(String text): esse método recebe como parâmetro uma string com qualquer conteúdo HTML e o WebBrowser control irá renderizá-lo. Então podemos usar este método para mostrar páginas que sejam de outro domínio que não seja o nosso. Basta criamos um <iframe> e setarmos o atributo src para a página que desejamos abrir.
Na linha 4, verificamos se o usuário está tentando abrir uma página, verificando se o enderço começa com “http://”. Se sim, criamos o <iframe> e setamos o atributo src com o enderço digitado pelo usuário.
O usuário também pode digitar qualquer conteúdo HTML na TextBox que o WebBrowser irá interpretar e rederizar na tela.
Aperte F5, e execute a aplicação.
Na imagem abaixo, vemos o WebBrowser mostrando a página do Bing.
E na imagem abaixo, vemos o WebBrowser mostrando um conteúdo HTML referente a um vídeo do YouTube.
