WPF – Float Buttons Over Web Browser Control

Kiosk

Above is a kiosk full screen capture.  Button panel is floating on top of the WebBrowser control. 

Introduction

We had just finished the Chicago WPF for Line of Business Training Tour and were having refreshments during which, the conversation somehow turned to the question, “how can I float buttons on top of the WebBrowser control?

It is a well know fact that WPF cannot render UIElements on top of the  WebBrowser control.  (see WPF Interoperation: Airspace and Window Regions Overview)

The developer I was speaking to had a WPF kiosk application that ran a combination of HTML and 3rd party Flash animations.  Since their application ran in a kiosk with smaller screens, they needed to be able to float WPF Button controls on top of the WebBrowser control as opposed to giving up some space on one of the edges for their buttons.

Karl being Karl, jump in with both feet and stated with authority, “of course you can do that.”  (Now I had to man-up and figure this out!)

After a few hours of developers talking shop, I headed up to the hotel room and wrote this application.

Application

The application consists of a single border-less, maximized Window.  The WebBrowser controls stretches to automatically consume all available screen space.

The below Button bar is a Border control that wraps the four buttons.  The buttons are all bound to commands that automatically take care of enabling and disabling the buttons.

Buttons

Notice that the Border is transparent  The blue border is just to show the outline for this article.  You can easily modify the layout of the Border’s contents.

You can also see when the application first loads, the Back and Forward buttons are disabled.  After the user navigates, the buttons will be enabled and disabled just like your Internet browsers are.  The Home button will take you to my blog, the Exit button will close the application.

<Grid>
  <WebBrowser x:Name="wbBrowser" />

  <Popup x:Name="puOverlay" AllowsTransparency="True" Placement="Bottom" 
         PlacementTarget="{Binding ElementName=wbBrowser}">
    <Border x:Name="bdrOverLay" CornerRadius="30" BorderBrush="Blue" 
            Background="#1F000000" Padding="7" BorderThickness="2">
      
      <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
          <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="75" />
            <Setter Property="Margin" Value="3.5" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
          </Style>
        </StackPanel.Resources>
        <Button Command="NavigationCommands.BrowseBack" Content="Back" />
        <Button Command="NavigationCommands.BrowseForward" Content="Forward" />
        <Button Command="NavigationCommands.BrowseHome" Content="Home" />
        <Button Command="ApplicationCommands.Close" Content="Exit" />
      </StackPanel>
      
    </Border>
  </Popup>
</Grid>

The above XAML shows the WebBrowser and a single Popup control.  The Popup control will render on top of the WebBrowser control because it displays in its own Window.  Using some simple positioning code in the Window Loaded event, positions the Button bar centered at the bottom.  You can position the Button bar anywhere.

This application allows the kiosk user to interact with the web page and the Button bar using touch screen technology without giving up screen space along one of the edges.

Special Note

To the developers I was speaking to at the watering hole that night, I hope this meets your application requirements.

Download

After downloading you must change the file extension from .doc to .zip.  This is a requirement of WordPress.com

Source Code (25KB)

Have a great day,

Just a grain of sand on the worlds beaches.

4 Responses to WPF – Float Buttons Over Web Browser Control

  1. jonathandbailey says:

    Hi Karl,

    I am currently working on an application that uses your technique – WPF Popup over a Web Browser control – to solve air space problems. I need to stretch the overlay over my web browser which is at W1920 * H1080 but I cannot get my popup to size to W1920 * H1080. The bottom section of the popup will not show and I cannot size height to 1080.

    Have you encountered this problem? and do you have a solution to it?

    Thanks for your help.
    Jonathan

    • Jonathan,

      Not sure and have not tried setting a popup that large.

      Have you tried playing with the offsets? Maybe making it larger and setting offsets may help.

      Cheers,

      Karl

  2. koreabyyam says:

    Hi Karl,

    I was trying to do this for my WPF project but it’s not working. I’m guessing it’s because we’re using xbap and we’re in partial trust. Therefore, we can’t use Windows. Is that true?

    Thanks,
    Ziyan

Follow

Get every new post delivered to your Inbox.

Join 248 other followers