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

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

我只想完全展示我的广告。我希望最大化我的广告宽度，没有任何崩溃和足够的余量。我希望我的广告永远是应用程序的底部。

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

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在最后一行的底部，所以第三行的高度应该是自动，所以只需更改网格的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混合其中应用的主题。