Exemplarische Vorgehensweise: Erstellen einer Multipane-Benutzeroberfläche mit Windows Forms unter Verwendung von Visual J#
Das Splitter-Steuerelement für Windows Forms stellt eine einfache Möglichkeit dar, die Größe einer komplexen Benutzeroberfläche zu ändern. Wenn Sie Dock-Eigenschaft und Z-Anordnung der Steuerelemente festlegen, d. h. die Position der Steuerelemente auf der Z-Achse des Formulars, können Sie eine benutzerfreundliche und intuitiv zu verwendende Benutzeroberfläche entwickeln.
Hinweis Sie können die Z-Anordnung der Steuerelemente auch bearbeiten, indem Sie mit der rechten Maustaste klicken und BringToFront oder SendToBack auswählen. Weitere Informationen über die Z-Anordnung von Steuerelementen in Windows Forms finden Sie unter Überlagern von Objekten in Windows Forms.
Beim Andocken von Steuerelementen in einem bildlauffähigen Steuerelement ist es sinnvoll, ein bildlauffähiges untergeordnetes Steuerelement, z. B. das Panel-Steuerelement, hinzuzufügen, in dem weitere Steuerelemente enthalten sind, für die möglicherweise ein Bildlauf durchgeführt werden muss. Das untergeordnete Panel-Steuerelement sollte dem bildlauffähigen Steuerelement hinzugefügt werden. Legen Sie für seine Dock-Eigenschaft DockStyle.Fill und für seine AutoScroll-Eigenschaft true fest Legen Sie für die AutoScroll-Eigenschaft des übergeordneten bildlauffähigen Steuerelements false fest.
In diesem Beispiel wird eine Multipane-Benutzeroberfläche erstellt, die der in Microsoft Outlook ähnelt. Das Beispiel konzentriert sich auf Techniken zum Anordnen des Splitter-Steuerelements und anderer Steuerelemente im Formular und nicht auf das Hinzufügen von Funktionalität, mit der die Anwendung für einen bestimmten Zweck eingesetzt werden könnte. Es verfügt über ein TreeView-Steuerelement, das an der linken Seite des Formulars angedockt ist. Auf der rechten Seite des Formulars befindet sich ein Panel-Steuerelement mit einem ListView-Steuerelement über einem RichTextBox-Steuerelement. Die Benutzeroberfläche wird über zwei Aufteilungssteuerelemente verwaltet, mit der sich die Größe der anderen Steuerelemente unabhängig voneinander ändern lässt. Die Steuerelemente TreeView und ListView zeigen die Daten an, während das Panel-Steuerelement für das richtige Verhalten bei Größenänderungen zuständig ist. Sie können die Techniken dieser Prozedur anpassen, um eigene Benutzeroberflächen zu entwerfen.
Erstellen der Benutzeroberfläche zur Entwurfszeit
So erstellen Sie zur Entwurfszeit eine Benutzeroberfläche im Outlook-Design
Erstellen Sie ein neues Projekt vom Typ Windows-Anwendung. Weitere Informationen finden Sie unter Erstellen eines Windows-Anwendungsprojekts.
Ziehen Sie ein TreeView-Steuerelement aus der Toolbox in das Formular. Legen Sie im Eigenschaftenfenster Left für die Dock-Eigenschaft fest. Klicken Sie dazu auf das linke Fenster im Wert-Editor, der durch Klicken auf den Abwärtspfeil angezeigt wird.
Ziehen Sie ein Splitter-Steuerelement aus der Toolbox in das Formular. Es wird automatisch am rechten Rand des TreeView-Steuerelements angedockt.
Ziehen Sie ein Panel-Steuerelement aus der Toolbox in das Formular. Legen Sie im Eigenschaftenfenster Fill für die Dock-Eigenschaft fest. Klicken Sie dazu auf das mittlere Fenster im Wert-Editor, der durch Klicken auf den Abwärtspfeil angezeigt wird. Die Fläche füllt die rechte Seite des Formulars vollständig aus.
Ziehen Sie ein ListView-Steuerelement aus der Toolbox auf das Panel-Steuerelement, das Sie zum Formular hinzugefügt haben. Legen Sie die Dock-Eigenschaft des ListView-Steuerelements auf Top fest.
Ziehen Sie ein Splitter-Steuerelement aus der Toolbox auf das Panel-Steuerelement, das Sie zum Formular hinzugefügt haben. Legen Sie im Eigenschaftenfenster Top für die Dock-Eigenschaft fest. Klicken Sie dazu auf das obere Fenster im Wert-Editor, der durch Klicken auf den Abwärtspfeil angezeigt wird. Dadurch wird es am unteren Rand des ListView-Steuerelements angedockt.
Ziehen Sie ein RichTextBox-Steuerelement aus der Toolbox auf das Panel-Steuerelement. Setzen Sie die Dock-Eigenschaft des RichTextBox-Steuerelements auf Fill.
Drücken Sie F5, um die Anwendung auszuführen.
Das Formular zeigt eine aus drei Teilen bestehende Benutzeroberfläche, die der Microsoft Outlook-Schnittstelle ähnelt. Wenn Sie den Mauszeiger über eines der Splitter-Steuerelemente ziehen, können Sie die Größe der Fenster ändern.
Programmgesteuertes Erstellen der Benutzeroberfläche
So erstellen Sie programmgesteuert eine Benutzeroberfläche im Outlook-Design
Erstellen Sie ein neues Projekt vom Typ Windows-Anwendung. Weitere Informationen finden Sie unter Erstellen eines Windows-Anwendungsprojekts.
Deklarieren Sie alle Steuerelemente, aus denen die Benutzeroberfläche besteht. Verwenden Sie in diesem Beispiel die Steuerelemente TreeView, ListView, Panel, Splitter und RichTextBox, um die Microsoft Outlook-Benutzeroberfläche nachzuahmen.
// Visual J# private System.Windows.Forms.TreeView treeView1; private System.Windows.Forms.ListView listView1; private System.Windows.Forms.RichTextBox richTextBox1; private System.Windows.Forms.Splitter splitter2; private System.Windows.Forms.Splitter splitter1; private System.Windows.Forms.Panel panel1;Erstellen Sie eine Prozedur, die die Benutzeroberfläche definiert. Der unten stehende Code legt die Eigenschaften so fest, dass das Formular der Benutzeroberfläche in Microsoft Outlook ähnelt. Wenn Sie jedoch andere Steuerelemente verwenden oder sie anders andocken, können Sie ebenso leicht andere Benutzeroberflächen entwickeln, die genauso flexibel sind.
// Visual J# public void OutlookUI() { // Create an instance of each control being used. treeView1 = new System.Windows.Forms.TreeView(); listView1 = new System.Windows.Forms.ListView(); richTextBox1 = new System.Windows.Forms.RichTextBox(); splitter2 = new System.Windows.Forms.Splitter(); splitter1 = new System.Windows.Forms.Splitter(); panel1 = new System.Windows.Forms.Panel(); // Insert code here to hook up event methods. // Set properties of TreeView control. treeView1.set_Dock ( System.Windows.Forms.DockStyle.Left); treeView1.set_Width ( this.get_ClientSize().get_Width()/3); treeView1.set_TabIndex ( 0); treeView1.get_Nodes().Add("treeView"); // Set properties of ListView control. listView1.set_Dock ( System.Windows.Forms.DockStyle.Top); listView1.set_Height ( this.get_ClientSize().get_Height() * 2 / 3); listView1.set_TabIndex ( 0); listView1.get_Items().Add("listView"); // Set properties of RichTextBox control. richTextBox1.set_Dock ( System.Windows.Forms.DockStyle.Fill); richTextBox1.set_TabIndex ( 2); richTextBox1.set_Text ( "richTextBox1"); // Set properties of Panel's Splitter control. splitter2.set_Dock ( System.Windows.Forms.DockStyle.Top); // Width is irrelevant if splitter is docked to Top. splitter2.set_Height ( 3); // Use a different color to distinguish the two splitters. splitter2.set_BackColor (Color.get_Blue()); splitter2.set_TabIndex ( 1); // Set TabStop to false for ease of use when negotiating // the user interface. splitter2.set_TabStop ( false); // Set properties of Form's Splitter control. splitter1.set_Location (new System.Drawing.Point(121, 0)); splitter1.set_Size ( new System.Drawing.Size(3, 273)); splitter1.set_BackColor ( Color.get_Red()); splitter1.set_TabIndex ( 1); // Set TabStop to false for ease of use when negotiating // the user interface. splitter1. set_TabStop (false); // Add the appropriate controls to the Panel. // The order of the controls in this call is critical. panel1.get_Controls().AddRange(new System.Windows.Forms.Control[] {richTextBox1, splitter2, listView1}); // Set properties of Panel control. panel1. set_Dock ( System.Windows.Forms.DockStyle.Fill); panel1. set_TabIndex (2); // Add the rest of the controls to the form. // The order of the controls in this call is critical. this.get_Controls().AddRange(new System.Windows.Forms.Control[] {panel1, splitter1, treeView1}); this. set_Text ( "Intricate UI Example"); }Fügen Sie diese Codezeile zum Konstruktor für die Formularklasse hinzu.
// Visual J# // Add this to the form class's constructor. OutlookUI();Drücken Sie F5, um die Anwendung auszuführen.
Siehe auch
Einführung in das Splitter-Steuerelement in Windows Forms | Exemplarische Vorgehensweisen für Windows Forms