Aggiungere una pagina Web nell'interfaccia utente

Logo UWP e WPF

HTML è una sintassi di markup per il Web, ma può essere usato nelle applicazioni desktop di Windows 10 aggiungendo un controllo Web. Questo controllo offre la possibilità di includere nell'app una visualizzazione che carica una pagina Web da Internet o in formato HTML statico.

In questa unità si apprenderà come:

  • Aggiungere il controllo Web nell'interfaccia utente.
  • Caricare una pagina Web basata su Internet.
  • Caricare contenuto in formato HTML statico.

Ecco come procedere.

Uso di contenuto HTML in un'app desktop

Logo delle tecnologie con UWP evidenziato

1. Creare un progetto

In Visual Studio creare un progetto C# nella piattaforma UWP (Universal Windows Platform). Assegnare al progetto un nome significativo basato su questa lezione, ad esempio: UsingHtmlApp.Uwp.

Creare il progetto

2. Il controllo WebView

Per iniziare, si vedrà come aggiungere un controllo WebView a una pagina e aprire un sito Web ospitato online.

Aprire MainPage.xaml e aggiungere un controllo WebView alla pagina:

MainPage.xaml

<Page x:Class="UsingHtml.Uwp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UsingHtml.Uwp"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <WebView Source="https://docs.microsoft.com/learn/"/>
    </Grid>
</Page>

È tutto. Nell'applicazione verrà visualizzato un sito Web, che sarà possibile esplorare usando i collegamenti nel contenuto del sito.

WebView

Nella maggior parte dei casi sarà anche possibile vedere il caricamento del sito Web nella finestra di progettazione XAML.

Questa funzionalità di per sé non rende un'applicazione molto utile, perché non è possibile modificare il sito Web a livello di codice. L'utente deve usare i collegamenti nella pagina Web per spostarsi.

3. Modifica dinamica del sito Web

È possibile impostare il contenuto del controllo WebView in modo dinamico in fase di esecuzione usando il metodo Navigate. Per illustrare questo concetto, si userà la pagina Web di Microsoft Learn, che verrà visualizzata tramite un controllo Button.

Aprire MainPage.xaml. Aggiungere un controllo Button sopra il controllo WebView e rimuovere la proprietà Source da WebView. Impostare un colore per Grid Background in modo da ottenere un po' di contrasto.

MainPage.xaml

<Page x:Class="UsingHtml.Uwp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UsingHtml.Uwp"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button Content="Load internet-hosted website"
                    Click="UseUrlButton_OnClick"
                    Margin="10" />
        </StackPanel>

        <WebView x:Name="WebView1"
                 Grid.Row="1" />
    </Grid>
</Page>

Aprire MainPage.xaml.cs e completare il gestore dell'evento UseUrlButton_OnClick in modo da usare il metodo Navigate di WebView:

MainPage.xaml.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace UsingHtml.Uwp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void UseUrlButton_OnClick(object sender, RoutedEventArgs e)
        {
            // For HTML content hosted on the internet, you can simply use the URL.
            WebView1.Navigate(new Uri("https://docs.microsoft.com/learn/"));
        }
    }
}

Si noti che il metodo Navigate usa un Uri invece di un parametro di tipo string.

Distribuire l'applicazione

Si noterà che il controllo WebView non mostra alcun contenuto la prima volta che l'app viene avviata. Selezionare il controllo Button per caricare il sito Web:

Selezionare il pulsante

Ecco il risultato dopo aver selezionato il pulsante:

Sito Web caricato

4. Pulsanti per spostarsi in avanti e all'indietro

È possibile controllare lo spostamento in avanti e all'indietro dal controllo WebView usando i metodi GoBack e GoForward. A questo scopo, si aggiungeranno due nuovi pulsanti nella parte superiore della pagina.

È inoltre consigliabile sfruttare l'evento NavigationCompleted di WebView per sapere quando abilitare o disabilitare tali pulsanti.

Aggiungere un controllo Button con la freccia indietro e un altro Button con la freccia avanti nella parte superiore della pagina. Definire quindi il gestore dell'evento NavigationCompleted di WebView.

