Procedura: creare un'interfaccia utente a più riquadri con Windows Form

Articolo
08/11/2011

La procedura descritta di seguito consente di creare un'interfaccia utente a più riquadri simile all'interfaccia di Microsoft Outlook, che include l'elenco cartelle, un riquadro per i messaggi e il riquadro di anteprima. Questa disposizione viene ottenuta principalmente tramite l'ancoraggio dei controlli al form.

Per ancorare un controllo, è necessario determinare a quale bordo del contenitore padre deve essere fissato. Se pertanto si imposta la proprietà Dock su Right, il bordo destro del controllo verrà ancorato al bordo destro del controllo padre. Il bordo ancorato del controllo viene inoltre ridimensionato in modo da combaciare con il bordo del controllo contenitore. Per ulteriori informazioni sul funzionamento della proprietà Dock, vedere Procedura: ancorare i controlli in Windows Form.

Questa procedura illustra la disposizione del controllo SplitContainer e degli altri controlli sul form, ma non spiega come aggiungere le funzionalità necessarie affinché l'applicazione si comporti in modo analogo a Microsoft Outlook.

Per creare questa interfaccia utente, inserire i controlli all'interno del controllo SplitContainer, che contiene il controllo TreeView nel pannello sinistro. Il pannello destro del controllo SplitContainer contiene un secondo controllo SplitContainer con un controllo ListView sopra un controllo RichTextBox. Tali controlli SplitContainer consentono di ridimensionare in modo indipendente gli altri controlli del form. Le tecniche illustrate in questa procedura possono essere adattate in modo da realizzare interfacce utente personalizzate.

Per creare un'interfaccia utente nello stile di Outlook a livello di codice

All'interno di un form dichiarare i singoli controlli che compongono l'interfaccia utente. Per questo esempio, utilizzare i controlli TreeView, ListView, SplitContainer e RichTextBox per riprodurre l'interfaccia utente di Microsoft Outlook.

Private WithEvents treeView1 As System.Windows.Forms.TreeView
Private WithEvents listView1 As System.Windows.Forms.ListView
Private WithEvents richTextBox1 As System.Windows.Forms.RichTextBox
Private WithEvents splitContainer1 As _
    System.Windows.Forms.SplitContainer
Private WithEvents splitContainer2 As _
    System.Windows.Forms.SplitContainer

private System.Windows.Forms.TreeView treeView1;
private System.Windows.Forms.ListView listView1;
private System.Windows.Forms.RichTextBox richTextBox1;
private System.Windows.Forms. SplitContainer splitContainer2;
private System.Windows.Forms. SplitContainer splitContainer1;

private System.Windows.Forms.TreeView treeView1;
private System.Windows.Forms.ListView listView1;
private System.Windows.Forms.RichTextBox richTextBox1;
private System.Windows.Forms.SplitContainer splitContainer2;
private System.Windows.Forms.SplitContainer splitContainer1;

Creare una routine che definisca l'interfaccia utente. Con il codice riportato di seguito, le diverse proprietà vengono impostate in modo che il form risulti simile all'interfaccia utente di Microsoft Outlook. Utilizzando altri controlli o un diverso ancoraggio, è tuttavia possibile creare in modo altrettanto semplice interfacce utente ugualmente flessibili.

Public Sub CreateOutlookUI()
    ' Create an instance of each control being used.
    Me.components = New System.ComponentModel.Container()
    Me.treeView1 = New System.Windows.Forms.TreeView()
    Me.listView1 = New System.Windows.Forms.ListView()
    Me.richTextBox1 = New System.Windows.Forms.RichTextBox()
    Me.splitContainer1 = New System.Windows.Forms.SplitContainer()
    Me.splitContainer2= New System.Windows.Forms. SplitContainer()

    ' Should you develop this into a working application,
    ' use the AddHandler method to hook up event procedures here.

    ' Set properties of TreeView control.
    ' Use the With statement to avoid repetitive code.
    With Me.treeView1
        .Dock = System.Windows.Forms.DockStyle.Fill
        .TabIndex = 0
        .Nodes.Add("treeView")
    End With

' Set properties of ListView control.
   With Me.listView1
      .Dock = System.Windows.Forms.DockStyle.Top
      .TabIndex = 2
      .Items.Add("listView")
   End With

' Set properties of RichTextBox control.
   With Me.richTextBox1
      .Dock = System.Windows.Forms.DockStyle.Fill
      .TabIndex = 3
      .Text = "richTextBox1"
   End With

    ' Set properties of the first SplitContainer control.
    With Me.splitContainer1
        .Dock = System.Windows.Forms.DockStyle.Fill
        .TabIndex = 1
        .SplitterWidth = 4
        .SplitterDistance = 150
        .Orientation = Orientation.Horizontal
        .Panel1.Controls.Add(Me.listView1)
        .Panel2.Controls.Add(Me.richTextBox1)
