[Solved] VS Blend UWP 3 annoying elements keep getting a vertical alignment

Updated on November 16, 2016 in [A] Other Answers
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on Reddit0
5 on November 16, 2016

Hi guys,

I hope someone here knows a solution to my problem. I am creating a UWP app with multiple elements (duh), and I am now at the point of creating the responsive design to actually make in “Universal”. But some of these elements are proving to be a pain in the butt. Basically I want these elements to have a static position meaning that they don’t move when screen size changes.

This works great as long as the VerticalAlignment property is set to Top. However (and here comes the plot twist) every time I change the margins of these three elements, that are basically at the bottom of the page, keep getting there VerticalAlignment property set to “Bottom” meaning they will move along with the bottom which it shouldn’t do since the positioning will get messed up if it does.

The weird thing here is that I have three other elements that (should) have the exact same positions as these annoying elements, but they do indeed work as intended.

A part of the XAML for an example:

 

RECOMMENDED: Do not! open this spoiler it’s 1244 lines of xaml code and it was a pain to post it and it might be a pain to even open it.
If for some reason you want to dig trough the entire XAML code be my guest:

Click to Expand

  • Liked by
Reply
1 on November 16, 2016

‘But some of these elements are proving to be a pain in the butt. Basically I want these elements to have a static position meaning that they don’t move when screen size changes. ‘ – Since the resolution is capable of increasing more than 4x the lowest known resolution, keeping your elements static in the same position will make your program rather odd so you could try making some sort of if statement that scales the elements up and moves them slightly so they still appear to belong in the location they’re in regardless of the resolution, because how you’ve worded it and how I imagine it, someone opened it in 800×600 and changed their resolution to 1920×1080 and the elements staying static by the resolution of the monitor increasing drastically, and the elements then looking like they don’t belong where they have been kept when the resolution increases.

You could try making something like a conditional statement where if the resolution increases, say every 200 x 100, the elements move locations and even get bigger to match the resolution and ensure that the elements on your page still look like where they belong regardless of the upscale of resolution.

I’m sorry if I didn’t cover your question entirely but that is what I have gotten from your question/problem, Feel free to correct me if I am addressing a problem that doesn’t exist, I am in college and wanted to get back to you as soon as possible and provide you with a solution so you can continue making your project.

Good luck, and if you’d like me to elaborate my suggestion/fix.

Have a nice day!

Guru
on November 16, 2016

Well, this is not really how a UWP app’s responsive design works. Basically a UWP app, or Universal Windows Platform app, is an app that is capable of running on different devices running Windows 10, being mobile desktop holographic xbox. But you obviously need to have a responsive layout so the app can actually be used on these devices. This you do, or at least I did since everything says you should do it this way, using a VisualStateManager which in Visual Studio Blend allowed me to create different layouts for different screen sizes where I’ve done this for all the different devices.
 
This all is done in XAML or Extensible Application Markup Language which is similar to HTML but now for applications instead of Website. This means it is NOT a programming language like C# and if statements cannot be used in XAML.
 
Even though your suggestion could work, I want the application to be a bit organized meaning that the design, including the responsive design, is entirely done using XAML and the functionalities of the app is done using C#.
 
Because Visual Studio Blend makes it easier to work with the VisualStateManager I enjoy using it and this is the first and only time I’ve encountered this problem.

Show more replies
  • Liked by
Reply
Cancel
0 on November 16, 2016

Sorry I couldn’t be of extensive use, with no prior experience I was just running off perspective, logic and suggestions, never made a UWP, Sadly if you want to carry out your plan in the way you have stated, I cannot help you any further, as if I do i’ll mostly be going into a void or a language I haven’t learn’t yet, Sorry I couldn’t solve your specific organisation issue, hopefully someone else can.

Have a good day.

  • Liked by
Reply
Cancel
1 on November 16, 2016

I think what you’re looking for is a canvas. https://msdn.microsoft.com/en-us/windows/uwp/layout/layout-panels

Guru
on November 16, 2016

This indeed seems to have fixed my problem. Thank you Dion.

Show more replies
  • Liked by
Reply
Cancel