修复了具有 window 大小调整崩溃问题的 UIElement 大小

Question

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

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

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

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

我的意思是，多 space 做广告，少 space 做 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 中的控件提供了它们需要适合的 space。

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

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

Answer 2

你有 3 行，你的 AdControl 在底部的最后一行，所以第三行的高度应该是 Auto 所以只是更改网格的 RowDefinitions，如下所示：

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

You can remove all the Visual State Triggers, because you do not need responsive layout for making the ad control appear correctly.

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

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

修复了具有 window 大小调整崩溃问题的 UIElement 大小

Fixed size of UIElement with window resizing collapse problem

c#

xaml

adaptive-design

uwp

ShellPage.xaml

MainPage.xaml