Ovládací prvek WebBrowser (webový prohlížeč)

WPF obsahuje připravený ovládací prvek WebBrowser, který vám umožňuje hostovat kompletní webový prohlížeč ve vaší aplikaci. Ovládací prvek WebBrowser je v podstatě pouze obálkou kolem ActiveX verze Internet Exploreru. Avšak protože je integrován do systému Windows, vaše aplikace by měla pracovat na všech počítačích se systémem Windows bez potřeby instalace dalších komponent.

V tomto článku jsem věci udělal trochu jinak: Místo toho, abych začal velmi omezeným příkladem a pak ho rozšiřoval, vytvořil jsem jeden, ale složitější příklad. Ukazuje, jak snadno můžete spustit malý webový prohlížeč. Jeho funkčnost je velmi základní, ale snadno ji můžete rozšířit, pokud chcete. Takhle to vypadá:

Tak se podívejme na kód:

<Window x:Class="WpfTutorialSamples.Misc_controls.WebBrowserControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WebBrowserControlSample" Height="300" Width="450">
    <Window.CommandBindings>
        <CommandBinding Command="NavigationCommands.BrowseBack" CanExecute="BrowseBack_CanExecute" Executed="BrowseBack_Executed" />
        <CommandBinding Command="NavigationCommands.BrowseForward" CanExecute="BrowseForward_CanExecute" Executed="BrowseForward_Executed" />
        <CommandBinding Command="NavigationCommands.GoToPage" CanExecute="GoToPage_CanExecute" Executed="GoToPage_Executed" />
    </Window.CommandBindings>
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <Button Command="NavigationCommands.BrowseBack">
                <Image Source="/WpfTutorialSamples;component/Images/arrow_left.png" Width="16" Height="16" />
            </Button>
            <Button Command="NavigationCommands.BrowseForward">
                <Image Source="/WpfTutorialSamples;component/Images/arrow_right.png" Width="16" Height="16" />
            </Button>
            <Separator />
            <TextBox Name="txtUrl" Width="300" KeyUp="txtUrl_KeyUp" />
            <Button Command="NavigationCommands.GoToPage">
                <Image Source="/WpfTutorialSamples;component/Images/world_go.png" Width="16" Height="16" />
            </Button>
        </ToolBar>
        <WebBrowser Name="wbSample" Navigating="wbSample_Navigating"></WebBrowser>
    </DockPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Input;

namespace WpfTutorialSamples.Misc_controls
{
	public partial class WebBrowserControlSample : Window
	{
		public WebBrowserControlSample()
		{
			InitializeComponent();
			wbSample.Navigate("http://www.wpf-tutorial.com");
		}

		private void txtUrl_KeyUp(object sender, KeyEventArgs e)
		{
			if(e.Key == Key.Enter)
				wbSample.Navigate(txtUrl.Text);
		}

		private void wbSample_Navigating(object sender, System.Windows.Navigation.NavigatingCancelEventArgs e)
		{
			txtUrl.Text = e.Uri.OriginalString;
		}

		private void BrowseBack_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = ((wbSample != null) && (wbSample.CanGoBack));
		}

		private void BrowseBack_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			wbSample.GoBack();
		}

		private void BrowseForward_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = ((wbSample != null) && (wbSample.CanGoForward));
		}

		private void BrowseForward_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			wbSample.GoForward();
		}

		private void GoToPage_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = true;
		}

		private void GoToPage_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			wbSample.Navigate(txtUrl.Text);
		}

	}
}

Kód se na první pohled může zdát trochu přesycený, ale když se na něj podíváte znovu, uvědomíte si, že je v něm hodně opakování.

Začněme tím, že se podíváme na část XAML. Všimněte si, že používám několik konceptů, o kterých se mluví jinde v tomto tutoriálu, včetně ovládacího prvku ToolBar a příkazů WPF. ToolBar se používá k umístění několika tlačítek pro pohyb vpřed a vzad. Také máme adresní řádek pro zadávání a zobrazování aktuální URL, spolu s tlačítkem pro navigaci na zadanou URL.

Pod panelem nástrojů máme samotný ovládací prvek WebBrowser. Jak vidíte, jeho použití vyžaduje pouze jediný řádek XAML – v tomto případě se přihlásíme k odběru události Navigating, která nastane, jakmile WebBrowser začne navigovat na URL.

V Code-behind začínáme navigací na URL již v konstruktoru okna, abychom měli co zobrazit okamžitě místo prázdného ovládacího prvku. Poté máme událost txtUrl_KeyUp, ve které kontrolujeme, zda uživatel stiskl Enter uvnitř adresního řádku - pokud ano, začneme navigovat na zadanou URL.

Událost wbSample_Navigating zajišťuje, že se adresní řádek aktualizuje pokaždé, když začne nová navigace. To je důležité, protože chceme, aby ukazoval aktuální URL, ať už uživatel zahájil navigaci zadáním nové URL nebo kliknutím na odkaz na webové stránce.

Poslední část Code-behind je jednoduchou obsluhou našich příkazů: Dvě pasáže jsou pro tlačítka zpět a vpřed, kde používáme CanGoBack a CanGoForward k rozhodnutí, zda mohou být obslužné akce provedeny, a metody GoBack a GoForward pro skutečné provedení akcí. To je velmi standardní postup při práci s příkazy WPF, jak je popsáno v sekci příkazů tohoto tutoriálu.

Poslední příkaz je navržen tak, aby byl vždy proveden, a když se tak stane, znovu zavoláme metodu Navigate().

Shrnutí

Jak vidíte, hostování a používání kompletního webového prohlížeče, uvnitř vaší aplikace, je s ovládacím prvkem WebBrowser velmi snadné. Nicméně byste si měli být vědomi toho, že verze WebBrowser pro WPF je trochu omezená ve srovnání s verzí pro WinForms, ale pro základní použití a navigaci funguje dobře.

Pokud chcete místo toho použít verzi pro WinForms, můžete tak učinit pomocí WindowsFormsHost, což je vysvětleno v jiné kapitole tohoto tutoriálu.