Implementing Ads on any page in your Windows 8 XAML app–part 2

In my previous article, you saw how you can start implementing ads on some of the page templates. In this one, we’ll see how we can add something called ‘interstitial ads’ – ads that appear as part of the content in your app.

I have added a Grouped Items page to my project. My data model is set to show a few appliances. I have a BaseModel class and the ApplianceModel that inherits the BaseModel class has two properties to represent an appliance. The ProductHolder acts as a container for a list of base models.

   1:  public class BaseModel
   2:  { }
   3:   
   4:  public class ApplianceModel : BaseModel
   5:  {
   6:      public string Title { get; set; }
   7:      public string ImagePath { get; set; }  
   8:  }
   9:   
  10:  public class ProductHolder
  11:  {
  12:      public string Category { get; set; }
  13:      public List<BaseModel> Models { get; set; }
  14:  }

For the purpose of demonstration, I’m populating a static list of items to be shown on the page.

   1:  protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
   2:  {
   3:      List<ProductHolder> products = GetProducts();
   4:      this.DefaultViewModel["Groups"] = products;
   5:  }
   6:   
   7:  private List<ProductHolder> GetProducts()
   8:  {
   9:      ProductHolder productHolder = new ProductHolder();
  10:      productHolder.Category = "Appliances";
  11:      productHolder.Models = new List<BaseModel>();
  12:      productHolder.Models.Add(new ApplianceModel
  13:      {
  14:          Title = "Refrigerator", ImagePath = "Assets/Refrigerator.jpg",
  15:      });
  16:   
  17:      productHolder.Models.Add(new ApplianceModel
  18:      {
  19:          Title = "Heaters", ImagePath = "Assets/Heaters.jpg",
  20:      });
  21:   
  22:     // a few more appliances likewise...
  23:   
  24:      List<ProductHolder> products = new List<ProductHolder>();
  25:      products.Add(productHolder);
  26:   
  27:      return products;
  28:  }

I have created a custom (simpler) template – NormalTemplate to display the details of the model in question.

   1:  <GridView
   2:      x:Name="itemGridView"
   3:      AutomationProperties.AutomationId="ItemGridView"
   4:      AutomationProperties.Name="Grouped Items"
   5:      Grid.RowSpan="2"
   6:      Padding="116,137,40,46"
   7:      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
   8:      ItemTemplate="{StaticResource NormalTemplate}"
   9:      SelectionMode="None"
  10:      IsSwipeEnabled="false">
  11:  <!-- rest of the code is removed for brevity-->

When the app is run, I see the below rendering for my screen resolution. If you want more details on how to get to this stage, see here.

image

Let’s go ahead and introduce ads now. I create a class called AdModel inheriting our good ol’ BaseModel. There is no need for any properties, so I’ll leave this class empty.

   1:  public class AdModel : BaseModel
   2:  { }

In the GetProducts method, I’m going to add a couple these AdModel instances in the collection.

   1:  productHolder.Models.Add(new ApplianceModel
   2:  {
   3:      Title = "Refrigerator", ImagePath = "Assets/Refrigerator.jpg",
   4:  });
   5:   
   6:  productHolder.Models.Add(new AdModel());
   7:   
   8:  productHolder.Models.Add(new ApplianceModel
   9:  {
  10:      Title = "Heaters", ImagePath = "Assets/Heaters.jpg",
  11:  });
  12:   
  13:  productHolder.Models.Add(new ApplianceModel
  14:  {
  15:      Title = "Dishwasher", ImagePath = "Assets/Dishwasher.jpg",
  16:  });
  17:   
  18:  productHolder.Models.Add(new AdModel());
  19:   
  20:  productHolder.Models.Add(new ApplianceModel
  21:  {
  22:      Title = "Vacuum", ImagePath = "Assets/vacuum.jpg",
  23:  });
  24:   
  25:  productHolder.Models.Add(new ApplianceModel
  26:  {
  27:      Title = "Washer", ImagePath = "Assets/Washer.jpg",
  28:  });

You can see lines 6 and 18 where I’m adding a couple of the AdModel instances. I’ll also create the template that should be used to render ads. Make sure you add a reference of Microsoft Ad library to the ResourceDictionary something like xmlns:UI="using:Microsoft.Advertising.WinRT.UI".

   1:  <DataTemplate x:Key="AdTemplate">
   2:      <Grid Width="250" Height="250">
   3:          <UI:AdControl 
   4:              ApplicationId="d25517cb-12d4-4699-8bdc-52040c712cab"
   5:              AdUnitId="10043107"
   6:              Width="250" Height="250" />
   7:      </Grid>
   8:  </DataTemplate>

We now need some kind of a template selector that decides, at runtime, what data template should be used to render a particular type of data. The DataTemplateSelector is used specifically for this purpose. I will add a class named CustomTemplateSelector.

   1:  using Windows.UI.Xaml;
   2:   
   3:  public class CustomTemplateSelector : DataTemplateSelector
   4:  {
   5:      public DataTemplate NormalTemplate { get; set; }
   6:      public DataTemplate AdvertTemplate { get; set; }
   7:   
   8:      protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
   9:      {
  10:          if (item is AdModel)
  11:          {
  12:              return AdvertTemplate;
  13:          }
  14:          return NormalTemplate;
  15:      }
  16:  }
 

There are two properties that represent the two data templates that we have created. The SelectTemplateCore method takes in the item that needs to be rendered and all I’m doing here is to say, if the item is of type AdModel, render using the value in the AdvertTemplate property.

Now for the last step, where you set the CustomTemplateSelector as the item template selector in the GridView.

   1:  <GridView
   2:      x:Name="itemGridView"
   3:      AutomationProperties.AutomationId="ItemGridView"
   4:      AutomationProperties.Name="Grouped Items"
   5:      Grid.RowSpan="2"
   6:      Padding="116,137,40,46"
   7:      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
   8:      SelectionMode="None"
   9:      IsSwipeEnabled="false">
  10:      <GridView.ItemTemplateSelector>
  11:          <local:CustomTemplateSelector 
  12:              AdvertTemplate="{StaticResource AdTemplate}" 
  13:              NormalTemplate="{StaticResource NormalTemplate}"/>
  14:      </GridView.ItemTemplateSelector>

Here are the changes from the previous version. The ItemTemplate property is removed and  GridView.ItemTemplateSelector is added. I am referencing the CustomTemplateSelector and populating the AdvertTemplate and the NormalTemplate with the data template keys. So the AdvertTemplate property is set to AdTemplate and the NormalTemplate property is set to the NormalTemplate data template.

The app gets rendered as below now.

image

So there you go, the 2nd and the 5th position are showing ads on the page. You can use the same technique to add interstitial ads in other pages like Split page, Items page and Group details page.

No Comments