修复了 UIElement 大小与窗口调整大小折叠问题

Question

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

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

我尝试添加HorizontalAlignment、VerticalAlignment 拉伸，但没有成功。

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

我的意思是，广告空间更大，ListView 项目空间更少。

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

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

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

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

如果您觉得问题含糊不清，我很抱歉。
我的来源如下。

ShellPage.xaml

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

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

Answer 1

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

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

Auto 为 Row 中的控件提供了它们需要适应的空间。

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

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

Answer 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 个广告，一个用于窄尺寸，一个用于宽尺寸，然后使用视觉状态切换它们的可见性，或者另一种选择是使用 Native Ads，它融合了您应用的主题.