End With

    ' Set properties of the second SplitContainer control.
    With Me.splitContainer2
        .Dock = System.Windows.Forms.DockStyle.Fill
        .TabIndex = 4
        .SplitterWidth = 4
        .SplitterDistance = 100
        .Panel1.Controls.Add(Me.treeView1)
        .Panel2.Controls.Add(Me.SplitContainer1)
End With

' Add the main SplitContainer control to the form.
    Me.Controls.Add(Me.splitContainer2)
    Me.Text = "Intricate UI Example"
End Sub

public void createOutlookUI()
{
    // 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();
    splitContainer2 = new System.Windows.Forms.SplitContainer();
    splitContainer1 = new System.Windows.Forms.SplitContainer();

    // Insert code here to hook up event methods.

    // Set properties of TreeView control.
    treeView1.Dock = System.Windows.Forms.DockStyle.Fill;
    treeView1.TabIndex = 0;
    treeView1.Nodes.Add("treeView");

    // Set properties of ListView control.
    listView1.Dock = System.Windows.Forms.DockStyle.Top;
    listView1.TabIndex = 2;
    listView1.Items.Add("listView");

    // Set properties of RichTextBox control.
    richTextBox1.Dock = System.Windows.Forms.DockStyle.Fill;
    richTextBox1.TabIndex = 3;
    richTextBox1.Text = "richTextBox1";

    // Set properties of first SplitContainer control.
    splitContainer1.Dock = System.Windows.Forms.DockStyle.Fill;
    splitContainer2.TabIndex = 1;
    splitContainer2.SplitterWidth = 4;
    splitContainer2.SplitterDistance = 150;
    splitContainer2.Orientation = Orientation.Horizontal;
    splitContainer2.Panel1.Controls.Add(this.listView1);
    splitContainer2.Panel1.Controls.Add(this.richTextBox1);

    // Set properties of second SplitContainer control.
    splitContainer2.Dock = System.Windows.Forms.DockStyle.Fill;
    splitContainer2.TabIndex = 4;
    splitContainer2.SplitterWidth = 4;
    splitContainer2.SplitterDistance = 100;
    splitContainer2.Panel1.Controls.Add(this.treeView1);
    splitContainer2.Panel1.Controls.Add(this.splitContainer1);

    // Add the main SplitContainer control to the form.
    this.Controls.Add(this.splitContainer2);
    this.Text = "Intricate UI Example";
}

public void createOutlookUI()
{
// 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();
splitContainer2 = new System.Windows.Forms.SplitContainer();
splitContainer1 = new System.Windows.Forms.SplitContainer();

// Insert code here to hook up event methods.

// Set properties of TreeView control.
treeView1.set_Dock(System.Windows.Forms.DockStyle.Fill);
treeView1.set_TabIndex(0);
treeView1.get_Nodes().Add("treeView");

// Set properties of ListView control.
listView1.set_Dock(System.Windows.Forms.DockStyle.Top);
listView1.set_TabIndex(2);
listView1.get_Items().Add("listView");

// Set properties of RichTextBox control.
richTextBox1.set_Dock(System.Windows.Forms.DockStyle.Fill);
richTextBox1.set_TabIndex(3);
richTextBox1.set_Text("richTextBox1");

// Set properties of first SplitContainer control.
splitContainer1.set_Dock(System.Windows.Forms.DockStyle.Fill);
splitContainer2.set_TabIndex(1);
splitContainer2.set_SplitterWidth(4);
splitContainer2.set_SplitterDistance(150);
splitContainer2.set_Orientation(Orientation.Horizontal);
splitContainer2.get_Panel1().get_Controls().Add(this.listView1);
splitContainer2.get_Panel1().get_Controls().Add(this.richTextBox1);

// Set properties of second SplitContainer control.
splitContainer2.set_Dock(System.Windows.Forms.DockStyle.Fill);
splitContainer2.set_TabIndex(4);
splitContainer2.set_SplitterWidth(4);
splitContainer2.set_SplitterDistance(100);
splitContainer2.get_Panel1().get_Controls().Add(this.treeView1);
splitContainer2.get_Panel1().get_Controls().Add(this.splitContainer1);

// Add the main SplitContainer control to the form.
this.get_Controls().Add(this.splitContainer2);
this.set_Text("Intricate UI Example");
}

In Visual Basic aggiungere una chiamata alla procedura appena creata nella procedura New(). In Visual C# aggiungere questa riga di codice al costruttore per la classe del form.

' Add this to the New procedure.
CreateOutlookUI()

// Add this to the form class's constructor.
createOutlookUI();

// Add this to the form class's constructor.
createOutlookUI();

Vedere anche

Procedura: creare un'interfaccia utente a più riquadri con Windows Form

Per creare un'interfaccia utente nello stile di Outlook a livello di codice

Vedere anche

Attività

Riferimenti

Altre risorse

Risorse aggiuntive