Why is the form / page in my UWP app truncated at run time (doesn't reflect design time size)?

ε祈祈猫儿з 提交于 2021-01-29 08:29:16

问题


At design time in my UWP app, I've left enough room for everything I want (six buttons across the top and a TextBlock which will ultimately contain more text):

Note too, the textBlocks at the bottom of the page.

At runtime, the top TextBlock is terribly truncated, and all of the TextBlocks at the bottom of the form/page don't display at all, presumably for the same reason:

If this is working as designed (by Microsoft, that is, not by me), what do I need to do to fall in line with the accepted means of creating a layout that will be entirely visible at runtime?

UPDATE

On maximizing the window, the top part looks fine, but my "Labels" (TextBlocks) are invisible:

Although you can't see it, there is room at the bottom for the Labels/TextBlocks; I have top and bottom margin of the map set to 50: Margin="0,50,0,50"

UPDATE 2

Per Roy Li's request, here is the code. First, the 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>

...then, the code-behind that may have a bearing:

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);    
}

回答1:


The reason for the behavior is that you are setting an absolute value for the margin properties of the TextBlocks. The value is too big so the position of these TextBlocks is out of the visible layout of your app. In other words, the layout is not adaptive.

Here is a simple way to correct the 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>

What I did is divide the Grid into three rows and make sure the controls are placed in the correct row. I added Grid.Row="2" for the TextBlocks so that these TextBlocks will show in the last row which is at the bottom.

Now the textblocks will always show in the bottom even when your app is not maximized



来源:https://stackoverflow.com/questions/64995348/why-is-the-form-page-in-my-uwp-app-truncated-at-run-time-doesnt-reflect-desi

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!