Handling the AdControl with Flyout Settings Pages

By January 30, 2013.NET, C#, Fun, Microsoft

In my last blog post, Using Generic Attached Properties to Simplify Windows 8 Settings Charm Pages , I talked about how to easily add Settings Charm pages to any Windows 8 app. If your app happens to have an AdControl, you might have an issue that you need to handle. The issue is that AdControl is hosted in a WebView Control, which causes the control to always be on top. When flyout Settings Charm pages overlap AdControl elements you get unexpected behaviors. It’s a known issue but is easy to handle. I’ve updated the GitHub example to include a couple of AdControls on the main page to illustrate the problem. Start the app, open the Charm Bar, and select the Settings Charm. Select the “Flyout Test” option. You can see the problem with the bottom AdControl covering up the panel. The top AdControl illustrates that this problem can be handled.

AdControl has two important functions that allow you to gain control of it and resolve the issue.

  • Suspend() – Pauses the auto refresh of ad content and turns off the z-index function allowing your flyout pages to not get covered up.
  • Resume() – Resumes the auto refresh of the control.

To get these functions to work for you, you must handle the event of when flyout pages are selected and closed from the Settings Charm bar.

I added an event to my Generic Attached Property helper class, SettingsFlyoutInfoCollection, which I discussed in my last blog post called OnPopupChanged. This event gets triggered anytime any of the flyout pages that it manages gets shown or hidden. This makes it easy to call the Suspend() and Resume() functions at the correct time. Here is the code snippet of how we are handling the top AdControl in our updated example.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SettingsFlyoutInfoCollection collection = new SettingsFlyoutInfoCollection();
    collection.PopupChanged += collection_PopupChanged;
    collection.AddSettingsFlyoutInfo(typeof(SettingsFlyout), "FlyoutTestID", "Flyout Test", 500);
    SettingsFlyoutAttachedProperty.SetValue(this, collection);
}
  
void collection_PopupChanged(object sender, bool e)
{
    if (e)
    {
        ad1.Suspend();
    }
    else
    {
        ad1.Resume();
    }
}

 

Now you can put ads everywhere in your app and not have to worry about them covering up your settings pages.

The following two tabs change content below.