Lernprogramm: Erstellen einer 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.

In diesem ersten Lernprogramm erfahren Sie, wie Sie:

• Erstellen eines Visual Studio-Projekts, das Windows Forms verwendet
• Hinzufügen eines Layoutelements
• Ausführen der Anwendung

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

• Sie benötigen Visual Studio, um dieses Lernprogramm abzuschließen. Besuchen Sie die Visual Studio-Downloadseite für eine kostenlose Version.
• Die .NET-Desktopentwicklung-Workload Um diese Workload in Visual Studio zu überprüfen oder zu installieren, wählen Sie Extras>Extras und Features abrufen aus. Weitere Informationen finden Sie unter Ändern von Workloads oder einzelnen Komponenten.

Erstellen Ihres Windows Forms-Projekts

Wenn Sie eine Bildanzeige erstellen, besteht der erste Schritt darin, ein Windows Forms-App-Projekt zu erstellen.

1. Öffnen Sie Visual Studio.

2. Wählen Sie im Startfenster Neues Projekt erstellenaus.

   

3. Suchen Sie im Fenster Erstellen eines neuen Projekts nach Windows Forms. Wählen Sie dann in der Liste Projekttyp die Option Desktop aus.

4. Wählen Sie die Windows Forms App (.NET Framework) Vorlage für C# oder Visual Basic aus, und wählen Sie dann Nextaus.

   

5. Geben Sie Ihrem Projekt im Fenster Neues Projekt konfigurieren den Namen PictureViewer, und wählen Sie dann Erstellen aus.

   

Visual Studio erstellt eine Lösung für Ihre App. Eine Lösung ist ein Container für alle Projekte und Dateien, die von Ihrer App benötigt werden.

Zu diesem Zeitpunkt zeigt Visual Studio ein leeres Formular im Windows Form Designeran.

Hinzufügen eines Layoutelements

Ihre Bildanzeige-App enthält ein Bildfeld, ein Kontrollkästchen und vier Schaltflächen, die Sie im nächsten Tutorial hinzufügen werden. Das Layoutelement steuert ihre Position im Formular. In diesem Abschnitt wird gezeigt, wie Sie den Titel Des Formulars ändern, die Größe des Formulars ändern und ein Layoutelement hinzufügen.

1. Wählen Sie in Ihrem Projekt den Windows Forms-Designer aus. Die Registerkarte liest Form1.cs [Entwurf] für C# oder Form1.vb [Entwurf] für Visual Basic.

2. Wählen Sie eine beliebige Stelle in Form1 aus.

3. Im Fenster Eigenschaften werden nun Eigenschaften für das Formular angezeigt. Das Eigenschaftenfenster befindet sich in der Regel in der unteren rechten Ecke von Visual Studio. Dieser Abschnitt steuert verschiedene Eigenschaften, z. B. Vordergrund- und Hintergrundfarbe, Titeltext, der oben im Formular angezeigt wird, und die Größe des Formulars.

   Wenn Eigenschaften nicht angezeigt wird, wählen Sie Anzeigen>Eigenschaftenfenster aus.

4. Suchen Sie die eigenschaft Text im Fenster Eigenschaften. Je nachdem, wie die Liste sortiert ist, müssen Sie möglicherweise nach unten scrollen. Geben Sie den Wert Picture Viewer ein, und drücken Sie dann die EINGABETASTE.

   Ihr Formular enthält nun den Text Bildanzeige in der Titelleiste.

   Anmerkung

   Sie können Eigenschaften nach Kategorie oder alphabetisch anzeigen. Verwenden Sie die Schaltflächen im Fenster Eigenschaften, um zwischen und zurück zu wechseln.

5. Wählen Sie das Formular erneut aus. Wählen Sie den Ziehpunkt des Formulars unten rechts aus. Der Griff ist ein kleines weißes Quadrat in der unteren rechten Ecke des Formulars.

   

   Ziehen Sie den Griff, um die Größe des Formulars zu ändern, damit das Formular breiter und etwas höher wird. Im Fenster Eigenschaften können Sie feststellen, dass sich der Wert der Eigenschaft Größe unterscheidet. Sie können auch die Größe des Formulars ändern, indem Sie die Eigenschaft Größe ändern.

6. 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.

7. Wählen Sie das kleine Dreieckssymbol neben Containern aus, um die Gruppe zu öffnen.

   

8. Doppelklicken Sie in der Toolbox auf TableLayoutPanel. Sie können ein Steuerelement auch aus der Toolbox auf das Formular ziehen. Das TableLayoutPanel-Steuerelement wird in Ihrem Formular angezeigt.

   

   Anmerkung

   Nachdem Sie Ihr TableLayoutPanel hinzugefügt haben, wählen Sie eine beliebige Stelle innerhalb des Formulars aus, um es zu schließen, wenn in Ihrem Formular ein Fenster mit dem Titel TableLayoutPanel-Aufgabenangezeigt wird.