MainPage.xaml

<Page x:Class="UsingHtml.Uwp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UsingHtml.Uwp"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button x:Name="BackButton"
                    Content="&lt;--"
                    IsEnabled="False"
                    Click="BackButton_OnClick"
                    Margin="10" />
            <Button Content="Load internet-hosted website"
                    Click="UseUrlButton_OnClick"
                    Margin="10" />
            <Button x:Name="ForwardButton"
                    Content="-->"
                    IsEnabled="False"
                    Click="ForwardButton_OnClick"
                    Margin="10" />
        </StackPanel>

        <WebView x:Name="WebView1"
                 NavigationCompleted="WebView1_OnNavigationCompleted"
                 Grid.Row="1" />
    </Grid>
</Page>

Completare i gestori degli eventi BackButton_OnClick, ForwardButton_OnClick e WebView1_OnNavigationCompleted nel file code-behind:

MainPage.xaml.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace UsingHtml.Uwp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void UseUrlButton_OnClick(object sender, RoutedEventArgs e)
        {
            // For HTML content hosted on the internet, you can simply use the URL.
            WebView1.Navigate(new Uri("https://docs.microsoft.com/learn/"));
        }

        private void BackButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform backward navigation.
            if (WebView1.CanGoBack)
            {
                // If we can go back, call the WebView's GoBack() method.
                WebView1.GoBack();
            }
        }

        private void ForwardButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform forward navigation.
            if (WebView1.CanGoForward)
            {
                // If we can go forward, call the WebView's GoForward() method.
                WebView1.GoForward();
            }
        }

        // We can use the NavigationCompleted event to update the user interface with useful information.
        // We'll use it to update the back and forward buttons.
        private void WebView1_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            // Enable or disable the back button depending on whether the WebView can go back.
            BackButton.IsEnabled = WebView1.CanGoBack;

            // Enable or disable the forward button depending on whether the WebView can go forward.
            ForwardButton.IsEnabled = WebView1.CanGoForward;
        }
    }
}

Il gestore dell'evento NavigationCompleted verrà eseguito al termine di ogni spostamento eseguito dal controllo WebView. Questa è la posizione ideale per abilitare o disabilitare i pulsanti usando le proprietà CanGoBack e CanGoForward di WebView.

Distribuire l'applicazione per un altro test rapido

  1. Selezionare il pulsante centrale per caricare il sito Web di Microsoft Learn.
  2. Passare ad alcune pagine nel sito Web. Viene abilitato il pulsante con la freccia indietro.
  3. Usare il pulsante con la freccia indietro. Si noterà che funziona esattamente come un pulsante dello stesso tipo in un Web browser.
  4. Provare il pulsante con la freccia avanti.

Dopo aver completato l'esplorazione del contenuto Web online, si può passare al contenuto offline. Proseguire con la sezione 5 per esaminare questa opzione.

5. Uso di contenuto HTML locale

Per il rendering di contenuto HTML nel controllo WebView non è necessario disporre di un server Web né di un sito Web ospitato. È possibile usare contenuto HTML offline, o locale. Per illustrare questa funzionalità, si userà un file HTML locale.

Creare un file HTML locale nel progetto

Fare clic con il pulsante destro del mouse sulla cartella Assets in Esplora soluzioni, espandere Aggiungi e selezionare Nuovo elemento.

Filtrare il contenuto in base a text, selezionare Text File e assegnare al file il nome LocalContent.html.

Aggiungere un file di testo

Dopo aver aggiunto il file, aprirlo e aggiungere il contenuto HTML seguente:

LocalContent.html

<!DOCTYPE html>
<html>
<body>
    <h1>Hello!</h1>
    <h2 id="subtitle">This is rendered using a local HTML file</h2>

    <p>Click the button to use local JavaScript to make changes to the DOM.</p>

    <button onclick="onButtonClick()">click me!</button>

    <script type="text/javascript">
        var increment = 1;
        function onButtonClick() {
            document.getElementById("subtitle").innerHTML = "I've been updated by JavaScript " + increment++ + " times";
        }
    </script>

