滚动广告控制 - Windows Phone UWP

时间:2016-09-26 11:10:02

标签: xaml uwp

我在我的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代码,我可以正确呈现广告,但是当我滚动广告控件时,我无法滚动页面。请有人指导解决问题。对此有任何帮助对解决问题非常有帮助

预期输出

Image For Clarification

提前致谢

2 个答案:

答案 0 :(得分:0)

您需要将ScrollViewer放在PivotItem的{​​{1}}内。

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

解决方案如下所示:

Pivot

答案 1 :(得分:0)

  

通过使用上面的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>

结果如下: enter image description here