Procedura: creare un'interfaccia utente a più riquadri con Windows Form utilizzando la finestra di progettazione

  • Articolo

Nella procedura seguente verrà creata un'interfaccia utente a più riquadri simile a quella usata in Microsoft Outlook, con un elenco Cartelle, un riquadro Messaggi e un riquadro Anteprima. Questa disposizione viene ottenuta principalmente tramite i controlli di ancoraggio con il form.

Quando si ancora un controllo, si determina il bordo del contenitore padre a cui viene fissare un controllo. Pertanto, se si imposta la Dock proprietà su Right, il bordo destro del controllo verrà ancorato al bordo destro del relativo controllo padre. Inoltre, il bordo ancorato del controllo viene ridimensionato in modo che corrisponda a quello del relativo controllo contenitore. Per altre informazioni sul funzionamento della Dock proprietà, vedere Procedura: Ancorare i controlli in Windows Form.

Questa procedura è incentrata sulla disposizione di SplitContainer e sugli altri controlli nel modulo, non sull'aggiunta di funzionalità per rendere l'applicazione simulare Microsoft Outlook.

Per creare questa interfaccia utente, inserire tutti i controlli all'interno di un SplitContainer controllo, che contiene un TreeView controllo nel pannello a sinistra. Il pannello di destra del SplitContainer controllo contiene un secondo SplitContainer controllo con un ListView controllo sopra un RichTextBox controllo. Questi SplitContainer controlli consentono il ridimensionamento indipendente degli altri controlli nel form. È possibile adattare le tecniche in questa procedura per creare interfacce utente personalizzate personalizzate.

Per creare un'interfaccia utente di tipo Outlook in fase di progettazione

  1. Creare un nuovo progetto applicazione Windows (File>nuovo>progetto>Visual C# o Visual Basic>Classico Desktop> Windows Form Applicazione).

  2. Trascinare un SplitContainer controllo dalla casella degli strumenti al form. Nella finestra Proprietà impostare la proprietà Dock su Fill.

  3. Trascinare un TreeView controllo dalla casella degli strumenti al pannello a sinistra del SplitContainer controllo. Nella finestra Proprietà impostare la Dock proprietà Left su facendo clic sul pannello a sinistra nell'editor dei valori visualizzato quando si fa clic sulla freccia giù.

  4. Trascinare un altro SplitContainer controllo dalla casella degli strumenti. Posizionarlo nel pannello di destra del SplitContainer controllo aggiunto al modulo. Nella finestra Proprietà impostare la Dock proprietà su Fill e la Orientation proprietà su Horizontal.

  5. Trascinare un ListView controllo dalla casella degli strumenti al pannello superiore del secondo SplitContainer controllo aggiunto al form. Impostare la proprietà Dock del controllo ListView su Fill.

  6. Trascinare un RichTextBox controllo dalla casella degli strumenti al pannello inferiore del secondo SplitContainer controllo. Impostare la proprietà Dock del controllo RichTextBox su Fill.

    A questo punto, se si preme F5 per eseguire l'applicazione, il modulo visualizza un'interfaccia utente in tre parti, simile a quella di Microsoft Outlook.

    Nota

    Quando si posiziona il puntatore del mouse su uno dei separatori all'interno dei SplitContainer controlli, è possibile ridimensionare le dimensioni interne.

A questo punto nello sviluppo di applicazioni è stata creata un'interfaccia utente sofisticata. Il passaggio successivo consiste nel procedere con la programmazione dell'applicazione stessa, ad esempio connettendo il TreeView controllo e ListView i controlli a un tipo di origine dati. Per altre informazioni sulla connessione dei controlli ai dati, vedere Data Binding e Windows Form.

Vedi anche