</body>
</html>

Verrà visualizzato il risultato seguente:

File completato

Aprire MainPage.xaml e aggiungere un controllo Button con il nome Load local HTML file nella parte superiore della pagina:

MainPage.xaml

<Page x:Class="UsingHtml.Uwp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UsingHtml.Uwp"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button x:Name="BackButton"
                    Content="&lt;--"
                    IsEnabled="False"
                    Click="BackButton_OnClick"
                    Margin="10" />
            <Button Content="Load local HTML file"
                    Click="LoadHtmlFileButton_OnClick"
                    Margin="10" />
            <Button Content="Load internet-hosted website"
                    Click="UseUrlButton_OnClick"
                    Margin="10" />
            <Button x:Name="ForwardButton"
                    Content="-->"
                    IsEnabled="False"
                    Click="ForwardButton_OnClick"
                    Margin="10" />
        </StackPanel>

        <WebView x:Name="WebView1"
                 NavigationCompleted="WebView1_OnNavigationCompleted"
                 Grid.Row="1" />
    </Grid>
</Page>

Completare il gestore dell'evento LoadHtmlFileButton_OnClick nel file code-behind:

MainPage.xaml.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace UsingHtml.Uwp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void UseUrlButton_OnClick(object sender, RoutedEventArgs e)
        {
            // For HTML content hosted on the internet, you can simply use the URL.
            WebView1.Navigate(new Uri("https://docs.microsoft.com/learn/"));
        }

        private void BackButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform backward navigation.
            if (WebView1.CanGoBack)
            {
                // If we can go back, call the WebView's GoBack() method.
                WebView1.GoBack();
            }
        }

        private void ForwardButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform forward navigation.
            if (WebView1.CanGoForward)
            {
                // If we can go forward, call the WebView's GoForward() method.
                WebView1.GoForward();
            }
        }

        // We can use the NavigationCompleted event to update the user interface with useful information.
        // We'll use it to update the back and forward buttons.
        private void WebView1_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            // Enable or disable the back button depending on whether the WebView can go back.
            BackButton.IsEnabled = WebView1.CanGoBack;

            // Enable or disable the forward button depending on whether the WebView can go forward.
            ForwardButton.IsEnabled = WebView1.CanGoForward;
        }

        private void LoadHtmlFileButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Normally, when using a relative path to the application's local folder, you just use the "ms-appx://" prefix.
            // However, when loading HTML files, you need to use the "ms-appx-web://" prefix.
            WebView1.Navigate(new Uri("ms-appx-web:///assets/LocalContent.html"));
        }
    }
}

Il punto fondamentale è che non esiste alcuna differenza nell'uso del metodo Navigate per un file HTML offline e per un sito Web online. Uri specifica la posizione in cui WebView può trovare il contenuto HTML.

Distribuire l'applicazione e testare le funzionalità HTML in locale

Quando l'applicazione viene aperta, selezionare Load local HTML file:

Selezionare Load local HTML file

Verrà visualizzato il codice HTML di cui è stato eseguito il rendering:

Codice HTML di cui è stato eseguito il rendering

Selezionare click me! per eseguire il codice JavaScript. Questo pulsante aggiorna il testo del sottotitolo nella pagina Web.

Codice HTML dopo l'esecuzione di JavaScript

Si conclude così l'introduzione dell'uso di contenuto HTML in un'applicazione Windows nella piattaforma UWP.

Logo delle tecnologie con WPF evidenziato

1. Creare un progetto

In Visual Studio creare un progetto C# WPF. Assegnare al progetto un nome significativo basato su questa lezione, ad esempio: UsingHtmlApp.Wpf.

Creare il progetto

2. Il controllo WebBrowser

Per iniziare, si vedrà come aggiungere un controllo WebBrowser a una pagina e aprire un sito Web ospitato online.

Aprire MainWindow.xaml e aggiungere un controllo WebBrowser alla pagina:

