AdDuplex ad control allows the developers to implement ad removal buttons. These can be beneficial in a number of ways – in terms of both customer satisfaction and monetary gain. For example, developers often employ a freemium monetization model where users are offered to buy an ad free version of the app.

Normally the ad control checks whether it is covered by other elements, but there is an exception. Some space on the top-right corner of the control is dedicated for your button.  You can see it in the Visual Studio or Expression Blend Designer view if you set the IsTest property to True.

There are a few caveats with the actual button implementation. Windows Phone Silverlight apps are a breeze to work with in this regard, because of how it manages pixels. In Universal Apps it’s a lot more complicated (not for long though).

We will demonstrate how to do it properly. For the sake of simplicity our ad removal button is going to be represented by a red rectangle. Following are two solutions, each for it’s own platform.

For Windows Phone Silverlight apps

This is the easier of the two. You get a 40x40px gap. Just put your button in it. 

1. Set IsTest to true

   1: <ad:AdControl IsTest="True"/>

2. Using the Visual Studio Designer as your guide position your button where you want it. Make sure you leave out the green area. If you fail to do that, the ad control will complain about it being covered and will not log impressions.

For Universal Apps

Sizing in Universal apps is trickier because of the use of effective resolution. Width and height no longer is represented in mere raw pixels. If you would set your ad removal button statically, it would not behave identically on all devices. You have to be more dynamic in Universal apps. Here is how:

1. Put both ad control and the button in a Grid panel. Bind Width and Height properties of the grid to those of the ad control (since it will resize dynamically). Align the button to the top-right corner of the grid.

<Grid x:Name="advertisingGrid" 

      Width="{Binding ElementName=adControl, Path=ActualWidth}"

      Height="{Binding ElementName=adControl, Path=ActualHeight}">

    <ad:AdControl x:Name="adControl"/>

    <Rectangle x:Name="closeButton" 

               Fill="Red"

               HorizontalAlignment="Right" VerticalAlignment="Top"/>

</Grid>

2. In code behind add the following method. It will calculate the proper button size.

private Size GetCloseButtonSize()

{

    var bounds = Windows.UI.Xaml.Window.Current.Bounds;

    var orientation = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().Orientation;

    var result = new Size();

    switch (orientation)

    {

        case Windows.UI.ViewManagement.ApplicationViewOrientation.Landscape:

            result.Width = bounds.Height;

            result.Height = bounds.Width;

            break;

        case Windows.UI.ViewManagement.ApplicationViewOrientation.Portrait:

            result.Width = bounds.Width;

            result.Height = bounds.Height;

            break;

        default:

            result.Width = bounds.Width;

            result.Height = bounds.Height;

            break;

    }

    result.Height = result.Width / 6.0f;

    result.Height = 35.0f * result.Height / 80.0f;

    result.Width = 35.0f * result.Width / 480.0f;

    return result;

}

3. In the constructor, after this.InitializeComponent() is called, use the GetCloseButtonSize() method to resize your button:

var closeButtonSize = GetCloseButtonSize();

this.closeButton.Height = closeButtonSize.Height;

this.closeButton.Width = closeButtonSize.Width; 

That’s it.

We’ve addressed the issue that this is more complex than it could be. A better solution is in the making along with more new features that we are very excited about.