Exercise 2: Detect if running out of Browser

Since there are many features that aren’t available in browser, such as the WebBrowser control, you will need to be able to detect which context, desktop or browser, the application is currently running under. This exercise shows how to detect if your application is installed, displays a custom prompt asking the user to install you app, and finally how to install from a Button.

1. Locate and open the InstallPrompt.xaml file. This UserControl will load if the application is run in the Browser. Before determining the context of where the browser is being run, we are going to toggle between two states based on if the application is already installed. The below screenshot shows the two states:

   Figure 1

   Screenshot Example

2. In InstallPrompt.xaml.cs we are going to toggle the Visibility of both the InstallPanel and AlreadyInstalledPanel, previously defined in the XAML. The property Application.Current.InstallState contains what state the application is in. If it’s installed, the value is InstallState.Installed. Other possible values could be InstallState.NotInstalled, InstallState.Installing, or InstallState.Failed.
3. In the constructor register the loaded event. In the Loaded event handler check to see if the InstallState is equal to InstallState.Installed. If true, then display the message indicating the application has already been installed, otherwise show the install button

   C#

   public partial class InstallPrompt : UserControl { public InstallPrompt() { InitializeComponent(); this.Loaded += new RoutedEventHandler(InstallPrompt_Loaded); } void InstallPrompt_Loaded(object sender, RoutedEventArgs e) { if (Application.Current.InstallState == InstallState.Installed) { InstallPanel.Visibility = Visibility.Collapsed; AlreadyInstalledPanel.Visibility = Visibility.Visible; } else { InstallPanel.Visibility = Visibility.Visible; AlreadyInstalledPanel.Visibility = Visibility.Collapsed; } } }

   Visual Basic

   Partial Public Class InstallPrompt Inherits UserControl Public Sub New() InitializeComponent() AddHandler Loaded, AddressOf InstallPrompt_Loaded AddHandler InstallButton.Click, AddressOf InstallButton_Click End Sub Private Sub InstallPrompt_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) If Application.Current.InstallState = InstallState.Installed Then InstallPanel.Visibility = Visibility.Collapsed AlreadyInstalledPanel.Visibility = Visibility.Visible Else InstallPanel.Visibility = Visibility.Visible AlreadyInstalledPanel.Visibility = Visibility.Collapsed End If End Sub End Class

4. In the InstallPrompt.xaml.cs, add an event handler for the InstallButton’s Click event. Here we’ll call Application.Current.Install() which brings up the installation prompt

   C#

   private void InstallButton_Click(object sender, RoutedEventArgs e) { Application.Current.Install(); }

   Visual Basic

   Private Sub InstallButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Application.Current.Install() End Sub
   Figure 2

   Add event for install Application

   Now that we have the InstallPrompt.xaml.cs or InstallPrompt.xaml.vb checking whether or not to prompt the user to install the application and installing if not currently installed, let’s turn our attention to detecting what context the application is running in. What we want is if the application is in a web browser we want to show the InstallPrompt screen, otherwise we should show the MainPage. The way we’re going to do it is by changing the RootVisual based on if the Application is running out of the Browser.

5. Open App.xaml.cs. Find the Startup event and replace the current method with the below code. Here we’re checking to see if the Application.Current.IsRunningOutOfBrowser is true. If it’s not then we set the RootVisual to the InstallPrompt.

   C#

   private void Application_Startup(object sender, StartupEventArgs e) { if (Application.Current.IsRunningOutOfBrowser) { this.RootVisual = new MainPage(); } else { this.RootVisual = new InstallPrompt(); } }

   Visual Basic

   Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs) If Application.Current.IsRunningOutOfBrowser Then Me.RootVisual = New MainPage() Else Me.RootVisual = New InstallPrompt() End If End Sub

6. We’re all set. Set the Web project to the Startup project and run the project. You should see the InstallPrompt asking you to install.

   Figure 3

   Install appliction

7. After clicking OK, you application will open in a new Window. Notice we see the MainPage and not the InstallPrompt? This is due to the logic we added in the Startup event of App.xaml.cs or App.xaml.vb.

   Figure 4

   MainPage example