UWP App layout gets screwed up when elements are dragged

Question

I have been facing this weird issue since I started with UWP. Whenever I position my elements using XAML (aligning in the centre or top-left top-right, basically using only code), the elements are positioned exactly as shown in the design view no matter what device I run the app on, my phone or my PC (both Win10).

However, if I drag the elements to someplace I want on the canvas when I deploy the app on the device, the layout is completely messed up. Sometimes to the point that some element goes out of the viewport!

Long story short, when I drag and drop elements upon deploying the app the are not the way I set them in VS. But when I position them using code (XAML) they're just fine.

How do I fix this so that dragging and dropping elements doesn't screw up my app layout?

Answer 1

I am gonna be straight forward and I'll try to keep it short as well. The issue you're facing is about Adaptive Layout. Let's go deep into it.

What's Currently happening:

1. When you drag and drop elements from the toolbox of Visual studio, Visual Studio writes up a quick XAML for you.
2. The Designer has a configuration to view eg: 5" Phone 1920x1080 300% scale or some desktop version eg: 23" Desktop 1920x1080 100% scale. This tells visual studio your preferred screen size for design time. You can change it as well (always do once you've created your design). If you design it for a screen size and then change it to a different one you'll know what's going wrong.
3. When you drag and drop, visual studio writes up a XAML corresponding to the screen size. So if you're designing on a 23" and you drag drop an UI element from the toolbox to the centre of the screen your Margin would look something like Margin="909,505,0,0".
4. These margins are respective to a desktop of size and are hard coded so they will not change on screen size change (NON ADAPTIVE).
5. Now switch to a 5" designer screen you'll notice your UI Element has vanished. Well not vanished just moved out of place.

Why did the Element vanish?

It did so because the Margin is hard coded to Margin="909,505,0,0". On a 5" screen roughly the width is 400px more or less and the height is 600px or more. So a Left Margin of 909 will push it off the screen area for good let alone the top margin. This is the reason why your UI at run time becomes all messed up.

How to fix it:

1. To fix it, you'll need to avoid dragging and dropping or when you do drag and drop make sure you remove the margins and the fixed height and width that Visual Studio provides to you by default.
2. Try to use more of Grid.RowDefinitions and Grid.ColumnDefinitions
3. Use Margins only to provide finer placement details to the element

---

Code References:

I've already answered a few questions on adaptive layouts and designs. They might be for windows phone 8 or WinRT or maybe UWP but remember XAML is XAML and adaptive design is adaptive design. The links are below:

1. Adaptive Layout on Windows Phone 8. Here look at the XAML in his question and look at the XAML in the answer. Also go through the content as it provides deeper knowledge about Margins and how do adaptive designs work.
2. Map Control Won't Show Up: Although the final issue wasn't because of the adaptive layout. But the non adaptive layout threw me off for quite a while before I could actually catch the issue. Look at the XAML sections of it.

Hope it helps. for any issues feel free to use the comments section

Answer 2

Long story short, there is no way. If you position the element somewhere, Visual Studio cannot know if it is aligned to something, if you have a grid whether columns need to be relative in size or absolute etc. You need to check all those data and set them manually either in the code or in the properties of the element.