Bien intégrer le controle de régie publicitaire AdControl de Microsoft dans son application Windows Phone

ERRATUM : La modification de la taille et de l’opacité du control AdControl est interdit dans son cadre légale d’utilsation. Cet article ne peut donc être pris en compte pour le design de votre application Windows Phone :(

Le AdControl, controle disponible nativemment dans la toolbox depuis le dernier SDK Mango, vous permet d’ajouter des publicité à votre application;
Ces publicités sont, bien entendu, rémunerer. Alors pourquoi s’en priver !

Rendez vous donc sur https://pubcenter.microsoft.com pour s’inscrire !
Une fois membre vous devrez choisir la taille de votre bannière et vous obtiendrez 2 ids (applications et bannières).
Ces deux ids devront être remplis dans ApplicationId pour l’application et AdUnitId pour la bannière.

<my:AdControl Width="480" Height="80" VerticalAlignment="Bottom" Name="adControl1" ApplicationId="moncodeAppli" AdUnitId="monCodeBannière">
</my:AdControl>
Mon control disparait !

Il est extrêmement important de vérifier la taille de votre bannière.
Le controle doit imérativement avoir une taille équivalente à celle de la banière indiqué dans le pubcenter : soit 480 x 80 ou 300×50.

<my:AdControl Width="480" Height="80" VerticalAlignment="Bottom" Name="adControl1" ApplicationId="moncodeAppli" AdUnitId="monCodeBannière">
</my:AdControl>

Dans le cas contraire vous pourriez vous retrouver dans la situation mentionnée dans le titre de ce paragraphe : un controle qui apparait puis qui disparait quelques secondes après !

Comment retailler votre controle alors ?

Puisque sa taille ne peut pas bouger, nous allons la modifier virtuellement en utilisant sa propriété RenderTransform :

<my:AdControl Width="480" Height="80" VerticalAlignment="Bottom" Name="adControl1" ApplicationId="moncodeAppli" AdUnitId="monCodeBannière">
   <my:AdControl.RenderTransform>
      <CompositeTransform ScaleX="0.95" ScaleY="0.95"></CompositeTransform>
   </my:AdControl.RenderTransform>
</my:AdControl>

Evidemment, on ne peut pas utiliser le layout correctement et le positionnement reste délicat.
Il faudra donc prévoir de sortir complétement le AdControl de son layout courant (le mettre dans un Grid à part par exemple) afin de le positionner grossièrement plus facilement puis plus finement via la propriété TranslateX du CompositeTransform (oublié le Margin horizontal sous peine de coupé votre controle).

<Grid>
  <my:AdControl Width="480" Height="80" VerticalAlignment="Bottom" Name="adControl1" ApplicationId="moncodeAppli" AdUnitId="monCodeBannière">
    <my:AdControl.RenderTransform>
       <CompositeTransform ScaleX="0.95" ScaleY="0.95" TranslateX="12"></CompositeTransform>
    </my:AdControl.RenderTransform>
  </my:AdControl>
</Grid>
Poussons l’intégration

Afin d’intégrer encore mieux notre AdControl dans notre application, nous allons utiliser sa propriété Opacity.
Si nous l’affectons directement sur le controle cela fonctionne parfaitement jusqu’à sa première utilisation : son contenu ne prend pas en compte l’opacité.

Pour contrer cet effet on peut gérer l’opacité sur l’ancêtre du controle (ici un Grid) :

<Grid Opacity="0.5">
  <my:AdControl Width="480" Height="80" VerticalAlignment="Bottom" Name="adControl1" ApplicationId="moncodeAppli" AdUnitId="monCodeBannière">
    <my:AdControl.RenderTransform>
       <CompositeTransform ScaleX="0.95" ScaleY="0.95" TranslateX="12"></CompositeTransform>
    </my:AdControl.RenderTransform>
  </my:AdControl>
</Grid>

Cela fonctionne parfaitement maintenant !

leave your comment