Es gibt eine sehr aufregende Verbesserung in Delphi, C++Builder und RAD Studio 11.0 Alexandria: Die IDE unterstützt jetzt die Skalierung mit hoher DPI auf hochauflösenden Bildschirmen vollständig. Das bedeutet, wenn Sie Windows verwenden und ein 4K- oder ähnliches hochauflösendes Display haben, wird die IDE scharf und klar auf Ihrem Bildschirm gerendert. Wenn Sie zwei Bildschirme mit unterschiedlichen Maßstäben haben, können Sie auf diesen mehreren Bildschirmen unterschiedliche IDE-Fenster haben, und jeder wird auf jedem Monitor perfekt, scharf und klar gerendert. Diese hohe DPI-Skalierungsunterstützung nutzt die VCL-eigene Unterstützung für die perMonitorv2-Skalierung, die wir vor einigen Releases eingeführt haben, sowie unsere eigene Bildersammlung und virtuelle Bilderlistenkomponenten. Mit anderen Worten, wir verwenden dieselben Tools, die wir Ihnen zur Verfügung stellen.
Wichtig ist, dass die hohe DPI-Unterstützung auch die Unterstützung des Code-Editors für gestochen scharfen Text und beim Entwerfen von Formularen sowohl VCL als auch FMX umfasst. (Wenn Sie RAD Studio 11 gestartet haben und gedacht haben: „Hey, mein Formular ist klein!“, lesen Sie weiter – wir haben Einstellungen, die die Skalierung im VCL-Formular-Designer steuern, und Sie sind standardmäßig auf unskaliert eingestellt.)
Sehen wir uns an, wie sich die IDE heute sowohl auf hochauflösenden als auch auf niedrig auflösenden Displays verhält, einige interessante Anmerkungen zu ihrer Implementierung und insbesondere das VCL-Formulardesign.
Table of Contents
Vergleich mit hohen DPI
Der beste Weg, um den Unterschied in der IDE zu sehen, besteht darin, sie zu verwenden. Die Verwendung der IDE auf einem hochauflösenden Display ist wie Tag und Nacht – es gibt einige Dinge, die Screenshots nur halb vermitteln, und das Erscheinungsbild von RAD Studio 11 ist eines davon. Persönlich ist es ein erstaunlicher Unterschied.
Aber um zu zeigen, was wir nur in einem Blog-Beitrag können, hier ist ein großartiges Bild, das Jim McKeeth erstellt hat, indem er die IDEs 10.4.2 und 11.0 vergleicht:
Rechts die neue High-DPI-fähige IDE in v11. Es ist knackig und klar, egal wie hoch die Skalierung ist.
Sie können sehen, dass im rechten Bild in v11.0 Alexandria der Text und die Symbole klar sind, egal wie groß das Display ist, auf dem die IDE platziert ist.
Hintergrund – warum hohe DPI?
Ein typischer Skalierungssatz in Windows beträgt heute 200 %. Das ist die doppelte Pixeldichte, was wirklich bedeutet, dass für jedes Pixel in der Vergangenheit jetzt vier Pixel vorhanden sind (es ist vertikal und horizontal in zwei geteilt.) Ich schreibe dies auf einem 4K-Monitor, der 2160 Pixel hoch ist. Das ist 2 mal 1080, eine vertikale Auflösung, die ich vor Jahren mit hohen DPI-Werten verwendet habe. Damit alles auf dem Bildschirm die gleiche physische Größe anzeigt, muss ich um 2 skalieren.
Wenn eine App keine hohen DPI unterstützt (ist ‚DPI nicht bekannt‘), skaliert Windows sie hoch, aber das Hochskalieren fügt Unschärfe hinzu. Es ist viel besser, wenn eine App die Skalierung des Bildschirms kennt, auf dem sich ihre Fenster befinden, und sie scharf zeichnen kann. Wir haben die VCL dafür in 10.3 unterstützt, indem wir perMonitorv2 High-DPI-Skalierung (die neueste und beste Option, die Windows bietet) unterstützen und Komponenten für hochauflösende Symbole und Bildzeichnungen hinzufügen , was eine bessere Unterstützung für hochauflösende Bilder in Symbolleisten bietet und Menüs, die Windows eingebaut hat. Die IDE, die hauptsächlich mit der VCL erstellt wird, verwendet diese und ist eine großartige Demonstration der Fähigkeiten der VCL.
Die IDE verwendet Stile, um ihre hellen, dunklen und Nebelthemen zu zeichnen, und VCL-Stile unterstützen auch eine hohe DPI-Skalierung .
Formulardesigner mit hohem DPI-Wert
Während die hohe DPI-Unterstützung der VCL hauptsächlich darauf beruht, die Unterstützung von perMonitorv2 auf der Seite Anwendung > Manifest Ihrer Projektoptionen zu aktivieren und neu zu kompilieren sowie Bilder zu aktualisieren (weitere Informationen unten) und alle benutzerdefinierten Zeichnungen oder hartcodierten Pixelkonstanten zu aktualisieren, um die ScaleValue-ÜberladungenUm den neuen Punkt, Wert, Rechteck usw. für die High-DPI-Form zu erhalten, ist es nicht ganz so einfach. Wir hatten einen speziellen Bereich, der nicht auf Kundenanwendungen zutrifft, an dem wir arbeiten mussten, und das war der größte Teil unserer Entwicklungsarbeit. Tatsächlich ist die Erforschung und das Prototyping des besten Ansatzes hier ein Grund, warum es bis v11 gedauert hat, um hohe DPI in der IDE zu implementieren, nachdem wir in 10.3 die Unterstützung für die VCL selbst eingeführt haben. Dieser Bereich ist der VCL-Formulardesigner. Wir haben eine Lösung gefunden, von der wir hoffen, dass sie alle Anforderungen erfüllt.
Sie können den VCL-Formulardesigner auf jede DPI (jede Skalierung) skalieren. Dies geschieht mit der gleichen Skalierungstechnologie, die die VCL verwendet, wenn sie sich selbst zur Laufzeit skaliert, dh wenn eine App ausgeführt wird und Größe und Layout entsprechend angepasst werden müssen das Display, auf dem es ist. Diese Einstellung befindet sich unter Extras > Optionen > Benutzeroberfläche > Formular-Designer > Hohe DPI. Wenn Sie es ändern, müssen Sie den Formular-Designer schließen und erneut öffnen, um eine Wirkung zu erzielen.
Wenn Sie ein Formular öffnen, wird das Formular standardmäßig mit 96 DPI entworfen, also mit 100 %. Das bedeutet, dass, wenn Ihre IDE bei 200% liegt, das Formular kleiner erscheint als die umgebenden Steuerelemente. Ein wichtiges Wissen ist, dass beim Skalieren eines Formulars die Eigenschaften Left, Height usw. geändert werden – dies ist genau das gleiche wie beim Ausführen einer App, die skaliert wird; diese Werte werden mit der Bildschirmskala multipliziert. Bei der Standardeinstellung 100 % wird das Formular überhaupt nicht skaliert: Beim Öffnen eines Formulars werden die im DFM gespeicherten Werte nicht geändert, verglichen mit dem Öffnen beispielsweise in 10.4.2. Wenn Sie v11 installieren und feststellen, dass Ihre Formulare klein aussehen, haben wir folgende Gründe: Wir haben das Standardverhalten so festgelegt, dass ein Formular nicht geändert wird.
In einer zukünftigen Version werden wir wahrscheinlich auch die Beschriftung des Formulardesigners skalieren – derzeit wird nur der tatsächlich gestaltete Inhalt Ihres Formulars skaliert.
Sie können den Formulardesigner auch an Ihren Bildschirm anpassen lassen. Dies bedeutet, dass eine Schaltfläche in einem Formular der Größe einer Schaltfläche in einem IDE-Dialogfeld entspricht: Sie entspricht immer der Bildschirmskalierung, unabhängig vom Bildschirm oder der Skalierung (125%, 150%, 300%…). praktisch, wenn Sie nur Ihr Formular in der gleichen Größe wie alles andere sehen möchten, mit dem Sie in der Benutzeroberfläche interagieren. Im Dialogfeld IDE-Optionen ist dies ‚Automatisch‘, da es basierend auf dem Bildschirm des Designers eingestellt wird, wenn Sie ihn öffnen.
Schließlich können Sie einen bestimmten Maßstab festlegen, den Sie für den Formularentwurf verwenden. Dies kann eine beliebige Skala sein – 125%, 300%, alles, was Sie möchten.
Windows und so verwendet die VCL ganzzahlige Koordinaten für ihre Größen und Positionen. Dies bedeutet, dass jede Skalierung – jeder App – möglicherweise nicht immer genau ist. In der Praxis ist es in Ordnung, einmal zu skalieren (z. B. wenn eine App ausgeführt wird und sie von den niedrigauflösenden Koordinaten, mit denen sie entworfen wurde, hochskaliert.) Es ist auch gut, einige Male zu skalieren, z nach dem Starten. Es ist wichtiger, wenn Sie viele Male skalieren (und dies ist ein Grund, warum wir keine Funktion haben, bei der Sie in jedem Maßstab entwerfen, sondern beim Speichern auf 100% skalieren.) Es ist also in Ordnung, in jedem Maßstab mit hoher DPI zu entwerfen. und sogar in einem niedrigeren Maßstab ausführen – die VCL skaliert Ihre App korrekt – aber es ist wichtig, eine immer wieder Skalierung zu vermeiden, die passiert, wenn jedes Mal, wenn Sie ein Formular im Designer öffnen, es mit einer anderen DPI geöffnet wird. Deswegen,
FireMonkey-Designer
Der FireMonkey-Designer ist viel einfacher. Es wird einfach so skaliert, dass es der eigenen Skalierung der IDE entspricht, genau wie beim Skalieren einer FMX-App im Code. FireMonkey verwendet Gleitkommakoordinaten und hat nicht dieselben technischen Überlegungen wie VCL-Apps. In v11 haben wir FireMonkey unter Windows auch so geändert, dass ein Koordinatensystem verwendet wird, das auf Geräteeinheiten und nicht auf Pixeln basiert, was bedeutet, dass FMX-Formulare unter Windows besser auf den Anzeigemaßstab skalieren können als in der Vergangenheit, einschließlich mit höherer Qualität des Renderings.
Technische Änderungen
Komponentenhersteller benötigen keine Änderungen an den Symbolen, die sie mit ihren Komponenten liefern, da wir seit 10.2.2 hochauflösende Komponentensymbole im PNG-Format unterstützen . Plugin- oder Add-On-Anbieter haben neue APIs in der ToolsAPI, um Bilder zur internen hochauflösenden Bildersammlung der IDE hinzuzufügen (diese sind nicht im Umfang dieses Artikels enthalten, aber überprüfen Sie ToolsAPI.pas für TGraphicArray: Jede dieser neuen Überladungen ermöglicht das Hinzufügen mehrerer Größen von ein Bild in die Bildersammlung, die die Bilderlisten der IDE unterstützt.)
Intern, und das betrifft keinen Entwickler, aber vielleicht interessant zu wissen: Jedes IDE-Formular hat seine eigene Bilderliste . Dies ist für eine hohe DPI-Unterstützung erforderlich, da es sich um ein Formular handelt, das skaliert wird und zwei Formulare auf zwei verschiedenen Bildschirmen unterschiedlich skaliert werden können eine Form, aber falsch für die andere. Tatsächlich hatte die IDE in der Vergangenheit ohnehin mehrere Bildlisten im alten Stil, oft eine pro Formular; In der Vergangenheit bedeutete dies jedoch auch, dass viele Bilder dupliziert wurden, da Bildlisten im alten Stil ihre eigenen Bilder speichern. Ein rotes Lösch-X befand sich möglicherweise in mehreren Bildlisten, was das Aktualisieren von Symbolen erschwerte.
Die IDE verfügt jetzt über eine einzige zentrale Bildersammlung . Dies enthält alle Bilder, die in der IDE verwendet werden (mit Ausnahme von Komponentensymbolen, die separat gespeichert werden.) Mehrere Bildlisten in der IDE verbinden sich mit dieser Bildersammlung. Als Teil dieser Arbeit haben wir sowohl Software als auch das menschliche Auge verwendet, um Symbole zu deduplizieren, sodass die Bildersammlung jeweils eine einzelne Kopie enthält. Dies hat es viel einfacher gemacht, Symbole zu aktualisieren. Auch in der Bildersammlung gibt es jetzt für jedes Icon ein Kommentarfeld, in dem man beliebige Informationen hinterlegen kann: Wir verwenden es, um Notizen darüber zu hinterlegen, wo und wie das Icon verwendet wird.
Wir hoffen, dass dieser Einblick in den von uns verfolgten Ansatz für Sie nützlich sein kann, wenn Sie Ihre eigene Software auf hohe DPI aktualisieren. Wir haben hier auch eine umfassende Dokumentation zu High-DPI-Bildern .
Andere Änderungen
Eine letzte kleine Änderung, die wir vorgenommen haben, betrifft einige der IDE-Symbole. Die meisten Icons wurden durch hochauflösende (Multi-Res) Versionen ersetzt, sodass sie in jedem Maßstab gestochen scharf dargestellt werden können. Wir haben jedoch auch einige der Symbole für die wichtigsten Teile des Produkts neu gestaltet.
Einige der wichtigsten Symbolleistenschaltflächen in der gesamten IDE sind Run With Debugging – dafür verwenden Sie die IDE letztendlich! – plus Debug-Operationen wie Step-Over, Trace-In usw. Diese alle haben jetzt neue Icons, die speziell für ihren Zweck entwickelt wurden, um klar zu sehen, aber auch zu veranschaulichen, was die Operation ist. Sie sehen so aus:
 |
 |
