Fixed size of UIElement with window resizing collapse problem

Question

I'm developing an App with UWP. I have problem with UI element design.
before begin explaining my circumstance, I'll show the exact point of my App's problem.

as you can see, bottom of advertise is half-collapsed.

I tried to add HorizontalAlignment, VerticalAlignment stretch but it didn't work.

I want to make my advertise Grid has priority of the page, so it seems entirely.

I mean, more space for advertise, and less space for ListView item.

I tried to handle this situation with declaring *XAML VisualState* but It seems not enough for me. I don't want to spend my time with struggling with constant number (Height,Width`).

Struggling with this problem, I could find adaptive layout repository (C#/Xaml). picture of app is following. githubLink

I wanted to follow that Source because it works really good. but the source include some animating part and some advanced skills, and I couldn't catch it up.

I just want to show my advertise entirely. and I want to maximize width of my advertise without any collapse and with just enough margin. and I want my advertise always be bottom of the App.

I'm sorry if you feel the question is ambiguous.
my source is below.

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

You have to set the third Grid RowDefinition to have Auto height:

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

Auto gives the controls within the Row exactly the space they need to fit.

* works differently - Grid first calculates the space required for Auto and absolute height rows and then divides the remaining space to the "star"-based rows. So in your case the app gave the list five times more space than the ad. But when the app window is small, the space may not be enough to fit the ad as a whole.

Also, because you no longer have multiple rows with *, you can just remove the 5 from the first row's declaration.

Answer 2

you have 3 rows and your AdControl is in last row at the bottom so the height of third row should be Auto so just change the RowDefinitions of your grid like following :

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

Banner ads always have fixed size, there are multiple number of ads you can display in your app, but whatever you choose must have a fixed size. : https://learn.microsoft.com/en-us/windows/uwp/monetize/supported-ad-sizes-for-banner-ads

So you can put 2 ads in your app, one for narrow size and one for wide size and then toggle their visibility with Visual States, or another option would be to use Native Ads which blend in which the theme of your app.