Por que o formulário / página em meu aplicativo UWP está truncado no tempo de execução (não reflete o tamanho do tempo de design)?

Question

Em tempo de design em meu aplicativo UWP, deixei espaço suficiente para tudo que desejo (seis botões na parte superior e um TextBlock que conterá mais texto):

Observe também os textBlocks na parte inferior da página.

No tempo de execução, o TextBlock superior fica terrivelmente truncado e todos os TextBlocks na parte inferior do formulário / página não são exibidos, presumivelmente pelo mesmo motivo:

Se estiver funcionando conforme projetado (pela Microsoft, ou seja, não por mim), o que preciso fazer para ficar de acordo com os meios aceitos de criação de um layout que será totalmente visível em tempo de execução?

ATUALIZAR

Ao maximizar a janela, a parte superior parece boa, mas meus "Labels" (TextBlocks) são invisíveis:

Embora você não pode vê-lo, não é quarto na parte inferior para as etiquetas / TextBlocks; Eu tenho as margens superior e inferior do mapa definidas em 50: Margin = "0,50,0,50"

ATUALIZAÇÃO 2

A pedido de Roy Li, aqui está o código. Primeiro, o XAML:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CartographerYou"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Custom="using:Windows.UI.Xaml.Controls.Maps"
    x:Class="CartographerYou.MainPage"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Loaded="Page_Loaded">

    <Grid x:Name="grd">
        <Button x:Name="btnLoadMap" Content="Load Map" Margin="20,12,50,0" VerticalAlignment="Top" Click="btnLoadMap_Click" />
        <Button x:Name="btnCre8NewMap" Content="Create New Map" Margin="140,12,50,0" VerticalAlignment="Top" Click="btnCre8NewMap_Click"/>
        <Button x:Name="btnAddLoc" Content="Add Location" Margin="280,12,50,50" VerticalAlignment="Top" Click="btnAddLoc_Click"/>
        <Button x:Name="btnRemoveLoc" Content="Remove Location" Margin="400,12,0,0" VerticalAlignment="Top" Click="btnRemoveLoc_Click"/>
        <Button x:Name="btnPrint" Content="Print Map" Margin="570,12,0,0" VerticalAlignment="Top" Click="btnPrint_Click"/>
        <Button x:Name="btnSave" Content="Save Map Image" Margin="670,12,0,0" VerticalAlignment="Top" Click="btnSave_Click"/>
        <TextBlock x:Name="txtBlckMapType" HorizontalAlignment="Left" Margin="800,16,0,0" Text="Map Style: " TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold"/>
        <TextBlock x:Name="txtBlckCurrentMap" HorizontalAlignment="Left" Margin="1040,16,0,0" Text="Current Map: " TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold"/>
        <TextBlock x:Name="txtBlckLegend" HorizontalAlignment="Left" Margin="20,960,0,0" Text="LEGEND:" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
        <TextBlock x:Name="txtBlckRed" HorizontalAlignment="Left" Margin="90,960,0,0" Text="Red markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckOrange" HorizontalAlignment="Left" Margin="193,960,0,0" Text="Orange markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckYellow" HorizontalAlignment="Left" Margin="296,960,0,0" Text="Yellow markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckGreen" HorizontalAlignment="Left" Margin="399,960,0,0" Text="Green markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckBlue" HorizontalAlignment="Left" Margin="502,960,0,0" Text="Blue markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckIndigo" HorizontalAlignment="Left" Margin="605,960,0,0" Text="Indigo markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckViolet" HorizontalAlignment="Left" Margin="708,960,0,0" Text="Violet markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckBlack" HorizontalAlignment="Left" Margin="811,960,0,0" Text="Black markers" TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckWhite" HorizontalAlignment="Left" Margin="914,960,0,0" Text="White markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBlock x:Name="txtBlckGray" HorizontalAlignment="Left" Margin="1017,960,0,0" Text="Gray markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
        <Custom:MapControl x:Name="map" Margin="0,50,0,50" MapServiceToken="Gr8GooglyMoogly" />
        <ComboBox x:Name="cmbxMaptype" Margin="876,12,0,0" Width="160" DropDownClosed="cmbxMaptype_DropDownClosed"/>
    </Grid>
</Page>