9. Wählen Sie TableLayoutPanel aus. Sie können überprüfen, welches Steuerelement ausgewählt ist, indem Sie sich das Fenster Eigenschaften ansehen.

   

10. Suchen Sie bei ausgewähltem TableLayoutPanel nach der Dock-Eigenschaft mit dem Wert None. Wählen Sie den Dropdownpfeil und dann Füllen aus. Dies ist die große Schaltfläche in der Mitte des Dropdownmenüs.

    

    Andocken bezieht sich darauf, wie ein Fenster an ein anderes Fenster oder einen anderen Bereich angefügt wird.

    TableLayoutPanel füllt nun das gesamte Formular aus. Wenn Sie die Größe des Formulars erneut ändern, bleibt TableLayoutPanel angedockt und passt sich an.

11. Wählen Sie im Formular das TableLayoutPanel aus. In der oberen rechten Ecke gibt es eine kleine schwarze Dreiecksschaltfläche.

    Wählen Sie das Dreieck aus, um die Aufgabenliste des Steuerelements anzuzeigen.

    

12. Wählen Sie "Zeilen und Spalten bearbeiten" aus, um das Dialogfeld Spalten- und Zeilenformatvorlagen anzuzeigen.

13. Wählen Sie Spalte1 aus, und legen Sie dessen Größe auf 15 Prozent fest. Stellen Sie sicher, dass die Option Prozent ausgewählt ist.

14. Wählen Sie Spalte2 aus, und legen Sie sie auf 85 Prozent fest.

    

15. Wählen Sie oben im Dialogfeld Spalten- und Zeilenstile unter Anzeigen die Option Zeilen aus. Legen Sie Zeile1 auf 90 Prozent fest, und Zeile2- auf 10 Prozent. Wählen Sie OK aus, um Ihre Änderungen zu speichern.

    Ihr TableLayoutPanel verfügt jetzt über eine große oberste Zeile, eine kleine untere Zeile, eine kleine linke Spalte und eine große rechte Spalte.

    

Ihr Layout ist abgeschlossen.

Anmerkung

Bevor Sie Ihre Anwendung ausführen, speichern Sie Ihre App, indem Sie die Symbolleistenschaltfläche "Alle speichern" auswählen. Alternativ können Sie zum Speichern der App in der Menüleiste Datei>Alle speichern auswählen oder STRG+UMSCHALTTASTE+S drücken. Es ist eine bewährte Methode, früh und oft zu speichern.

Ausführen der App

Wenn Sie ein Windows Forms-App-Projekt erstellen, erstellen Sie ein Programm, das ausgeführt wird. In dieser Phase macht Ihre Picture Viewer-App nicht viel. Vorerst zeigt sie ein leeres Fenster mit Picture Viewer in der Titelleiste an.

Führen Sie zum Ausführen der App die folgenden Schritte aus.

1. Verwenden Sie eine der folgenden Methoden:

   • Wählen Sie die Taste F5 aus.
   • Wählen Sie auf der Menüleiste Debug>Debugging startenaus.
   • Wählen Sie auf der Symbolleiste die Schaltfläche Start aus.

   Visual Studio führt Ihre App aus. Ein Fenster mit dem Titel Bildanzeige wird angezeigt.

   

   Sehen Sie sich die Visual Studio-IDE-Symbolleiste an. Weitere Schaltflächen werden auf der Symbolleiste angezeigt, wenn Sie eine Anwendung ausführen. Mit diesen Schaltflächen können Sie Ihre App stoppen und starten sowie beim Auffinden von Fehlern helfen.

   

2. Verwenden Sie eine der folgenden Methoden, um Ihre App zu beenden:

   • Wählen Sie auf der Symbolleiste die Schaltfläche Debuggen beenden aus.
   • Wählen Sie in der Menüleiste Debuggen>Debugging beenden aus.
   • Drücken Sie auf der Tastatur die Tasten UMSCHALT+F5.
   • Wählen Sie X in der oberen Ecke des Picture Viewer Fensters aus.

   Wenn Sie Ihre App aus der Visual Studio-IDE ausführen, wird dies als Debuggen bezeichnet. Sie führen Ihre Anwendung aus, um Fehler zu finden und zu beheben. Sie folgen demselben Verfahren zum Ausführen und Debuggen anderer Programme. Weitere Informationen zum Debuggen finden Sie unter Sehen Sie sich zuerst den Debuggeran.

Nächster Schritt

Wechseln Sie zum nächsten Lernprogramm, um zu erfahren, wie Sie Ihrem Picture Viewer-Programm Steuerelemente hinzufügen.

Lernprogramm Teil 2: Hinzufügen von Steuerelementen zu Ihrer Bildanzeige