Entwickeln auflösungsunabhängiger Benutzerschnittstellen

Einleitung

Eine auflösungsunabhängige Anwendung ist ein Programm, dessen Formulare für die Verwendung auf Systemen, die mit verschiedenen Bildschirmauflösungen betrieben werden, ausgelegt sind. Schreibt man unter Visual Basic (und auch anderen Programmiersprachen) eine Anwendung, so kann man entweder in einer Entwurfsansicht die Anordnung und Position der Steuerelemente und der Formulare bestimmen oder diese im Quellcode definieren. Ziel dieses Artikels ist, einen Algorithmus zu entwerfen, der zur automatischen Anpassung von Größe und Position der Formulare und Steuerelemente in Windows-Anwendungen verwendet werden kann.

Ein Beispiel

Folgende Abbildungen zeigt ein herkömmliches Formular, bei dem die Größe auf rund 4/5 der Bildschirmbreite und der Bildschirmhöhe (Verhältnis 4 zu 3) eingestellt wurde. Die Systemschaltfläche zum Maximieren des Formulars ist deaktiviert. Die erste Abbildung zeigt, wie das Fenster bei einer Bildschirmauflösung von 800 × 600 Pixel aussieht. Das Formular wird in der vom Entwickler gewünschten Größe angezeigt, wenn angenommen wird, daß der Entwickler selbst bei dieser Auflösung gearbeitet hat:

[Illustration] Aussehen eines Fensters bei niedriger Auflösung

[Illustration] Aussehen eines Fensters bei hoher Auflösung

Ein Fenster bei verschiedenen Bildschirmauflösungen.

Die zweite Abbildung hingegen zeigt das gleiche Formular bei einer Bildschirmauflösung von 1.600 × 1.200 Pixel. Das Formular ist ungefähr auf ein Drittel der Breite und Höhe des Bildschirms „geschrumpft“. Wenn man annimmt, daß der Entwickler der Anwendung dieses Formular als Hauptformular der Anwendung konzipiert hat und auch die Systemschaltfläche zum Maximieren in der Titelliste deaktiviert ist, entspricht dieses Formular bei der hohen Auflösung nicht mehr den Erwartungen des Entwicklers. Das Formular ist auf die Größe eines Dialogfensters geschrumpft und der Benutzer hat keine Möglichkeit, das Formular zu vergrößern. Natürlich hätte der Entwickler das Formular von Anfang an für eine höhere Auflösung konzipieren können, allerdings hätte dies zu Problemen bei Benutzern, die bei einer einer niedrigen Bildschirmauflösung arbeiten, geführt, da das Formular nicht mehr zur Gänze auf dem Bildschirm Platz gefunden hätte.

Das Ziel von auflösungsunabhängigen Anwendungen ist, dieses Problem zu vermeiden, ohne daß dadurch das Programm an Funktionalität und optischer Aussagekraft einbüßt. Im Folgenden wird eine Übersicht über mögliche Einsatzbereiche für auflösungsunabhängige Anwendungen gegeben:

Größenangaben in Visual Basic

Unter Visual Basic sind standardmässig Twips (vbTwips) als Skalierungsmodus (Eigenschaft ScaleMode) eingestellt. Im Gegensatz dazu verwendet das Win32-API Pixel (vbPixels) als Skalierungsmodus. Daher ist oft eine Umrechnung zwischen diesen beiden Einheiten notwendig. Normalerweise entsprechen 15 Twips einem Pixel, dieser Wert kann aber von System zu System abweichen. Außerdem kann der Umrechnungsfaktor für Höhe und Breite unterschiedlich sein. Visual Basic stellt TwipsPerPixelX und TwipsPerPixelY als Eigenschaften des Screen-Objekts zur Verfügung. Visual Basic macht Höhe und Breite eines Fensters über dessen Eigenschaften Height und Width verfügbar. Die Ausmaße des Clientbereichs können über die Eigenschaften ClientHeight und ClientWidth ermittelt werden.

Anpassen der Formulare

Die Skalierung des Formulars und der sich darauf befindenden Steuerelemente soll so erfolgen, daß die Breite des Formulars nach der Skalierung einem vom Entwickler gesetzten Wert entspricht. Das Verhältnis von Höhe und Breite des Clientbereichs des Formulars soll trotz Skalierung konstant bleiben. Das Verhältnis der Außenmaße des Formulars, die Rahmen und Leisten einschließen, kann sich verändern. Daher kann bei einer auflösungsunabhängigen Anwendung auch nur entweder die Höhe oder die Breite ein konstantes Verhältnis zur Bildschirmhöhe oder Bildschirmbreite aufweisen. In unserem Beispiel wird dazu die Gesamtbreite des Formulars in Bezug auf die Breite des Bildschirms verwendet. So könnte man zum Beispiel angeben, daß die gewünschte Breite des Formulars immer genau der haben Bildschirmbreite entsprechen soll.

Als erster Schritt für die Bestimmung der neuen Formularhöhe wird das Verhältnis zwischen Bildschirmbreite und der Breite des Clientbereichs des Formulars ermittelt. Anschließend wird die Höhe des Clientbereichs mit dem Verhältnis zwischen Bildschirmbreite und Clientbreite, z. B. 1,46, multipliziert. Dann wird die Differenz zwischen der Höhe des Formulars und der alten Höhe des Clientbereichs addiert.

