Entwickeln auflösungsunabhängiger Benutzerschnittstellen

Ein Beispiel  

Folgende Abbildungen zeigen ein herkömmliches Formular, bei dem die Grösse auf ca. 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 angezeigt wird. Das Formular wird in der vom Entwickler gewünschten Grösse angezeigt, wenn angenommen wird, dass der Entwickler selbst bei dieser Auflösung gearbeitet hat:

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, dass 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 die Erwartungen des Entwicklers. Das Formular ist auf die Grösse eines Dialogfensters geschrumpft und der Benutzer hat keine Möglichkeit, das Formular zu vergrössern. 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, das Auftreten dieses Problems zu vermeiden, ohne dass dadurch das Programm an Funktionalität und optischer Aussagekraft einbüsst. Im Folgenden wird eine Übersicht über mögliche Einsatzbereiche für auflösungsunabhängige Anwendungen gegeben:

• Anwendungen, die bei verschiedenen Auflösungen immer einen bestimmten Prozentsatz des Bildschirms in Anspruch nehmen sollen (z.B. Installationsprogramme).
• Präsentations- und Kioskanwendungen, Spiele für den Computer.
• Lernprogramme für Schulungen und Kinder sowie Anwendungen für Benutzer mit Sehbehinderungen.
• Programme, die nur in einer Version erscheinen, allerdings auf Systemen mit heterogener Konfiguration der Bildschirme eingesetzt werden.

Grössenangaben in Visual Basic  

Unter Visual Basic sind standardmässig Twips (vbTwips) als Skalierungsmodus (Eigenschaft ScaleMode) eingestellt. Im Gegensatz dazu verwendet aber das 32-Bit-Windows-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. Ausserdem 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 stellt die macht Höhe und Breite eines Fensters über dessen Eigenschaften Height und Width verfügbar. Die Ausmasse 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, dass die Breite des Formulars nach der Skalierung einem vom Entwickler gesetzten Wert entspricht. Die Skalierung soll so erfolgen, dass das Verhältnis von Höhe und Breite des Clientbereichs des Formulars konstant bleibt. Das Verhältnis der Aussenmasse des Formulars, die die Rahmen und Leisten einschliessen, 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, dass 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. Anschliessend 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, dass nach der Grössenanpassung 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össe der Steuerelemente angepasst werden. Dazu werden die Angaben für die Eigenschaften Left, Top, Width und Height der Steuerelemente mit dem Skalierungsfaktor multipliziert. Anschliessend werden die Steuerelemente mit der Move-Funktion oder durch einzelnes Setzen der neuen Angaben positioniert und die neuen Grössen zugewiesen.

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

Ausserdem werden von vielen ActiveX-Steuerelementen die Standardmethoden zum Positionieren und Vergrössern/Verkleinern nicht unterstützt. Bei manchen Steuerelementen mehrere Eigenschaften für die Schriftgrösse (d.?h. verschiedene Schriftgrössen 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össe und Position angepasst werden, allerdings kann das ToolBar-Steuerelement mit nicht in seiner Grösse verändert werden. Aus diesem Grund könnte man beispielsweise die in der ToolBar plazierten Steuerelemente von der Bearbeitung ausschliessen (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. Im Folgenden werden die beiden Typen von Schriftarten kurz charakterisiert:

Die in einer Rasterschriftart enthaltenen Zeichen werden als Bitmaps gespeichert. Aus diesem Grund sind diese Schriftarten nur in einigen wenigen Schriftgraden verfügbar, die Zeichen erscheinen, wenn man sie vergrössert, eckig. 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össe der Steuerelemente einzustellen. Für auflösungsunabhängige Anwendungen sind diese Schriftarten ungeeignet.

Vektorschriftarten (TrueType, OpenType) sind skalierbar, d.h., dass Zeichen in einer beliebigen Grösse 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össe 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össert bzw. verkleinert werden, ausser man würde sie mit der PaintPicture-Methode in der passenden Grösse 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össe des Image-Steuerelements angepasst. Da Visual Basic bei der Grössenänderung der Bilder kein Antialiasing durchführt, können Grafiken dadurch kantig erscheinen können. Dies macht sich besonders bei transparenten GIF-Grafiken unschön bemerkbar, bei denen es vorkommen kann, dass die transparente Hintergrundfarbe an einigen Stellen durchscheint.

Schlusswort  

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) [6155 Bytes]

Ihre Meinung  

Falls Sie Fragen zu diesem Tutorial haben oder Ihre Erfahrung mit anderen Nutzern austauschen möchten, dann teilen Sie uns diese bitte in einem der unten vorhandenen Themen oder über einen neuen Beitrag mit. Hierzu können sie einfach einen Beitrag in einem zum Thema passenden Forum anlegen, welcher automatisch mit dieser Seite verknüpft wird.