MainWindow.xaml

<Window x:Class="UsingHtml.Wpf.MainWindow"
        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"
        xmlns:local="clr-namespace:UsingHtml.Wpf"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Grid>
        <WebBrowser Source="https://docs.microsoft.com/learn/" />
    </Grid>
</Window>

Questo è tutto. Nell'applicazione verrà visualizzato un sito Web, che sarà possibile esplorare usando i collegamenti nel contenuto del sito.

WebBrowser

Questa funzionalità di per sé non rende un'applicazione molto utile, perché non è possibile modificare il sito Web a livello di codice. L'utente deve usare i collegamenti nella pagina Web per spostarsi.

3. Modifica dinamica del sito Web

È possibile impostare il contenuto del controllo WebBrowser in modo dinamico in fase di esecuzione usando il metodo Navigate. Per illustrare questo concetto, si userà la pagina Web di Microsoft Learn, che verrà visualizzata tramite un controllo Button.

Aprire MainWindow.xaml. Aggiungere un controllo Button sopra il controllo WebBrowser e rimuovere la proprietà Source da WebBrowser. Impostare infine un colore per Grid Background in modo da ottenere un po' di contrasto.

MainWindow.xaml

<Window x:Class="UsingHtml.Wpf.MainWindow"
        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"
        xmlns:local="clr-namespace:UsingHtml.Wpf"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">

    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button Content="Load internet-hosted website"
                    Click="UseUrlButton_OnClick"
                    Margin="10" />
        </StackPanel>

        <WebBrowser x:Name="WebBrowser1"
                    Grid.Row="1" />
    </Grid>
</Window>

Aprire MainWindow.xaml.cs e completare il gestore dell'evento UseUrlButton_OnClick in modo da usare il metodo Navigate di WebBrowser:

MainWindow.xaml.cs

using System;
using System.Windows;

namespace UsingHtml.Wpf
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void UseUrlButton_OnClick(object sender, RoutedEventArgs e)
        {
            // For HTML content hosted on the internet, use an absolute URI.
            WebBrowser1.Navigate(new Uri("https://docs.microsoft.com/learn/", UriKind.Absolute));
        }
    }
}

Si noti che il metodo Navigate usa un Uri invece di un parametro di tipo string. UriKind.Absolute significa che l'indirizzo non è relativo a un altro percorso, ma è l'indirizzo completo.

Distribuire l'applicazione

Si noterà che il controllo WebBrowser non mostra alcun contenuto la prima volta che l'app viene avviata. Selezionare il controllo Button per caricare il sito Web:

Selezionare il pulsante

Ecco il risultato dopo aver selezionato il pulsante:

Sito Web caricato

4. Pulsanti per spostarsi in avanti e all'indietro

È possibile controllare lo spostamento in avanti e all'indietro dal controllo WebBrowser usando i metodi GoBack e GoForward. A questo scopo, si aggiungeranno due nuovi pulsanti nella parte superiore della pagina.

È inoltre consigliabile sfruttare l'evento NavigationCompleted di WebBrowser per sapere quando abilitare o disabilitare tali pulsanti.

Aggiungere un controllo Button con la freccia indietro e un altro Button con la freccia avanti nella parte superiore della pagina. Definire quindi il gestore dell'evento NavigationCompleted di WebBrowser.

MainWindow.xaml

<Window x:Class="UsingHtml.Wpf.MainWindow"
        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"
        xmlns:local="clr-namespace:UsingHtml.Wpf"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">

    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button x:Name="BackButton"
                    Content="&lt;--"
                    IsEnabled="False"
                    Click="BackButton_OnClick"
                    Margin="10" />
            <Button Content="Load internet-hosted website"
                    Click="UseUrlButton_OnClick"
                    Margin="10" />
            <Button x:Name="ForwardButton"
                    Content="-->"
                    IsEnabled="False"
                    Click="ForwardButton_OnClick"
                    Margin="10" />
        </StackPanel>

        <WebBrowser x:Name="WebBrowser1"
                    Navigated="WebBrowser1_OnNavigated"
                    Grid.Row="1" />
    </Grid>
