Unified Ad for Windows Phone - Part 4 - GenericAdProviderForXaml

Alright, we have signed up to a lot of Ad Providers in Part 1, setup the Unified Ad control in Part 2 and even implemented the Remote Ad Provider configuration in Part 3. What’s next?

The Generic Ad Provider for Xaml

Think of the Generic Ad Provider as a very simple AdProvider. It can show Xaml and that’s basically it. You could use this Ad Provider for example to market your own applications within your own applications. So a piece of Xaml with a little bit of text and an HyperlinkButton that links to a Uri. And after a minute the Ad Provider will rotate to the next Ad Provider. The Xaml can be much more complex, we will come up to that in a moment. But first see a small example Ad in Xaml.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      Width="480"
      Height="80"
      Background="{StaticResource PhoneBackgroundBrush}">
    <Border BorderBrush="{StaticResource PhoneAccentBrush}"
            BorderThickness="1">
        <Grid>
            <TextBlock Text="WP Unified Ad"
                       Foreground="{StaticResource PhoneAccentBrush}" Margin="0"
                       VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>
            <HyperlinkButton NavigateUri="http://wpunifiedad.codeplex.com"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch">
            </HyperlinkButton>
        </Grid>
    </Border>
</Grid>

Where do we put the Xaml?

Ideal it would be on a remote server. But if you don’t have the remote server or you want to have a fallback ad in case the remote server isn’t available you can use the OfflineContent property of the GenericAdProvider.

If you do have the remote server you can set the XamlUri property to the remote Url. In case you want to some more intelligent stuff, like a special ad for each country, or making sure you do something special for the current application, you can make use of the format parameters. The first {0} argument will be replaced by the ApplicationID and the second {1} argument will be replace by the CountryCode. So let’s say I have a server app that returns ads for me, my XamlUri could be configured like this:

http://someurlontheinternet.com/ProvideAd?Country={1}&AppId={0}

If you don’t need one or both arguments you could omit them off course.

Using Phone Styles

If you want to make sure that the advertisements have the same color palette as the Phone settings you can even make use of the usual Phone Resources. Like this example where the Background is set to the PhoneBackgroundBrush and the Border and Text to the PhoneAccentBrush.

<Grid Width="480"
        Height="80"
        Background="{StaticResource PhoneBackgroundBrush}">
    <Border BorderBrush="{StaticResource PhoneAccentBrush}"
            BorderThickness="1">
        <Grid>
            <TextBlock Text="WP Unified Ad"
                        Foreground="{StaticResource PhoneAccentBrush}"
                        Margin="0"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        FontSize="35" />
        </Grid>
    </Border>
</Grid>

How to add links

The easiest way to add a link is to put a HyperlinkButton on top of the full Xaml. You don’t have to give it a visual appearance as long as you make it stretch to the full Ad space. Put the Uri you want to link to in the NavigateUri. What? Yes put the Uri in the NavigateUri. But won’t that only work for navigation inside the application, from page to page? Yes but this is improved navigation.

  • http://anythingontheweb.com” and “https://anythingontheweb.com” will start the WebBrowserTask
  • “marketplace://search/some content” will start the MarketplaceSearchTask with “some content” as query.
  • “marketplace://review” will start the MarketplaceReviewTask for the current application.
  • “marketplace://detail” will start the MarketplaceDetailTask for the current application.
  • “marketplace://detail/5f171b43-6ea8-e011-a53c-78e7d1fa76f8” will start the MarketplaceDetailTask for the application with the mentioned ID.

This will enable you to create simple ads that show a webpage. But if you want more, like for example market your other apps you can do this as well.

Complex Ads

I’m not the best designer, but I know a little about Xaml. So I was interested to see if I could get a more complex Ad working. The below Ad for example has a Storyboard attached that changes the opacity of two elements. Sounds easy, it is easy. Just think about what more nice things you can do instead.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="480"
      Height="80"
      Background="{StaticResource PhoneBackgroundBrush}">
	<Grid.Resources>
		<Storyboard x:Name="Storyboard" AutoReverse="True" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="One">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Two">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Grid.Resources>
    <Border BorderBrush="{StaticResource PhoneAccentBrush}"
            BorderThickness="1">
        <Grid>
            <Grid x:Name="One">
        		<TextBlock Text="WP Unified Ad"
        			Foreground="{StaticResource PhoneAccentBrush}" Margin="0"
        			VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>
        	</Grid>
            <Grid x:Name="Two" Opacity="0">
            	<TextBlock Text="by Mark Monster"
            		Foreground="{StaticResource PhoneAccentBrush}" Margin="0"
            		VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>
            </Grid>
            <HyperlinkButton NavigateUri="http://wpunifiedad.codeplex.com"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"/>
        </Grid>
    </Border>
</Grid>
Gravatar