Useful UX Design Guidelines For Modernizing Your Delphi VCL And FireMonkey Applications In Windows 10

Its already late and time to modernize your Delphi/C++ Application with extensive Windows 10 support, as the support for Windows 7 ended on January 14, 2020. Rad Studio offers robust components and visually stunning styles to modernize your existing applications in Windows 10. This post will give overview some of the Windows 10 specific features introduced in RAD Studio.

Features Overview:

• Quickly and Easily update VCL and FMX applications to Windows 10 with the Windows 10 Controls.
• Address common UI Paradigms on Windows 10.
• Range of UI controls specifically designed for windows 10.
• Built in windows 10 styles for both VCL and FireMonkey applications.
• Select custom styles for VCL and FireMonkey available for download in GetIt.
• VCL extensions for HI-DPI, 4k monitors Support. Rad Studio 10.3 includes PerMonitorV2, Multi Resolutions Image List support.
• Expanded WinRT API and Windows store support.

Windows 10 uses Segoe as the Standard font. Some font guidelines which can make your application looks windows 10.

• Header – Segoe UI Light,46 pt.
• Sub Header – Segoe UI Light,34 pt.
• Title– Segoe UI Semi Light,24 pt.
• Subtitle – Segoe UI Normal,20 pt.
• Base – Segoe UI Semi Bold 15 pt.
• Body -Segoe UI Normal,15 pt.
• Caption -Segoe UI Normal,12 pt.

Windows 10 VCL Controls :

• TSplitView : A container for other controls that can be opened and closed similar to the TMultiView in FireMonkey. When opened, TSplitView can be docked to the left or right edge of the form, or displayed on top of the client area of the form (overlayed). When closed, the TSplitView can be completely hidden (CloseStyle = svcCollapse), or a smaller portion of the split view can remain visible (CloseStyle = svcCompact).
• TRelativePanel : A container control that allows you to position child controls relative to the panel itself or relative to other child controls of this panel. For more information on how to use the relative panel, see Using the Relative Panel.
• TToggleSwitch : A clickable control that allows a user to toggle between an On state and an Off state. Flexible to change the caption of the state.
• TDatePicker and TTimePicker : Control to let users specify a date and time from a pop-up scrolling list of values.
• TCalenderView : Allows you to customize the look-and-feel of the control. It supports the selection of multiple dates and includes the Month, Year, Decade views.
• TCardpanel : Use the TCardPanel to manage a collection of cards. Each card is a container for other controls and only one card is active/visible at a time.
• TStackPanel : Use the TStackPanel to apply homogeneous alignment, margin, and padding settings to a series of controls inside a panel container.

Windows 10 Styles For VCL and FireMonkey.

• You can apply styles to your application to have stunning look and feel. Some of the windows 10 specific styles were built in to the RAD studio. You can check by navigating to Project->Options->Application->Appearance->select some the styles and you can preview the styles as well.
• Alternatively you can get some VCL and FireMonkey Styles from Tools->Getit Package manger-> Under Styles category-> select the styles which you wish to apply to your application.
• You also have flexibility to create your own custom styles using the Tools-> BitMap Style Designer.

Check the Video New UX Design Principles for RAD Studio Developers in Windows for Demonstration below.

Check out the High DPI Styles and VCL Styling Per Control feature introduced in Latest RAD studio 10.4.1