DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How to Deal with WebView and Overlaying Elements in Windows 8

Matteo Pagani user avatar by
Matteo Pagani
·
Dec. 11, 12 · Interview
Like (0)
Save
Tweet
Share
6.54K Views

Join the DZone community and get the full member experience.

Join For Free

the webview control is very useful to display html pages and elements into a windows store application. for example, i use in my blog’s application to display the content of a post, formatted to be easily read on a tablet using the instapaper engine.

if you have played a bit with the webview control you would have find that it has a particular behavior: no matter how many xaml controls you are going to place over the webview, they will always be displayed below the view. this is not a bug, but a specific security feature: since in the past developers were able to do dirty tricks by simply placing an hidden web view and by executing dangerous javascript code in the back, microsoft has chosen not to allow this anymore. no matter how many efforts you’ll spend trying to find a workaround, you won’t be able to place a webview below another control (neither fully or partial).

during the development of my blog’s application this security feature caused me some troubles: in the latest version i’ve developed i’ve added support both for italian and english. the application automatically sets the correct language according to the language of the operating system, but the user is able to change it from the settings panel. for this reason i’ve added an item in the settings panel called language: when the user taps on it, a flyout panel with two radio buttons is displayed.

the problem is that, if the user tries to change the language while he’s reading a post, the flyout goes behind the webview and he’s not able to fully see it. you can see what i’m talking about in the image below:

image

how to fix it? since, as i’ve already said, there’s absolutely no way to change the overlay of the webview control, the only available workaround is to hide the webview until the user has done interacting with the controls and the elements that are placed over it.

in my case, i needed to hide the webview every time the settings panel was displayed and to show it back as soon as the settings panel was closed. since there’s no way, within a windows store apps, to know when the charm bar is activated, we have to find another approach: by managing the page’s focus.

the page exposes two events, lostfocus and gotfocus : the first one is invoked when the current page lost its focus (because, for example, the user is interacting with the settings flyout), the second one instead when the focus is reassigned to the app.

you can subscribe to these two events in the xaml and, more precisely, in the page’s declaration, like in the following example:

<common:layoutawarepage
    x:name="pageroot"
    x:class="qmatteoq.com.views.detailpage"
    lostfocus="pageroot_lostfocus" gotfocus="pageroot_gotfocus">

once you’ve done it, you can mange these events in the code behind. in my case i simply change the webview’s control (which, in my app, is called postdetail ) visibility according to the focus:

private void pageroot_lostfocus(object sender, routedeventargs e)
{
    postdetail.visibility = visibility.collapsed;
}
 
private void pageroot_gotfocus(object sender, routedeventargs e)
{
    postdetail.visibility = visibility.visible;
}

and here is the final result: when the settings panel is opened the webview is hided. plus, i’ve added a message to notify the user that the post is just hidden and that will reappear when the settings panel will be closed.

image

Element

Published at DZone with permission of Matteo Pagani, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Handling Virtual Threads
  • How to Use MQTT in Java
  • Using JSON Web Encryption (JWE)
  • (Deep) Cloning Objects in JavaScript

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: