拖动元素时，UWP App布局变得紧张

Question

自从我开始使用UWP以来，我一直面临着这个奇怪的问题。每当我使用XAML定位我的元素（在中间或左上角对齐，基本上只使用代码）时，无论我在哪个设备上运行应用程序，我的手机或设备，元素的位置都与设计视图中的位置完全相同我的电脑（两台Win10）。

但是，如果我在设备上部署应用程序时将元素拖到画布上我想要的位置，则布局完全搞砸了。有时候某些元素会从视口中消失！

长话短说，当我在部署应用程序时拖放元素时，这不是我在VS中设置它们的方式。但是当我使用代码（XAML）定位它们时，它们就可以了。

如何解决此问题，以便拖放元素不会搞砸我的应用布局？

Answer 1

我会直截了当，我也会尽量保持简短。 您面临的问题是Adaptive Layout。让我们深入探讨它。

目前正在发生什么：

1. 当您从Visual Studio的toolbox拖放元素时，Visual Studio会为您快速XAML。
2. Designer具有查看例如：5" Phone 1920x1080 300% scale或某些桌面版本的配置，例如：23" Desktop 1920x1080 100% scale。这告诉visual studio您的首选屏幕尺寸为设计时间。你也可以改变它（一旦你创建了你的设计，总是这样做）。如果您根据屏幕尺寸进行设计，然后将其更改为其他屏幕尺寸，您就会知道出了什么问题。
3. 当您拖放时，visual studio会写入与屏幕大小相对应的XAML。因此，如果您要在23"上进行设计，并将UI element从toolbox拖放到屏幕中心，那么Margin看起来就像Margin="909,505,0,0" 1}}。
4. 这些边距分别对应于桌面大小并且是硬编码的，因此它们不会因屏幕尺寸变化而变化（非自适应）。
5. 现在切换到5"设计器屏幕，您会注意到您的UI元素已消失。好吧没有消失只是搬出了地方。

为什么元素会消失？

这样做是因为Margin被硬编码为Margin="909,505,0,0"。在5＆＃34;屏幕大致宽度为400px或更少，高度为600px或更高。所以909的Left Margin会将它推离屏幕区域，更不用说上边距了。这就是为什么你的UI在运行时变得混乱的原因。

如何修复它：

1. 要修复它，您需要避免拖放或拖放时确保删除默认情况下Visual Studio为您提供的边距和固定高度和宽度。
2. 尝试使用更多Grid.RowDefinitions和Grid.ColumnDefinitions
3. 仅使用边距为element
提供更精细的展示位置详细信息

代码参考：

我已经回答了一些关于自适应布局和设计的问题。它们可能适用于Windows Phone 8或WinRT或UWP，但请记住XAML是XAML，自适应设计是adaptive design。链接如下：

1. Adaptive Layout on Windows Phone 8。在这里查看他的问题中的XAML，并在答案中查看XAML。同时浏览内容，因为它提供了有关边距的更深入的知识以及自适应设计如何工作。
2. Map Control Won't Show Up：虽然最终问题不是因为自适应布局。但是在我能够真正发现问题之前，非适应性布局让我离开了很长一段时间。看看它的XAML部分。

希望它有所帮助。任何问题随时可以使用评论部分

Answer 2

长话短说，没有办法。如果将元素放在某个位置，Visual Studio无法知道它是否与某些东西对齐，如果你有一个网格，列是否需要相对大小或绝对等。你需要检查所有这些数据并在代码中手动设置它们或者在元素的属性中。