</Window>

Completare i gestori degli eventi BackButton_OnClick, ForwardButton_OnClick e WebBrowser1_OnNavigationCompleted nel file code-behind:

MainWindow.xaml.cs

using System;
using System.Windows;

namespace UsingHtml.Wpf
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void UseUrlButton_OnClick(object sender, RoutedEventArgs e)
        {
            // For HTML content hosted on the internet, use an absolute URI.
            WebBrowser1.Navigate(new Uri("https://docs.microsoft.com/learn/", UriKind.Absolute));
        }

        private void BackButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform backward navigation.
            if (WebBrowser1.CanGoBack)
            {
                // If we can go back, call the WebBrowser's GoBack() method.
                WebBrowser1.GoBack();
            }
        }

        private void ForwardButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform forward navigation.
            if (WebBrowser1.CanGoForward)
            {
                // If we can go forward, call the WebBrowser's GoForward() method.
                WebBrowser1.GoForward();
            }
        }

        // We can use the Navigated event to update the user interface with useful information.
        // We'll use it to update the back and forward buttons.
        private void WebBrowser1_OnNavigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
        {
            // Enable or disable the back button depending on whether the WebBrowser can go back.
            BackButton.IsEnabled = WebBrowser1.CanGoBack;

            // Enable or disable the forward button depending on whether the WebBrowser can go forward.
            ForwardButton.IsEnabled = WebBrowser1.CanGoForward;
        }
    }
}

Il gestore dell'evento Navigated verrà eseguito al termine di ogni spostamento eseguito dal controllo WebBrowser. Questa è la posizione ideale per abilitare o disabilitare i pulsanti usando le proprietà CanGoBack e CanGoForward di WebBrowser.

Distribuire l'applicazione per un altro test rapido

  1. Selezionare il pulsante centrale per caricare il sito Web di Microsoft Learn.
  2. Passare ad alcune pagine nel sito Web. Viene abilitato il pulsante con la freccia indietro.
  3. Usare il pulsante con la freccia indietro. Si noterà che funziona esattamente come un pulsante dello stesso tipo in un Web browser.
  4. Provare il pulsante con la freccia avanti.

Dopo aver completato l'esplorazione del contenuto Web online, si può passare al contenuto offline. Proseguire con la sezione 5 per esaminare questa opzione.

5. Uso di contenuto HTML locale

Per il rendering di contenuto HTML nel controllo WebBrowser non è necessario disporre di un server Web né di un sito Web ospitato. È possibile usare contenuto HTML offline, o locale. Per illustrare questa funzionalità, si userà un file HTML locale.

Creare un file HTML locale nel progetto

Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni, espandere Aggiungi e selezionare Nuovo elemento.

Filtrare il contenuto in base a text, selezionare Text File e assegnare al file il nome LocalContent.html.

Aggiungere un file di testo

Dopo aver aggiunto il file, aprirlo e aggiungere il contenuto HTML seguente:

LocalContent.html

<!DOCTYPE html>
<html>
<body>
    <h1>Hello!</h1>
    <h2 id="subtitle">This is rendered using a local HTML file</h2>

    <p>Click the button to use local JavaScript to make changes to the DOM.</p>

    <button onclick="onButtonClick()">click me!</button>

    <script type="text/javascript">
        var increment = 1;
        function onButtonClick() {
            document.getElementById("subtitle").innerHTML = "I've been updated by JavaScript " + increment++ + " times";
        }
    </script>

</body>
</html>

Verrà visualizzato il risultato seguente:

File completato

Aprire MainWindow.xaml e aggiungere un controllo Button con il nome Load local HTML file nella parte superiore della pagina:

MainWindow.xaml

