Fatal编程技术网
  • xaml/
  • Xaml 滚动广告控制-Windows Phone UWP

Xaml 滚动广告控制-Windows Phone UWP

xaml uwp

Xaml 滚动广告控制-Windows Phone UWP,xaml,uwp,Xaml,Uwp,我在我的xaml中使用ad控件，如下所示 <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" xml

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

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





提前感谢
您需要将
滚动查看器
放在
数据透视项
的
数据模板
中

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

解决方案如下所示：


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




...

您需要将
ScrollViewer
放入
数据透视项的
数据模板中

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

解决方案如下所示：


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




...


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


确定边距：


<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代码，我可以正确地呈现广告，但是当我在广告控件上滚动时，我无法滚动页面

您需要明确设置
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>


确定边距：


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






结果如下：

您应该看到AdControl，因为它是网页上的iframe。在AdControl内滚动不是您页面的一部分。@Bart感谢您的回复。我没有使用任何网页。我正在windows phone中使用广告控件。我在堆栈面板中使用了ad控件。我在
StackPanel
中放置了一个
AdControl
，它被包装在
ScrollViewer
中，但它按预期工作，即使鼠标悬停在控件上，我也可以正常滚动。您可以发布一些关于何时发生这种情况或更多XAML的具体信息吗？@MZetko感谢您的回复，我已经用我的完整XAML代码更新了我的问题。请回顾并指导我在哪里犯了错误。你应该看到AdControl，因为它将是网页上的iframe。在AdControl内滚动不是您页面的一部分。@Bart感谢您的回复。我没有使用任何网页。我正在windows phone中使用广告控件。我在堆栈面板中使用了ad控件。我在
StackPanel
中放置了一个
AdControl
，它被包装在
ScrollViewer
中，但它按预期工作，即使鼠标悬停在控件上，我也可以正常滚动。您可以发布一些关于何时发生这种情况或更多XAML的具体信息吗？@MZetko感谢您的回复，我已经用我的完整XAML代码更新了我的问题。请回顾并指导我在哪里犯了错误，您是否删除了围绕枢轴本身的原始ScrollViewer？带有x:Name=“swipeBetweenPages”是的，我删除了以swipeBetweenPages命名的滚动查看器，您是否删除了围绕轴心本身的原始滚动查看器？带有x:Name=“swipeBetweenPages”是的，我删除了使用swipeBetweenPages命名的滚动查看器。我发布了我使用您的xaml代码尝试的完整演示和结果。请检查一下。谢谢您提供的示例代码。但是对于我的要求，我不想要任何滚动条，我应该像浏览网页一样浏览广告抱歉误解了你的要求，我已经修正了我的答案并上传了一个新的演示。请检查我的更新。我无法在广告上垂直向上滚动页面。我感到困惑，你说在广告上向上滚动页面是什么意思？我发布了我用你的xaml代码和结果尝试的完整演示。请检查一下。谢谢您提供的示例代码。但是对于我的要求，我不想要任何滚动条，我应该像浏览网页一样浏览广告抱歉误解了你的要求，我已经修正了我的答案并上传了一个新的演示。请检查我的更新。我无法在广告上垂直向上滚动页面。我感到困惑，你说在广告上向上滚动页面是什么意思？