Integrating AdDuplex Silverlight control into your Windows Phone 7 application is really simple. This tutorial will go through the steps of integrating AdDuplex ad control into a fictional application.
Our Initial App
Here’s what our initial application looks like:
It’s a simple application with all the traditional WP7 app attributes at the top and scrollable content area filling the rest of the screen. Essentially it’s a 2 row Grid with header part placed in the first row (0) and content in the second (1).
Here’s the XAML for our initial page:
What we want to do is place AdDuplex ad control at the bottom of this page.
Add a Reference to AdDuplex Assembly
We will be using Expression Blend in this tutorial and accomplish everything without switching to XAML view. That said you can obviously do all of this in Visual Studio and XAML.
First you’ll need to download AdDuplex Ad Control for Silverlight distribution archive and extract it to a folder of your choice. The contents of the folder should look something like this:
Now we go to the Project menu in Blend and select “Add Reference…”
In the “Add Reference” dialog just navigate to the directory where you’ve extracted AdDuplex distribution archive and select AdDuplex.AdControl.Silverlight.dll
The reference to the AdDuplex assembly is added to your project.
Preparing a Place for the Control
We need to adjust our page layout so we can place the AdDuplex control without affecting usability of our app.
To do that we are going to add an additional row to our layout Grid and set it’s Height to Auto.
As you can see Blend still stretches our content area over both rows. It did this by setting RowSpan of the content panel to 2:
We Reset it back to 1 and we have our content panel adjusted to our new layout:
And the place for our ad control is prepared.
Placing Control on the Page
Now we just need to place the ad control into that place.
In Expression Blend toolbar click the Assets button:
In the assets window start typing “adcontrol” and the list will be filtered to AdDuplex AdControl:
Select the control and then double-click in the toolbar:
The control is inserted into the page:
Now we just need to move it into position:
Note: make sure you place the control into a container that has no margin or padding on the sides. The control is designed to occupy the whole width of the page (480 pixels).
Now we just need to configure the control to serve ads for our app and we are good to go.
Configuring AdDuplex AdControl
When you register your application in AdDuplex system it gets an internal identifier called AppId. You can see the AppId for your app in the AdDuplex client area. We just need to set that AppId value to AppId property of the AdControl.
Select AdDuplex AdControl in Blend. In the Properties pane (usually on the right) type “AppId” into a search box:
Enter your app’s AppId into the field and you are set. Now when we run our app it works as before and AdDuplex AdControl is nicely incorporated.
Here’s the resulting XAML for our final app:
P.S.: Testing Your Own Ad
You can test how your own AdDuplex Ad Exchange ad looks in an app by setting IsTest property of the control to true: