Исправлен размер UIElement с проблемой уменьшения размера окна

Question

Я разрабатываю приложение с помощью UWP.У меня проблема с дизайном элементов пользовательского интерфейса.
Прежде чем начать объяснять мои обстоятельства, я покажу точную точку проблемы моего приложения.

как видите, нижняя часть рекламного объявления наполовину свернута.

Я пытался добавить 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 ( Высота , Ширина`).

Борясь с этой проблемой, я смог найти хранилище адаптивного макета (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

у вас есть 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 приложения в своем приложении, одно для узкого размера и одно для широкого размера, а затем переключать их видимость с помощью визуальных состояний, иначе можно использовать Собственные объявления в которой сочетаются темы вашего приложения.

Answer 2

Для третьего Grid RowDefinition необходимо задать Auto height:

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

Auto, чтобы элементы управления в Row точно соответствовали пространству, в котором они должны поместиться.

* работает по-другому - Grid сначала вычисляет пространство, необходимое для строк Auto и абсолютной высоты, а затем делит оставшееся пространство на строки на основе звездочек.Так что в вашем случае приложение дало списку в пять раз больше места, чем реклама.Но когда окно приложения маленькое, места может не хватить для размещения всего объявления.

Кроме того, поскольку у вас больше нет строк с *, вы можете просто удалить 5из объявления первого ряда.