Scroll Over Ad Control - Windows Phone UWP - xaml

Question

I am using ad control in my xaml as below
<Page
x:Class="namespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:namespace"
xmlns:ViewModels="using:namespace.ViewModels"
xmlns:common="using:namespace.Classes"
xmlns:stringBind="using:namespace.Classes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:q42controls="using:Q42.WinRT.Controls"
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
Background="Gray"
mc:Ignorable="d">
<Page.Resources>
<ViewModels:ArticleViewModel x:Key="ViewModel" />
<DataTemplate x:Key="headerTest">
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
<StackPanel Margin="-15 0 -15 0">
<Grid>
<Image x:Name="PlaceHolderImage" Source="Assets/PlaceHolder.jpg"></Image>
<Image q42controls:ImageExtensions.CacheUri="{Binding ImageURL}" Tag="{Binding ImageURL}" Tapped="ImageView"></Image>
</Grid>
<StackPanel Background="White">
<TextBlock Text="{Binding UpdatedDate}" FontSize="15" HorizontalAlignment="Center"
VerticalAlignment="Center" Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 10 0 10"
FontFamily="{StaticResource ContentControlThemeFontFamily}"
Foreground="#777"></TextBlock>
<Border VerticalAlignment="Bottom" Height="1" Background="Black" Opacity="0.1">
</Border>
<TextBlock x:Name="HeadLine" Text="{Binding HeadLine}"
Margin="10 5 10 -5" TextWrapping="Wrap"
FontSize="{Binding HeadlineFontSize}" Foreground="Black"
FontFamily="{StaticResource HeadlineCommonFamiy}"
Pivot.SlideInAnimationGroup="GroupTwo"/>
<TextBlock Text="{Binding Abstract}" TextWrapping="Wrap" FontSize="{Binding AbstractFontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 5 10 10"
Foreground="#999"
FontFamily="{StaticResource AbstractCommonFamily}"/>
</StackPanel>
<StackPanel x:Name="descriptionSP" Background="White">
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-240,5,5"
Width="300"
ErrorOccurred="AdControl_ErrorOccurred"/>
<RichTextBlock IsTextSelectionEnabled="False" x:Name="richTextBlock"
local:Properties.Html="{Binding ArticleDetail}" TextWrapping="Wrap"
FontSize="{Binding FontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10,10,10,-20"
FontFamily="{StaticResource ContentControlThemeFontFamily}">
</RichTextBlock>
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-220,5,5"
Width="300" Loaded="AdControl_Loaded"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Foreground="Black" Background="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Share" Click="Share_Click" Label="Share">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Share.png" Height="30" Margin="0,-5,0,0"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Favorite" Name="favIcon" Click="Favorite_Click" Label="Favorite" Margin="0,-2,0,0"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="#f2f2f2" x:Name="grid">
<Grid x:Name="LoadingGrid" Visibility="Visible">
<ProgressRing x:Name="progressRing" IsActive="True" Foreground="#d03438" HorizontalAlignment="Center" Width="60"
Height="50" VerticalAlignment="Center" Margin="0 20 0 0"></ProgressRing>
</Grid>
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Collapsed">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
<Grid Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Name="popUp">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="/Assets/Close_White.png" HorizontalAlignment="Right" Grid.Row="1" Tapped="CloseImage"></Image>
<ScrollViewer x:Name="scroll" ZoomMode="Enabled" Grid.Row="2">
<Image x:Name="popUpImage" VerticalAlignment="Center" Margin="0,-50,0,0"></Image>
</ScrollViewer>
</Grid>
</Grid>
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control. Please someone guide to solve the issue. Any help on this would be very much helpful to solve the issue
Expected output
Thanks in advance

Answer 1

By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control.
You need to set the height of your ScrollViewer explicitly:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible" Height="300">//here I set the height of ScrollViewer to 300
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
I set the ScrollViewer's height to 300 and when the Content's height is bigger than 300. ScrollViewer will show correctly.
Update: Here is the complete demo: AdControlSample
To show the Pivot Header you need to set the margin of Pivot Control to Margin="0,0,0,0" and also you need to fill your defined header template headerTest:
<Page.Resources>
<DataTemplate x:Key="headerTest">
<StackPanel>
<TextBlock Text="{Binding HeadLine}"></TextBlock>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
...
Fix the margin:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible">
<Pivot x:Name="pivot" Margin="0,0,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
And here is the result:

Answer 2

You need to put the ScrollViewer inside the PivotItem's DataTemplate.
Currently the ScrollViewer wraps the whole Pivot, but the pivot itself handles the scroll event which means the ScrollViewer does not receive it. You can confirm this when you hover the scroll bar with your mouse and scroll - in this case it will work, because the mouse is no longer inside the Pivot itself.
The solution would look like this:
<DataTemplate x:Key="pivotTemplate">
<ScrollViewer>
<StackPanel Margin="-15 0 -15 0">
...
</StackPanel>
</ScrollViewer>
</DataTemplate>