Mremoteng: Design guidelines

[farosch]

Whenever creating a PR I have to check

My code follows the code style of this project.

But what exactly are these, especially when it comes to design? I often stumple upon forms that are not even a bit alike and would really like to create PRs to unify these.
Just look at the SSH-Transfer and the Port-Scan: All buttons are different sizes and none of the elements are properly aligned with their neighbouring elements, labels and textboxes are placed next to each other so that they might overlap when translated, labels sometimes have a colon at the end of them and sometimes don't, textboxes are not the same length and the list goes on and on...

I already did some changes to the code like #796. The settings to me looked so unclean that I absolutely had to do something about it, but there are no real design guidelines on how to place elements or which elemnts to use.
It would be great to place at least some simple rules in the contributing section in the wiki.

Just some things that come to my mind: (These are very basic but allready help a lot in case of a homogeneous design)

• Font and size to use?
• Distance of elements?
• Placement of elements?
• Padding / Margin?
• Preferred form border style?
• Buttons
  
  
  
  • Height and Width?
  
  
  • Text alignment?
  
  
  • Picture placement?
  
  
  • ...
  
  
• When to use textboxe or domainupdown?
• When to use groupboxes?
• Alternating row colors?
• What colors to use in general?
• Icons
  
  
  
  • Where to get them?
  
  
  • Preferred format / size?
  
  
  • ...
  
  
• ...

I really LOVE mRemoteNG - It's such a great tool and I use it every day at my job and couldn't imagine living without it but these little things sometimes make me cringe as they make the software look somewhat "unprofessional" despite the professionality it actually has!
With such guidelines one could effortlessly overhaul the UI to provide a unified, clean look that gives the program a new shine :)

[nmat]

One part here I could think is good also is the theming because it is not really working out that well. It "works" but also needs work in order to get it consistent and also for making it easier to work with.

[sparerd]

@farosch I think that having some UI design guidelines would be great to have. Since you have been doing some work in the UI lately, feel free to start writing some up and we can discuss them in this issue.

I'll start off with a few:

• All forms must have their AutoScaleMode property set to Dpi in order for DPI scaling to be correctly applied
• Ensure all forms and user controls can be opened in the Visual Studio designer. This typically means ensuring the form has a parameterless constructor.
• Use the NG version of a control (found in UI\Controls\Base) if one exists. This will ensure the control is correctly styled.

[sparerd]

In an effort to prevent issues like #1238, I also suggest the following:

• All localization (such as ApplyLanguage()) should occur in the constructor of the form/control rather than in an event handler (such as OnLoad()).

[farosch]

• Always use Segoe UI; 9pt as a font
• When needed to place alements next to each other leave enough space between them as translated strings might need more space.
• Buttons should have the size of 100x24

[sparerd]

• If using the Visual Studio UI designer on a HiDPI screen, ensure Visual Studio is running in DPI-unaware mode. We assume all design work is done at 96 DPI. This will ensure the correct display of UI elements across devices. https://docs.microsoft.com/en-us/dotnet/framework/winforms/disable-dpi-awareness-visual-studio
  

[sparerd]

I'm going to start compiling these into a document. I don't know if there is a convention for naming code style documents, so how about just calling it DesignGuidelines.md?

[kmscode]

Segoe UI; 8.25pt is now the default for all controls that currently exist within the code (with the exception of the About screen that uses a fixed width font on 2 controls purposefully).

Went with 8.25 since Segoe UI is slightly bigger than MS Sans Serif at the same point size which is what was in use previously.

[padillah]

Rather than leave space and hope the translation fits, it would be better to not put text in any control but labels then we can use TableLayout controls to adjust spacing regardless of how long the translation is.

[farosch]

Closing this PR. All previous guidelines can be viewed here: https://github.com/mRemoteNG/mRemoteNG/wiki/Design-Guidelines