Ad-Rotator en Silverlight

Thursday, February 19, 2009

Voy a mostrarles de que manera podemos utilizar el control Ad-Rotator, desarrollado por la gente de Synergist, que permite de manera fácil agregar publicidad hecha en Silverlight.

Este control permite visualizar publicidad en imágenes, video o hecha en XAML.

1) Vamos a tener que descargar el código fuente del control aquí.

2) Agregamos la referencia en Visual Studio y Expression Blend a AdRotatorLibrary\Bin\Release\AdRotatorLibrary.dll

3) Agregamos en nuestro XAML el control a utilizar

     
<UserControl x:Class="SilverlightApplication1.Page"
    
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    
    xmlns:ar="clr-namespace:Synergist;assembly=AdRotatorLibrary"
    
    Width="400" Height="482">
    
    <Grid x:Name="LayoutRoot" Background="Azure">
    
        <ar:AdRotator Format="HalfBanner" Source="../Ad-HalfBanner.xml" 
    
                      Margin="78,149,0,0" Width="125" Height="125" 
    
                      HorizontalAlignment="Left" VerticalAlignment="Top"/>
    
        <ar:AdRotator Format="Button" Source="../Ad-Button.xml" 
    
                      Margin="133,8,142,0" VerticalAlignment="Top" 
    
                      Height="125"/>
    
        <ar:AdRotator Format="VerticalBanner" Source="../Ad-VerticalBanner.xml" 
    
                      Height="125" Margin="138,0,142,9" VerticalAlignment="Bottom" 
    
                      Width="125"/>
    
    </Grid>
    
</UserControl>

Vamos a utilizar en este ejemplo 3 tipos de banner, Button (125x125), HalfBanner (234x60) y VerticalBanner (40x120).

Desde Expression Blend vemos que tenemos varias propiedades que podemos cambiar, entre las que se encuentra el tipo de banner que vamos a necesitar.

4) El control tiene una propiedad Source que indica el XML que contiene la información del banner a mostrar. Este XML tiene el formato de la clase ASP.net AdRotator.

    
<?xml version="1.0" encoding="utf-8" ?>
    
<Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Advertisement-File-1.2">
    
  <Ad xmlns="">
    
    <ImageUrl>http://img.timeinc.net/time/photoessays/2008/travel_touts/125_london_tout.jpg</ImageUrl>
    
    <Height>125</Height>
    
    <Width>125</Width>
    
    <NavigateUrl>http://www.silverlight.net</NavigateUrl>
    
    <AlternateText>Prueba de AdRotator - Button</AlternateText>
    
    <Keyword>Silverlight</Keyword>
    
    <Impressions>1</Impressions>
    
  </Ad>  
    
</Advertisements>

    
<?xml version="1.0" encoding="utf-8" ?>
    
<Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Advertisement-File-1.2">
    
  <Ad xmlns="">
    
    <ImageUrl>http://www.wolfgangsvault.com/content/images/affiliates/special/234x60-stones.jpg</ImageUrl>
    
    <Height>60</Height>
    
    <Width>234</Width>
    
    <NavigateUrl>http://www.silverlight.net</NavigateUrl>
    
    <AlternateText>Prueba de AdRotator - HalfBanner</AlternateText>
    
    <Keyword>Silverlight</Keyword>
    
    <Impressions>1</Impressions>
    
  </Ad>  
    
</Advertisements>

    
<?xml version="1.0" encoding="utf-8" ?>
    
<Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Advertisement-File-1.2">
    
  <Ad xmlns="">
    
    <ImageUrl>http://4.bp.blogspot.com/_tO4_8Rd6yaY/SBcXJ6kPjII/AAAAAAAAAdM/7Z5dkDB5Cro/s400/ghosts_120x240_1.jpg</ImageUrl>
    
    <Height>120</Height>
    
    <Width>40</Width>
    
    <NavigateUrl>http://www.silverlight.net</NavigateUrl>
    
    <AlternateText>Prueba de AdRotator - VerticalBanner</AlternateText>
    
    <Keyword>Silverlight</Keyword>
    
    <Impressions>1</Impressions>
    
  </Ad>  
    
</Advertisements>

5) Al ejecutar la aplicación vemos que tenemos las distintas publicidades utilizando Silverlight

Para más información visiten la página del control en MSDN Code aquí.

No Comments