... então, o code-behind que pode ter um rolamento:

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    txtBlckRed.Foreground = new SolidColorBrush(Windows.UI.Colors.Red);
    txtBlckOrange.Foreground = new SolidColorBrush(Windows.UI.Colors.Orange);
    txtBlckYellow.Foreground = new SolidColorBrush(Windows.UI.Colors.Yellow);
    txtBlckGreen.Foreground = new SolidColorBrush(Windows.UI.Colors.Green);
    txtBlckBlue.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
    txtBlckIndigo.Foreground = new SolidColorBrush(Windows.UI.Colors.Indigo);
    txtBlckViolet.Foreground = new SolidColorBrush(Windows.UI.Colors.Violet);
    txtBlckBlack.Foreground = new SolidColorBrush(Windows.UI.Colors.Black);
    txtBlckWhite.Foreground = new SolidColorBrush(Windows.UI.Colors.White);
    txtBlckGray.Foreground = new SolidColorBrush(Windows.UI.Colors.Gray);    
}

Answer 1

O motivo para o comportamento é que você está definindo um valor absoluto para as marginpropriedades dos TextBlocks. O valor é muito grande, então a posição desses TextBlocks está fora do layout visível do seu aplicativo. Em outras palavras, o layout não é adaptativo.

Esta é uma maneira simples de corrigir o layout:

 <Grid x:Name="grd">
   <!--Add row definitions-->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <!--top area controls-->
    <Button x:Name="btnLoadMap" Content="Load Map" Margin="20,12,50,0" VerticalAlignment="Top" Click="btnLoadMap_Click" />
    <Button   x:Name="btnCre8NewMap" Content="Create New Map" Margin="140,12,50,0" VerticalAlignment="Top" Click="btnCre8NewMap_Click"/>
    <Button   x:Name="btnAddLoc" Content="Add Location" Margin="280,12,50,50" VerticalAlignment="Top" Click="btnAddLoc_Click"/>
    <Button   x:Name="btnRemoveLoc" Content="Remove Location" Margin="400,12,0,0" VerticalAlignment="Top" Click="btnRemoveLoc_Click"/>
    <Button    x:Name="btnPrint" Content="Print Map" Margin="570,12,0,0" VerticalAlignment="Top" Click="btnPrint_Click"/>
    <Button   x:Name="btnSave" Content="Save Map Image" Margin="670,12,0,0" VerticalAlignment="Top" Click="btnSave_Click"/>
    
    <TextBlock x:Name="txtBlckMapType" HorizontalAlignment="Left" Margin="800,16,0,0" Text="Map Style: " TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold"/>
    <TextBlock x:Name="txtBlckCurrentMap" HorizontalAlignment="Left" Margin="1040,16,0,0" Text="Current Map: " TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold"/>
    <ComboBox  x:Name="cmbxMaptype" Margin="876,12,0,0" Width="160" DropDownClosed="cmbxMaptype_DropDownClosed"/>
     <!--map controls-->
    <Maps:MapControl Grid.Row="1" x:Name="MapControl1" Style="Terrain"  />
    <!--bottom area controls-->
    <TextBlock x:Name="txtBlckLegend" HorizontalAlignment="Left"   Grid.Row="2" Margin="20,12,0,0" Text="LEGEND:" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
    <TextBlock x:Name="txtBlckRed" HorizontalAlignment="Left"  Grid.Row="2" Margin="90,12,0,0" Text="Red markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckOrange" HorizontalAlignment="Left"  Grid.Row="2" Margin="193,12,0,0" Text="Orange markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckYellow" HorizontalAlignment="Left"  Grid.Row="2" Margin="296,12,0,0" Text="Yellow markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckGreen" HorizontalAlignment="Left"  Grid.Row="2" Margin="399,12,0,0" Text="Green markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckBlue" HorizontalAlignment="Left"  Grid.Row="2" Margin="502,12,0,0" Text="Blue markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckIndigo" HorizontalAlignment="Left"  Grid.Row="2" Margin="605,12,0,0" Text="Indigo markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckViolet" HorizontalAlignment="Left"  Grid.Row="2" Margin="708,12,0,0" Text="Violet markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckBlack" HorizontalAlignment="Left"  Grid.Row="2" Margin="811,12,0,0" Text="Black markers" TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckWhite" HorizontalAlignment="Left"  Grid.Row="2" Margin="914,12,0,0" Text="White markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    <TextBlock x:Name="txtBlckGray" HorizontalAlignment="Left"  Grid.Row="2" Margin="1017,12,0,0" Text="Gray markers " TextWrapping="Wrap" VerticalAlignment="Top"/>
    
</Grid>

O que fiz foi dividir a grade em três linhas e garantir que os controles sejam colocados na linha correta. Eu adicionei Grid.Row="2"TextBlocks para que esses TextBlocks apareçam na última linha, que está na parte inferior.

Agora, os blocos de texto sempre serão exibidos na parte inferior, mesmo quando seu aplicativo não estiver maximizado