Kommunizieren mit dem Benutzer Ihres Programms: Die Benutzeroberfläche

  • Artikel

Aktualisiert: November 2007

In dieser Lektion erfahren Sie, was eine Benutzeroberfläche (UI) ist, was Steuerelemente sind und wie Sie einer Benutzeroberfläche Steuerelemente hinzufügen können.

In den frühen Jahren der Verwendung von PCs erfolgte die Interaktion mit Programmen hauptsächlich über eine Befehlszeile. Ein Programm wurde gestartet und dann unterbrochen, weil vor dem Fortfahren eine Eingabe durch den Benutzer erforderlich war. Die meisten Programme, mit denen Sie heutzutage arbeiten, werden in einem oder mehreren Fenstern ausgeführt. Dank dieser Fenster kann ein Benutzer mit dem Programm kommunizieren oder interagieren, indem er Eingaben vornimmt, auf Schaltflächen klickt oder in voreingestellten Menüs Elemente auswählt, u.v.m. In dieser und den nachfolgenden Lektionen erfahren Sie, wie Sie Ihre eigenen Windows-basierten Benutzeroberflächen erstellen können.

Verwenden von Formularen

Formulare sind die grundlegenden Bausteine für die Benutzeroberfläche. Jedes Formular im Programm stellt ein Fenster dar, das Benutzern angezeigt wird. Wenn Sie in der integrierten Entwicklungsumgebung (Integrated Development Environment, kurz IDE) von Visual Basic arbeiten, ist der Designer ein Formular, mit dem Sie die Benutzeroberfläche Ihrer Anwendung entwerfen, so als ob Sie in Windows Paint ein Bild zeichnen würden.

Steuerelemente werden im Designer verwendet, um die äußere Erscheinung der Benutzeroberfläche zu erstellen. Ein Steuerelement ist ein Objekt, dessen Darstellung und Verhalten vordefiniert sind. Ein Button-Steuerelement entspricht in der Erscheinung und dem Verhalten beispielsweise einer Schaltfläche. Wenn ein Benutzer darauf klickt, wird durch eine geänderte Darstellung sichtbar gemacht, dass die Schaltfläche gedrückt wurde.

Jedes Steuerelement in Visual Basic hat eine eigene Funktion. So dient zum Beispiel das TextBox-Steuerelement zur Eingabe von Text und das PictureBox-Steuerelement zur Anzeige von Bildern. Visual Basic enthält mehr als fünfzig verschiedene Steuerelemente. Sie können aber auch eigene Steuerelemente erstellen, die so genannten benutzerdefinierten Steuerelemente. Einzelheiten zu den einzelnen Arten von Steuerelementen erfahren Sie in späteren Lektionen.

Beim Entwerfen der Benutzeroberfläche ziehen Sie Steuerelemente aus der Toolbox und legen diese auf einem Formular ab. Anschließend können Sie Position und Größe der Steuerelemente anpassen, um die gewünschte Darstellung zu erhalten. Sie können die Darstellung noch weiter verändern, indem Sie im Eigenschaftenfenster die Eigenschaften von Formularen und Steuerelementen festlegen. Die meisten Formulare und Steuerelemente besitzen beispielsweise eine BackColor-Eigenschaft, mit der Sie die Hintergrundfarbe festlegen können.

Eigenschaften werden auch verwendet, um das Verhalten eines Formulars oder eines Steuerelements zu definieren. Die ShowInTaskbar-Eigenschaft eines Formulars zum Beispiel legt fest, ob das Formular bei Ausführen des Programms in der Windows-Taskleiste angezeigt werden soll. Mithilfe von Eigenschaften können Sie das Aussehen und Verhalten der Benutzeroberfläche anpassen.

Übung