Anpassen der Steuerelemente

In den meisten Fällen kommt es vor, daß nach der Größenanpassung des Formulars einige Steuerelemente nicht mehr sichtbar sind oder nur einen Teil des verfügbaren Clientbereichs einnehmen. Daher müssen auch die Position und die Größe der Steuerelemente angepaßt werden. Dazu werden die Angaben für die Eigenschaften Left, Top, Width und Height der Steuerelemente mit dem Skalierungsfaktor multipliziert. Anschließend werden die Steuerelemente mit der Move-Funktion oder durch einzelnes Setzen der neuen Angaben positioniert und die neuen Größen zugewiesen.

Einige Steuerelemente, wie das Line-, ComboBox- und DriveListBox-Steuerelement müssen separat behandelt werden. Weiters müssen nur noch die Schriftgröße der Steuerelemente und ggf. die Einstellungen für Rahmendicke bei Line- und Shape-Steuerelement angepaßt werden.

Außerdem werden von vielen ActiveX-Steuerelementen die Standardmethoden zum Positionieren und Vergrößern/Verkleinern nicht unterstützt. Bei manchen Steuerelementen sind mehrere Eigenschaften für die Schriftgröße (d. h. verschiedene Schriftgrößen für die einzelnen Bereiche des Steuerelements) vorhanden. Je nach verwendeten Steuerelementen ist der Algorithmus entsprechend zu erweitern.

In unserem Beispiel ist kein spezieller Code für das ToolBar-Steuerelement und das SSTab-Steuerelement enthalten. Das ToolBar-Steuerelement kann andere Steuerelemente beinhalten, die mit der Funktion in ihrer Größe und Position angepaßt werden, allerdings kann das ToolBar-Steuerelement selbst nicht in seiner Größe verändert werden. Aus diesem Grund könnte man beispielsweise die in der ToolBar plazierten Steuerelemente von der Bearbeitung ausschließen (If TypeOf Control.Container Is Toolbar Then...).

Anpassen der Fonts

Text wird in einem Font dargestellt. Darunter versteht man eine Gruppe von Zeichen, die in Schriftcharakter, Schriftgrad, -stil und -stärke übereinstimmen. Unter Windows kommen zwei Typen von Schriftarten zum Einsatz: Rasterschriftarten und Vektorschriftarten.

Die in einer Rasterschriftart enthaltenen Zeichen liegen als Bitmaps vor. Aus diesem Grund sind diese Schriftarten nur in einigen ausgewählten Schriftgraden verfügbar, die Zeichen erscheinen eckig, wenn man sie vergrößert. Zu diesem Typ von Schriftarten zählen beispielsweise Sans Serif, Serifa und Courier. Diese Schriftarten sollten nur verwendet werden, wenn der Benutzer keine Möglichkeit hat, im Programm die Schriftgröße der Steuerelemente einzustellen. Für auflösungsunabhängige Anwendungen sind diese Schriftarten ungeeignet.

Vektorschriftarten (TrueType, OpenType) sind skalierbar, d. h., daß Zeichen in einer beliebigen Größe reproduziert werden können. Bei Vektorschriftarten werden die Zeichen als Gruppe von Vektoren gespeichert. Beim Anzeigen auf dem Bildschirm wird eine Rasterisierung vorgenommen, bei der die Zeichen in der gewünschten Größe auf eine Bitmap abgebildet werden. Unter Windows liegen u. a. die Schriftarten Tahoma, Arial und Times New Roman im Vektorformat vor. Dieser Typ von Schriftarten ist in auflösungsunabhängigen Anwendungen vorzuziehen.

Anpassen von Grafiken

Grafiken müssen separat behandelt werden, um Anzeigefehler zu vermeiden. Sind die Grafiken in PictureBox-Steuerelementen abgelegt, können sie überhaupt nicht vergrößert bzw. verkleinert werden, außer man würde sie mit der PaintPicture-Methode in der passenden Größe auf das Steuerelement zeichnen. Daher ist es empfehlenswert, auf PictureBox-Steuerelemente nach Möglichkeit zu verzichten und diese durch Image-Steuerelemente zu ersetzen. Letztere bieten eine Eigenschaft Stretch an, die, wenn sie den Wert True annimmt, das Bild immer der Größe des Image-Steuerelements angepaßt. Da Visual Basic bei der Größenänderung der Bilder kein Antialiasing durchführt, können Grafiken dadurch kantig erscheinen. Dies macht sich besonders bei transparenten GIF-Grafiken unschön bemerkbar, bei denen es vorkommen kann, daß die transparente Hintergrundfarbe an einigen Stellen durchscheint.

Schlußwort

Die Anpassung von Formularen und Steuerelementen an eine bestimmte Bildschirmauflösung ist sehr einfach möglich. Für die verschiedenen Steuerelementtypen ist es jedoch erforderlich, speziellen Code zu schreiben, der die Eigenheiten des jeweiligen Steuerelementtyps berücksichtigt. In anderen Klassenbibliotheken zur Erstellung grafischer Benutzeroberflächen wird die Skalierung der Steuerelemente auf Wunsch des Entwicklers automatisch vorgenommen. Im Windows-Forms-Paket des .NET Framework beispielsweise kann ein Formular über dessen Scale-Methode skaliert werden.

Downloads

Beispielprojekt (MultiResolution.zip)

Projekt im Visual-Basic-6.0-Format.