Lernprogramm: Hinzufügen von Steuerelementen zur Bildanzeige windows Forms App (.NET Framework)

In dieser Reihe von drei Lernprogrammen erstellen Sie eine Windows Forms-Anwendung, die ein Bild lädt und anzeigt. Die Integrierte Entwurfsumgebung (Integrated Design Environment, IDE) von Visual Studio stellt die Tools bereit, die Sie zum Erstellen der App benötigen.

Dieses Programm verfügt über ein Bildfeld, ein Kontrollkästchen und mehrere Schaltflächen, die Sie zum Steuern der Anwendung verwenden. In diesem Lernprogramm erfahren Sie, wie Sie diese Steuerelemente hinzufügen.

In diesem zweiten Lernprogramm erfahren Sie, wie Sie:

• Hinzufügen von Steuerelementen zu Ihrer Anwendung
• Hinzufügen von Schaltflächen in einem Layoutbereich
• Ändern von Namen und Positionen von Steuerelementen
• Hinzufügen von Dialogfeldkomponenten

Um eine neue Windows Forms-App mit .NET zu erstellen, folgen Sie dem Lernprogramm Erstellen einer Windows Forms-App mit .NET. Weitere Informationen finden Sie im Desktophandbuch für Windows Forms .NET-.

Voraussetzungen

• Dieses Lernprogramm basiert auf dem vorherigen Lernprogramm Erstellen einer Bildanzeigeanwendung. Führen Sie zuerst das erste aus, und beginnen Sie mit dem Projekt, das Sie für dieses Lernprogramm erstellt haben.

Hinzufügen von Steuerelementen zu Ihrer Anwendung

Die Picture Viewer-App verwendet ein PictureBox-Steuerelement zum Anzeigen eines Bilds. Es verwendet ein Kontrollkästchen und mehrere Schaltflächen, um das Bild und den Hintergrund zu verwalten und die App zu schließen. Sie fügen das PictureBox und ein Kontrollkästchen aus der Toolbox in der Visual Studio-IDE hinzu.

1. Öffnen Sie Visual Studio. Ihr Picture Viewer-Projekt wird unter Zuletzt verwendete Dateien öffnen angezeigt.

2. Wählen Sie im Windows Forms Designerdas TableLayoutPanel aus, das Sie im vorherigen Lernprogramm hinzugefügt haben. Überprüfen Sie, ob tableLayoutPanel1 im Eigenschaften-Fenster angezeigt wird.

3. Wählen Sie auf der linken Seite der Visual Studio-IDE die Registerkarte Toolbox aus. Wenn sie nicht angezeigt wird, wählen Sie Ansicht>Toolbox in der Menüleiste oder STRG+ALT-+X-aus. Erweitern Sie in der Toolbox Allgemeine Steuerelemente.

4. Doppelklicken Sie auf PictureBox, um dem Formular ein PictureBox-Steuerelement hinzuzufügen. Visual Studio fügt das PictureBox-Steuerelement der ersten leeren Zelle von TableLayoutPanel hinzu.

5. Wählen Sie das neue PictureBox Steuerelement aus, um es auszuwählen, und wählen Sie dann das schwarze Dreieck im neuen PictureBox-Steuerelement aus, um dessen Aufgabenliste anzuzeigen.

   

6. Wählen Sie In übergeordnetem Container andocken aus, um die PictureBox-Eigenschaft Andocken auf Füllen festzulegen. Sie können diesen Wert im Fenster Eigenschaften sehen.

7. Legen Sie im Fenster Eigenschaften für das PictureBox-Objekt die eigenschaft ColumnSpan auf 2fest. PictureBox füllt nun beide Spalten aus.

8. Legen Sie die BorderStyle-Eigenschaft auf Fixed3Dfest.

9. Wählen Sie im Windows Forms-Designer das TableLayoutPanel-Steuerelement aus. Doppelklicken Sie dann in der Toolbox-auf das CheckBox- Element, um ein neues CheckBox-Steuerelement hinzuzufügen. PictureBox nimmt die ersten beiden Zellen in TableLayoutPanel ein, sodass das CheckBox-Steuerelement der Zelle unten links hinzugefügt wird.

10. Wählen Sie die Eigenschaft Text aus, und geben Sie Strecken ein.

    

Hinzufügen von Schaltflächen in einem Layoutbereich

Bisher haben Sie dem TableLayoutPanel Steuerelemente hinzugefügt. In diesen Schritten wird gezeigt, wie Sie einem neuen Layoutpanel im TableLayoutPanel vier Schaltflächen hinzufügen.

1. Wählen Sie das TableLayoutPanel-Element im Formular aus. Öffnen Sie die Toolbox, und wählen Sie Container aus. Doppelklicken Sie auf FlowLayoutPanel-, um der letzten Zelle von TableLayoutPanel ein neues Steuerelement hinzuzufügen.

2. Legen Sie die eigenschaft "Dock" von FlowLayoutPanel auf Fillfest. Sie können diese Eigenschaft festlegen, indem Sie das schwarze Dreieck und dann Dock im übergeordneten Containerauswählen.

   Ein FlowLayoutPanel ist ein Container, der andere Steuerelemente in einer Zeile nacheinander anordnet.

3. Wählen Sie das neue FlowLayoutPanel aus, und öffnen Sie dann die Toolbox, und wählen Sie allgemeine Steuerelementeaus. Doppelklicken Sie auf das Button--Element, um ein Button-Steuerelement mit dem Namen button1hinzuzufügen.

4. Doppelklicken Sie erneut auf Schaltfläche, um eine weitere Schaltfläche hinzuzufügen. Die IDE ruft die nächste Schaltfläche, button2, auf.