| The new Run with Debugging icon. It looks more like a Run symbol, and has a bug being squashed underneath. | Step Over – such a simple design! But I think a very elegant way of showing the concept |
Sie werden vielleicht feststellen, dass der Run-Teil wie das ältere Delphi 7-Run-Symbol aussieht (weniger horizontal breit), das Platforms-Symbol sieht aus wie eines der IDE, das ein Kreis aus mehreren Teilen ist (es soll die Einheit aus mehreren verschiedenen Elementen anzeigen). und einige andere Symbole haben auch neue Versionen.
Außerdem sind wir auf Consolas als Standardschriftart für den Editor umgestiegen. Consolas ist eine sehr Delphi-ähnliche Schriftart – das heißt, es wird sich für Sie natürlich anfühlen, wenn Sie in der Vergangenheit die alte Standardschrift Courier New verwendet haben (die Sie immer noch verwenden können). Wir installieren auch mehrere Programmierschriftarten: Fira Code, Monoid, Source Code Pro und so weiter.
Hohe DPI-IDE
RAD Studio 11.0 bringt eine stark nachgefragte und sehr umfassende Überarbeitung der IDE: volle Unterstützung für hohe DPI. Gestochen scharfes und klares Rendern auf allen Bildschirmen, mit Unterstützung für die Formulargestaltung in mehreren Maßstäben und Klartext mit einer neuen, aber vertrauten Schriftart im Editor, ist eine der größten Änderungen und Verbesserungen, die wir vorgenommen haben.