0

我正在使用 UWP 开发应用程序。我对 UI 元素设计有疑问。
在开始解释我的情况之前，我将展示我的应用程序问题的确切点。

广告底部已折叠
如您所见，广告的底部已折叠一半。

我尝试添加HorizontalAlignment,VerticalAlignment拉伸，但没有奏效。

我想让我的广告Grid具有页面的优先级，所以看起来完全。

我的意思是，广告空间更大，ListView物品空间更少。

VisualState* but It seems not enough for me. I don't want to spend my time with struggling with constant number (我试图通过声明 *XAML Height ,Width` 来处理这种情况）。

为解决这个问题而苦苦挣扎，我可以找到自适应布局存储库 (C#/Xaml)。应用程序的图片如下。github链接

图片

我想关注那个来源，因为它真的很好用。但来源包括一些动画部分和一些高级技能，我无法赶上。

我只想完全展示我的广告。并且我想最大化我的广告宽度，而不会出现任何折叠并且只有足够的边距。并且我希望我的广告始终位于应用程序的底部。

如果您觉得这个问题模棱两可，我很抱歉。
我的来源如下。

ShellPage.xaml

<Grid>
    <Frame x:Name="shellFrame" /> <!-- navigation frame -->
</Grid>

主页.xaml

<Page
    x:Class="nlotto_gen.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mods="using:nlotto_gen.Models"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">

    <Grid
        x:Name="ContentArea"
        Margin="{StaticResource MediumLeftRightMargin}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="reallongwst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1200"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="adsense.Width" Value="1080"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="longwst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="adsense.Width" Value="728"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="longhst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="700"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mMain_Button.(Grid.Row)" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="shorthst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="220"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mMain_Button.(Grid.Row)" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            BorderBrush="{ThemeResource AppBarBorderThemeBrush}"
            x:Name="myGrid"
            BorderThickness="2" >

            <!--The SystemControlPageBackgroundChromeLowBrush background represents where you should place your content. 
                Place your content here.-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="5*"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <ListView>
                <!--... omitted ...-->
            </ListView>
            <Button Grid.Column="1" Grid.Row="1" x:Uid="Main_Button" x:Name="mMain_Button" Command="{x:Bind ViewModel.game_create}" Style="{StaticResource myButton}"/>
            <UI:AdControl
                Grid.Row="2"
                Grid.ColumnSpan="2"
                x:Name="adsense"
                ApplicationId="****"
                AdUnitId="test"
                Width="728"
                Height="80"
                Margin="5, 5, 5, 5"/>
        </Grid>
    </Grid>
</Page>
4

2 回答 2

2

您必须将第三个设置Grid RowDefinition为具有Auto高度：

<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

Auto将控件Row精确地放在它们需要适合的空间内。

*工作方式不同 -Grid首先计算所需的空间Auto和绝对高度行，然后将剩余空间划分为基于“星”的行。因此，在您的情况下，应用程序为列表提供的空间是广告的五倍。但是当应用程序窗口较小时，空间可能不足以容纳整个广告。

此外，由于您不再有多行*，您可以5从第一行的声明中删除 。

于 2018-09-17T16:40:21.780 回答
2

您有 3 行，并且您的AdControl位于底部的最后一行，因此第三行的高度应为Auto，因此只需更改网格的RowDefinitions，如下所示：

<Grid.RowDefinitions>
    <RowDefinition Height="5*"/>
    <RowDefinition Height="auto"/>
    <RowDefinition Height="auto"/>
</Grid.RowDefinitions>

您可以删除所有视觉状态触发器，因为您不需要响应式布局来使广告控件正确显示。

横幅广告始终具有固定尺寸，您可以在应用中显示多个广告，但无论您选择什么，都必须具有固定尺寸。：https ://docs.microsoft.com/en-us/windows/uwp/monetize/supported-ad-sizes-for-banner-ads

因此，您可以在您的应用程序中放置 2 个广告，一个用于窄尺寸，一个用于宽尺寸，然后使用视觉状态切换它们的可见性，或者另一种选择是使用融合了您应用程序主题的原生广告。

于 2018-09-17T16:40:52.903 回答