5. Fügen Sie auf diese Weise zwei weitere Schaltflächen hinzu. Eine weitere Option besteht darin, die Schaltfläche button2 auszuwählen. Wählen Sie dann Bearbeiten>Kopieren oder STRG+C aus. Wählen Sie dann Bearbeiten>Einfügen in der Menüleiste aus, oder drücken Sie STRG+V, um eine Kopie der Schaltfläche einzufügen. Fügen Sie sie nun erneut ein. Die IDE fügt button3 und button4 zum FlowLayoutPanel hinzu.

6. Wählen Sie die erste Schaltfläche aus, und legen Sie die entsprechende Text-Eigenschaft auf Bild anzeigen fest.

7. Legen Sie die Text-Eigenschaften der nächsten drei Schaltflächen auf Bild löschen, Hintergrundfarbe festlegen und Schließen fest.

8. Wenn Sie die Schaltflächen anpassen und anordnen möchten, wählen Sie "FlowLayoutPanel" aus. Legen Sie die Eigenschaft FlowDirection auf RightToLeftfest.

   Die Schaltflächen sollten entlang der rechten Seite der Zelle ausgerichtet sein und in umgekehrter Reihenfolge angezeigt werden, sodass sich die Schaltfläche Bild anzeigen auf der rechten Seite der Zelle befindet. Sie können die Schaltflächen um das FlowLayoutPanel ziehen, um sie in beliebiger Reihenfolge anzuordnen.

9. Wählen Sie die Schaltfläche Schließen aus. Um dann die restlichen Schaltflächen gleichzeitig auszuwählen, halten Sie die STRG- gedrückt, und wählen Sie sie aus.

10. Legen Sie im Fenster Eigenschaften die AutoSize-Eigenschaft auf Truefest. Die Größe der Schaltflächen wird an ihren Text angepasst.

    

Sie können Ihr Programm ausführen, um zu sehen, wie die Steuerelemente aussehen. Drücken Sie F5, wählen Sie Debuggen>Debuggen starten aus, oder klicken Sie auf die Schaltfläche Starten. Die von Ihnen hinzugefügten Schaltflächen tun noch nichts.

Ändern von Steuerelementnamen

Ihr Formular enthält vier Schaltflächen mit dem Namen button1, button2, button3und button4 in C#. In Visual Basic ist der standard erste Buchstabe eines Steuerelementnamens großgeschrieben, sodass die Schaltflächen Button1, Button2, Button3und Button4benannt werden. Führen Sie diese Schritte aus, um ihnen informativere Namen zu geben.

1. Wählen Sie im Formular die Schaltfläche Schließen aus. Wenn immer noch alle Schaltflächen ausgewählt sind, wählen Sie ESC- aus, um die Auswahl abzubrechen.

2. Suchen Sie im Fenster Eigenschaften nach (Name). Ändern Sie den Namen in closeButton.

   

   Die IDE akzeptiert keine Namen, die Leerzeichen enthalten.

3. Benennen Sie die anderen drei Schaltflächen in backgroundButton-, clearButton-und showButton-um. Sie können die Namen überprüfen, indem Sie die Dropdownliste der Steuerelementauswahl im Fenster Eigenschaften auswählen. Die neuen Schaltflächennamen werden angezeigt.

Sie können den Namen eines beliebigen Steuerelements ändern, z. B. "TableLayoutPanel" oder "CheckBox".

Hinzufügen von Dialogfeldkomponenten

Ihre App kann Bilddateien öffnen und mithilfe von Komponenten eine Hintergrundfarbe auswählen. Eine Komponente ist wie ein Steuerelement. Sie verwenden die Toolbox-, um ihrem Formular eine Komponente hinzuzufügen. Sie legen dessen Eigenschaften mithilfe des Fensters Eigenschaften fest.

Im Gegensatz zu einem Steuerelement fügt das Hinzufügen einer Komponente zu Ihrem Formular kein sichtbares Element hinzu. Stattdessen werden bestimmte Verhaltensweisen bereitgestellt, die Sie mit Code auslösen können. Beispielsweise handelt es sich um eine Komponente, die ein Dialogfeld Datei öffnen öffnet.

In diesem Abschnitt fügen Sie dem Formular eine OpenFileDialog Komponente und eine ColorDialog Komponente hinzu.

1. Wählen Sie den Windows Forms Designer (Form1.cs [Design]) aus. Öffnen Sie dann die Toolbox, und wählen Sie die Gruppe Dialogfelder aus.

2. Doppelklicken Sie auf OpenFileDialog-, um dem Formular eine Komponente namens openFileDialog1 hinzuzufügen.

3. Doppelklicken Sie auf ColorDialog, um die Komponente colorDialog1hinzuzufügen. Die Komponenten werden unten in Windows Forms Designer als Symbole angezeigt.

   

4. Wählen Sie das openFileDialog1-Symbol aus, und legen Sie zwei Eigenschaften fest:

   • Legen Sie die eigenschaft Filter auf den folgenden Wert fest:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Legen Sie die eigenschaft Title auf den folgenden Wert fest: Wählen Sie eine Bilddateiaus.

   Die Einstellungen der Eigenschaft Filter bestimmen die Typen, die im Dialogfeld Ein Bild auswählen angezeigt werden.

Nächster Schritt

Wechseln Sie zum nächsten Lernprogramm, um zu erfahren, wie Sie Ihrer Anwendung Code hinzufügen.

Lernprogramm teil 3: Hinzufügen von Code zu Ihrem Bildbetrachter