时间戳

首页 > 解决方案 > 我的一个 XAML 表单在设计上看起来与调试不同

c# - 我的一个 XAML 表单在设计上看起来与调试不同

问题描述

我项目中的一个 XAML 表单在设计时看起来是我想要的样子，但是当我调试时，表单的元素大小不同，位置也不同。我该如何解决？

在此处输入图像描述

如果我的 XAML 代码没有帮助，我深表歉意。我不熟悉 XAML，也不知道要包括什么。如有必要，我可以添加任何额外的代码。

从表单调试时，我尝试删除并重新添加位于不同位置的元素。

调试表单中的文本块未对齐，并且列表框大于应有的大小。

Xaml

</ContentDialog>
<Rectangle HorizontalAlignment="Left" Height="195" Margin="766,793,0,0" VerticalAlignment="Top" Width="463" FocusVisualPrimaryBrush="#FF1B0303" Fill="{ThemeResource AppBarBorderThemeBrush}"/>
<ListBox Margin="1617,192,21,348"/>

标签： c#visual-studioxamluwp

解决方案

从您附上的图片中，我只能假设您为文本框指定的边距与矩形不同。这很容易测试。

<Rectangle HorizontalAlignment="Left" Height="195" Margin="766,793,0,0" VerticalAlignment="Top" Width="463" FocusVisualPrimaryBrush="#FF1B0303" Fill="{ThemeResource AppBarBorderThemeBrush}"/>

这里有两条重要线索——

Margin="766,793,0,0" //父元素中的相对位置

Width="463" Height="195" // 矩形的大小

将这些值与您引用的文本块进行比较，希望您能找到问题所在。

注意：全屏应用的窗口大小与设计不同，因此相对位置也会发生变化。尝试在设计中更改窗口宽度/高度（到您的全屏分辨率），这应该显示与正在运行的应用程序相同的视图。

您可以尝试将它们都放在同一个父级（例如网格）中。我已经用这个 UWP xaml 进行了测试，它似乎在做这个伎俩：

<Grid Margin="766,793,0,0" Width="463" Height="195">
            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" FocusVisualPrimaryBrush="#FF1B0303" Fill="{ThemeResource AppBarBorderThemeBrush}"/>
            <ListBox>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
            </ListBox>
 </Grid>

本质上，父元素网格将设置大小和位置，子元素将继承这些属性。

推荐阅读