<Window x:Class="UsingHtml.Wpf.MainWindow"
        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"
        xmlns:local="clr-namespace:UsingHtml.Wpf"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">

    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button x:Name="BackButton"
                    Content="&lt;--"
                    IsEnabled="False"
                    Click="BackButton_OnClick"
                    Margin="10" />
            <Button Content="Load local HTML file"
                    Click="LoadHtmlFileButton_OnClick"
                    Margin="10" />
            <Button Content="Load internet-hosted website"
                    Click="UseUrlButton_OnClick"
                    Margin="10" />
            <Button x:Name="ForwardButton"
                    Content="-->"
                    IsEnabled="False"
                    Click="ForwardButton_OnClick"
                    Margin="10" />
        </StackPanel>

        <WebBrowser x:Name="WebBrowser1"
                    Navigated="WebBrowser1_OnNavigated"
                    Grid.Row="1" />
    </Grid>
</Window>

Completare il gestore dell'evento LoadHtmlFileButton_OnClick nel file code-behind:

MainWindow.xaml.cs

using System;
using System.Windows;

namespace UsingHtml.Wpf
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void UseUrlButton_OnClick(object sender, RoutedEventArgs e)
        {
            // For HTML content hosted on the internet, use an absolute URI.
            WebBrowser1.Navigate(new Uri("https://docs.microsoft.com/learn/", UriKind.Absolute));
        }

        private void BackButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform backward navigation.
            if (WebBrowser1.CanGoBack)
            {
                // If we can go back, call the WebBrowser's GoBack() method.
                WebBrowser1.GoBack();
            }
        }

        private void ForwardButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Check if we can perform forward navigation.
            if (WebBrowser1.CanGoForward)
            {
                // If we can go forward, call the WebBrowser's GoForward() method.
                WebBrowser1.GoForward();
            }
        }

        // We can use the Navigated event to update the user interface with useful information.
        // We'll use it to update the back and forward buttons.
        private void WebBrowser1_OnNavigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
        {
            // Enable or disable the back button depending on whether the WebBrowser can go back.
            BackButton.IsEnabled = WebBrowser1.CanGoBack;

            // Enable or disable the forward button depending on whether the WebBrowser can go forward.
            ForwardButton.IsEnabled = WebBrowser1.CanGoForward;
        }

        private void LoadHtmlFileButton_OnClick(object sender, RoutedEventArgs e)
        {
            // Get the folder the application is installed to.
            string applicationDirectory = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase);

            // Combines the application path with the file name to get a complete file path.
            string filePath = System.IO.Path.Combine(applicationDirectory, @"LocalContent.html");

            // Use local HTML file for the WebBrowser control.
            WebBrowser1.Navigate(new Uri(filePath));
        }
    }
}

Il punto fondamentale è che non esiste alcuna differenza nell'uso del metodo Navigate per un file HTML offline e per un sito Web online. Uri specifica la posizione in cui WebBrowser può trovare il contenuto HTML.

Distribuire l'applicazione e testare le funzionalità HTML in locale

Quando l'applicazione viene aperta, selezionare Load local HTML file:

Selezionare Load local HTML file

Verrà visualizzato il codice HTML di cui è stato eseguito il rendering. Si noti che il controllo WebBrowser proteggerà l'utente disabilitando il codice JavaScript incorporato:

Codice HTML di cui è stato eseguito il rendering

Se si seleziona il banner, verrà visualizzato un menu di scelta rapida. Selezionare Consenti contenuto bloccato per abilitare JavaScript:

Consenti contenuto bloccato

A questo punto, è possibile selezionare click me! per eseguire il codice JavaScript. Questo pulsante aggiorna il testo del sottotitolo nella pagina Web:

Codice HTML dopo l'esecuzione di JavaScript

Si conclude così l'introduzione dell'uso di contenuto HTML in un'applicazione Windows nella piattaforma WPF.

Riepilogo

In questa unità si è appreso come usare contenuto HTML in un'applicazione desktop. È possibile passare all'unità successiva oppure provare la tecnologia per l'interfaccia utente che non è stata ancora sperimentata. Si noterà che UWP e WPF condividono numerose funzionalità, tra cui gli stessi linguaggi di markup e creazione del codice, quindi è possibile riutilizzare la maggior parte dei concetti appresi e determinare quale tecnologia si preferisce.