WPF – Float Buttons Over Web Browser Control

refs:

https://karlshifflett.wordpress.com/2009/06/13/wpf-float-buttons-over-web-browser-control/

fuck gfw

WPF – Float Buttons Over Web Browser Control

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.

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.