为什么我的 UWP 应用中的表单/页面在运行时被截断(不反映设计时大小)? [英] Why is the form / page in my UWP app truncated at run time (doesn't reflect design time size)?

问题描述

在我的 UWP 应用程序设计时，我为我想要的一切留出了足够的空间(顶部的六个按钮和一个最终将包含更多文本的 TextBlock):

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):

也要注意页面底部的 textBlocks.

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

在运行时，顶部的 TextBlock 被严重截断，并且表单/页面底部的所有 TextBlock 根本不显示，大概是出于同样的原因:

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:

如果这是按设计工作的(由 Microsoft 设计，即不是由我设计)，我需要做什么才能符合创建在运行时完全可见的布局的公认方法?

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?

在最大化窗口时，顶部看起来不错，但我的标签"却变了.(TextBlocks) 是不可见的:

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

虽然你看不到它，但底部有空间用于标签/文本块；我将地图的顶部和底部边距设置为 50:Margin=0,50,0,50"

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"

根据 Roy Li 的要求，这是代码.首先，XAML:

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

推荐答案

该行为的原因是您正在为 TextBlocks 的 margin 属性设置绝对值.该值太大，因此这些 TextBlock 的位置超出了应用程序的可见布局.换句话说，布局不是自适应的.

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>

我所做的是将 Grid 分成三行，并确保控件放置在正确的行中.我为 TextBlock 添加了 Grid.Row=2" 以便这些 TextBlock 将显示在底部的最后一行中.

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

这篇关于为什么我的 UWP 应用中的表单/页面在运行时被截断(不反映设计时大小)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！