滚动广告控制 - Windows Phone UWP答案

【问题标题】：Scroll Over Ad Control - Windows Phone UWP滚动广告控制 - Windows Phone UWP
【发布时间】：2016-09-26 11:10:02
【问题描述】：

我在我的 xaml 中使用广告控件，如下所示

<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>

通过使用上面的 xaml 代码，我可以正确呈现广告，但是当我滚动广告控件时，我无法滚动页面。请有人指导解决问题。对此的任何帮助都将非常有助于解决问题

预期输出

提前致谢

【问题讨论】：

您应该会看到 AdControl，因为它是网页上的 iframe。在 AdControl 内滚动不是页面的一部分。
@Bart 感谢您的回复。我没有使用任何网页。我在 windows phone 中使用广告控件。我在堆栈面板中使用了广告控件。
我在 StackPanel 中放置了一个 AdControl，该 StackPanel 被包裹在 ScrollViewer 中，但它按预期工作，即使鼠标悬停在控件上我也可以正常滚动。您能否发布一些有关何时发生这种情况或更多 XAML 的具体信息？
@MZetko 感谢您的回复，我已使用完整的 XAML 代码更新了我的问题。请检查并指导我在哪里做错了

标签： xaml uwp

【解决方案1】：

通过使用上面的 xaml 代码，我可以正确呈现广告，但是当我滚动广告控件时，我无法滚动页面。

您需要明确设置ScrollViewer 的高度：

<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>

我将 ScrollViewer 的高度设置为 300，当 Content 的高度大于 300 时。ScrollViewer 将正确显示。

更新：这是完整的演示：AdControlSample

要显示 Pivot Header，您需要将 Pivot Control 的边距设置为 Margin="0,0,0,0"，还需要填写您定义的标题模板 headerTest：

<Page.Resources>
    <DataTemplate x:Key="headerTest">
        <StackPanel>
            <TextBlock Text="{Binding HeadLine}"></TextBlock>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="pivotTemplate">
    ...

固定边距：

<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>

结果如下：

【讨论】：

我发布了我尝试使用您的 xaml 代码和结果的完整演示。请检查一下。
感谢您提供示例代码。但至于我的要求，我不想要任何滚动条，我应该像滑动页面一样在广告上滑动
抱歉误解了您的要求，我已经修正了我的答案并上传了一个新的演示。请检查我的更新。
我无法在广告上垂直向上滚动页面。
我搞糊涂了，向上滚动页面到广告上方是什么意思？

【解决方案2】：

您需要将ScrollViewer 放在PivotItem 的DataTemplate 中。

目前ScrollViewer 包装了整个Pivot，但枢轴本身处理滚动事件，这意味着ScrollViewer 没有接收到它。当您将鼠标悬停在滚动条上并滚动时，您可以确认这一点 - 在这种情况下它会起作用，因为鼠标不再位于 Pivot 本身内。

解决方案如下所示：

<DataTemplate x:Key="pivotTemplate">
    <ScrollViewer>
       <StackPanel Margin="-15 0 -15 0">
          ...
       </StackPanel>
    </ScrollViewer>
</DataTemplate>

【讨论】：

您是否删除了 Pivot 本身周围的原始 ScrollViewer？ x:Name="swipeBetweenPages"
是的，我删除了以 swipeBetweenPages 命名的滚动查看器