Get Started

Build a simple web browser for Windows 10 IoT Core.

IoT Browser Sample

We’ll create a simple web browser application for your your Windows 10 IoT Core device.

This is a headed sample. To better understand what headed mode is and how to configure your device to be headed, follow the instructions here.

As this sample uses just standard Windows UWP features, it can also run on your desktop.

Load the project in Visual Studio

You can find the source code for this sample by downloading a zip of all of our samples here and navigating to the samples-develop\IoTBrowser. The sample code is C#. Make a copy of the folder on your disk and open the project from Visual Studio.

Deploy Your App

  1. With the application open in Visual Studio, set the architecture in the toolbar dropdown. If you're building for MinnowBoard Max, select x86. If you're building for Raspberry Pi 2, Raspberry Pi 3 or the DragonBoard, select ARM.
  2. Next, in the Visual Studio toolbar, click on the Local Machine dropdown and select Remote Machine</li>

  3. At this point, Visual Studio will present the Remote Connections dialog. If you previously used Powershell to set a unique name for your device, you can enter it here (in this example, we're using my-device).

    Otherwise, use the IP address of your Windows IoT Core device. After entering the device name/IP select Universal (Unencrypted Protocol) Authentication Mode, then click Select.

  4. You can verify or modify these values by navigating to the project properties (select Properties in the Solution Explorer) and choosing the Debug tab on the left:

When everything is set up, you should be able to press F5 from Visual Studio. The IoT Browser app will deploy and start on the Windows IoT device.

Let’s look at the code

The code for this sample is pretty simple:

  • An embedded webview control
  • TextBox as address bar
  • Go button to start navigation
  • And three favorites buttons

When the go button is pressed, we call a web navigation helper method to do the actual navigation.

UX code

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <RowDefinition Height="65"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="65"></RowDefinition>

    <!--Address bar-->
    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <TextBox x:Name="Web_Address" FontSize="24" TextWrapping="Wrap" Text="" VerticalAlignment="Center" VerticalContentAlignment="Center" Height="54" Width="958" KeyUp="Web_Address_KeyUp"/>
        <Button x:Name="Go_Web" Content="Go!" HorizontalAlignment="Right" VerticalAlignment="Center" Height="60" Width="107" Click="Go_Web_Click"/>

    <!--Web view control-->
    <WebView x:Name="webView" Grid.Row="1"/>

    <!--Favorites buttons-->
    <StackPanel Grid.Row="2" Orientation="Horizontal" >
        <Button x:Name="Go_WOD" VerticalAlignment="Center" HorizontalAlignment="Center" Height="60" Width="120" Margin="0,0,15,0" Click="Go_WOD_Click">
            <TextBlock Text="Windows on Devices" TextWrapping="Wrap"/>
        <Button x:Name="Go_Hackster" Content="" VerticalAlignment="Center" Height="60" Width="120" Margin="0,0,15,0" Click="Go_Hackster_Click"/>
        <Button x:Name="Go_GitHub" Content="" VerticalAlignment="Center" Height="60" Width="120" Margin="0,0,15,0" Click="Go_GitHub_Click"/>

DoWebNavigate navigation helper method

This helper uses the WebView.Navigate method with the value currently in the Web_Address.Text

DoWebNavigate code

if (Web_Address.Text.Length > 0)
    webView.Navigate(new Uri(Web_Address.Text));

Favorites buttons

The three favorites simply fill the address bar text with a preconfigured value then call the DoWebNavigate helper.

Favorite code

private void Go_Hackster_Click(object sender, RoutedEventArgs e)
    Web_Address.Text = "";

Was this page helpful?
Additional feedback?
Thank you! We appreciate your feedback.
Follow us