So ändern Sie die Eigenschaften eines Formulars

  1. Klicken Sie im Menü Datei auf Neues Projekt.

  2. Klicken Sie im Dialogfeld Neues Projekt im Bereich Vorlagen auf Windows-Anwendung.

  3. Geben Sie im Feld Name den Namen FirstForm ein, und klicken Sie dann auf OK.

    Ein neues Windows Forms-Projekt wird erstellt. Im Hauptfenster wird ein neues Formular angezeigt, dessen Eigenschaften im Eigenschaftenfenster in der unteren rechten Ecke der IDE von Visual Basic angezeigt werden.

  4. Klicken Sie auf das Formular, um es auszuwählen.

  5. Ändern Sie im Eigenschaftenfenster die Text-Eigenschaft in "Mein erstes Formular", und drücken Sie dann die EINGABETASTE.

    Der Text am oberen Rand des Formulars ändert sich, nachdem Sie den neuen Wert eingegeben haben.

  6. Ändern Sie im Eigenschaftenfenster die BackColor-Eigenschaft in eine andere Farbe, indem Sie eine Farbe aus der Dropdownliste auswählen.

    Beachten Sie, dass die BackColor-Eigenschaft durch eine besondere Schnittstelle geändert wird. Diese Schnittstelle ermöglicht Ihnen, die Farbe zu sehen, bevor Sie sie auswählen. Außerdem können Sie zwischen den aktuell im System verwendeten Farben, normalen Webfarben oder einer benutzerdefinierten Farbauswahl wählen. Sie können aber auch einfach den Namen der Farbe auf Englisch (z. B. Red) in das Feld im Eigenschaftenfenster eingeben.

    Experimentieren Sie ein wenig, indem Sie die anderen Eigenschaften des Formulars ändern. Wenn Sie diesen Schritt abgeschlossen haben, fahren Sie mit der nächsten Prozedur fort.

Einfügen von Steuerelementen in das Formular

In dieser Prozedur fügen Sie dem Formular Steuerelemente hinzu, indem Sie das Steuerelement im Fenster Toolbox auswählen, das sich meist auf der linken Seite der Visual Basic-IDE befindet, und das Steuerelement dann auf das Formular ziehen. Anschließend passen Sie die Eigenschaften des Steuerelements an.

So fügen Sie dem Formular Steuerelemente hinzu

  1. Ziehen Sie aus der Toolbox jeweils ein Steuerelement Button, TextBox, Label und zum Schluss CheckBox auf das Formular.

  2. Wählen Sie das Button-Steuerelement aus, und verschieben Sie es auf dem Formular durch Ziehen, um seine Position zu ändern.

    Beachten Sie, dass Führungslinien angezeigt werden, wenn Sie das Steuerelement in die Nähe anderer Steuerelemente ziehen. Diese Führungslinien helfen Ihnen, die Steuerelemente genau zu positionieren.

  3. Wiederholen Sie diesen Vorgang für die anderen Steuerelemente, bis die Darstellung der Benutzeroberfläche Ihren Wünschen entspricht.

  4. Wählen Sie das Button-Steuerelement aus, klicken Sie auf den Ziehpunkt in der rechten unteren Ecke, und ziehen Sie dann daran, um die Größe des Steuerelements zu ändern.

  5. Nehmen Sie sich die Zeit, mit den Eigenschaften der Steuerelemente zu experimentieren. Klicken Sie auf die einzelnen Steuerelemente des Formulars, um sie auszuwählen, und ändern Sie anschließend im Eigenschaftenfenster einige der Eigenschaften. Sie können beispielsweise die Eigenschaften Font, BackColor, ForeColor und Text versuchsweise ändern. Weitere Informationen finden Sie unter Genauere Betrachtung: Steuerelementlayout.

  6. Drücken Sie F5, um das Programm auszuführen. Ein Fenster mit den von Ihnen hinzugefügten Steuerelementen wird angezeigt. Beachten Sie, dass Sie auf die Schaltfläche klicken, das Kontrollkästchen aktivieren und deaktivieren und Text in das Textfeld eingeben können.

Nächste Schritte

In dieser Lektion haben Sie gelernt, wie Sie ein Formular erstellen und dem Formular Steuerelemente hinzufügen können. Sie haben auch gelernt, wie Sie die Eigenschaften von Formularen und Steuerelementen im Eigenschaftenfenster ändern können. In den folgenden Lektionen werden Sie einige der Steuerelemente noch einmal genauer kennen lernen.

Nächste Lektion: Interaktion mit dem Benutzer: Verwenden von Schaltflächen

Siehe auch

Konzepte

Genauere Betrachtung: Eigenschaften, Methoden und Ereignisse

Weitere Ressourcen

Erstellen der visuellen Darstellung eines Programms: Einführung in Windows Forms