Adding ad controls to apps is a pretty common thing. Some apps have ads on every page of the app. Some apps only have ads on some pages. When you want to have ads on one page you have to manually add the control to each page. Wouldn’t it be cool to only add it once and it shows up on all of your pages? This is exactly what someone recently asked on Stack Overflow. This is possible to do and quite simple. First, add a new style to your App.xaml resources and name it AdPhoneApplicationFrameStyle.
<Style x:Key="AdPhoneApplicationFrameStyle" TargetType="toolkit:TransitionFrame">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PhoneApplicationFrame">
<Border x:Name="ClientArea" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Height="80" Width="480" Fill="Red" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the style I’ve added a new Rectangle to simulate our AdControl. The Rectangle has been placed inside a Grid in the second row which is oriented to the bottom. Next in the App.xaml.cs within the InitializePhoneApplication method, set the style on RootFrame object.
private void InitializePhoneApplication()
{
...
RootFrame = new TransitionFrame();
RootFrame.Style = (Style)Resources["AdPhoneApplicationFrameStyle"];
...
}
Now you always have that element for every page of your app!
That’s pretty cool, but what about doing page transitions? Hopefully you are putting page transitions into your app. This is still possible, but we need to change the style of the Frame to match the Frame being used. If you are using the Windows Phone Toolkit TransitionFrame, your style would change to the following.
<Style x:Key="AdTransitionFrameStyle" TargetType="toolkit:TransitionFrame">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:TransitionFrame">
<Border x:Name="ClientArea" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="FirstContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="SecondContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Height="80" Width="480" Fill="Red" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style uses the same approach to add the Rectangle by adding it to a second row in the grid. When using the WP Toolkit TransitionFrame, you need to change the code within the InitializePhoneApplication method to create a TransitionFrame rather than a PhoneApplicationFrame.
private void InitializePhoneApplication()
{
...
RootFrame = new TransitionFrame();
RootFrame.Style = (Style)Resources["AdTransitionFrameStyle"];
...
}
Now we have our persistent element and our page navigation; the best of both worlds!