Procedura dettagliata: Disporre il contenuto WPF in Windows Form in fase di progettazione

  • Articolo

Questo articolo illustra come usare le funzionalità di layout Windows Form, ad esempio ancoraggio e snapline, per disporre i controlli Windows Presentation Foundation (WPF).

Prerequisiti

Per completare la procedura dettagliata, è necessario Visual Studio.

Creare il progetto

Aprire Visual Studio e creare un nuovo progetto applicazione di Windows Form in Visual Basic o Visual C# denominato ArrangeElementHost.

Nota

Con il contenuto WPF sono supportati solo progetti C# e Visual Basic.

Creare il controllo WPF

Dopo avere aggiunto un controllo WPF al progetto, è possibile disporlo sul form.

  1. Aggiungere un nuovo UserControl WPF al progetto. Usare il nome predefinito per il tipo di controllo, UserControl1.xaml. Per altre informazioni, vedere Procedura dettagliata: Creazione di nuovo contenuto WPF in Windows Form in fase di progettazione.

  2. In visualizzazione Progettazione verificare che UserControl1 sia selezionato.

  3. Nella finestra Proprietà impostare il valore delle Width proprietà e Height su 200.

  4. Impostare il valore della Background proprietà su Blue.

  5. Compilare il progetto.

Ospitare controlli WPF in un pannello di layout

È possibile usare i controlli WPF nei pannelli di layout nello stesso modo in cui si usano gli altri controlli Windows Form.

  1. Aprire Form1 in Progettazione Windows Form.

  2. Nella casella degli strumenti trascinare un TableLayoutPanel controllo nel form.

  3. TableLayoutPanel Nel pannello smart tag del controllo selezionare Rimuovi ultima riga.

  4. Ridimensionare il controllo TableLayoutPanel impostando una larghezza e un'altezza maggiori.

  5. Nella casella degli strumenti fare doppio clic UserControl1 per creare un'istanza di UserControl1 nella prima cella del TableLayoutPanel controllo.

    L'istanza di UserControl1 viene inclusa in un nuovo controllo ElementHost denominato elementHost1.

  6. Nella casella degli strumenti fare doppio clic UserControl1 per creare un'altra istanza nella seconda cella del TableLayoutPanel controllo.

  7. Nella finestra Struttura documento selezionare tableLayoutPanel1.

  8. Nella finestra Proprietà impostare il valore della Padding proprietà su 10, 10, 10, 10, 10.

    Entrambi i controlli ElementHost vengono ridimensionati per essere adattati al nuovo layout.

Usare le linee di allineamento per allineare i controlli WPF

Le guide di allineamento semplificano l'allineamento dei controlli su un form. È possibile usare le guide di allineamento anche per allineare i controlli WPF. Per altre informazioni, vedere Procedura dettagliata: Disposizione dei controlli su Windows Form uso di snapline.

  1. Dalla casella degli strumenti trascinare un'istanza di UserControl1 nel form e posizionarla nello spazio sotto il TableLayoutPanel controllo.

    L'istanza di UserControl1 viene inclusa in un nuovo controllo ElementHost denominato elementHost3.

  2. Tramite le guide di allineamento allineare il bordo sinistro di elementHost3 al bordo sinistro del controllo TableLayoutPanel.

  3. Tramite le guide di allineamento ridimensionare elementHost3 impostando la stessa larghezza del controllo TableLayoutPanel.

  4. Spostare elementHost3 verso il controllo TableLayoutPanel finché non viene visualizzata una guida di allineamento centrale tra i due controlli.

  5. Nella finestra Proprietà impostare il valore della proprietà Margin su 20, 20, 20, 20, 20.

  6. Spostare elementHost3 dal controllo TableLayoutPanel finché non viene di nuovo visualizzata la guida di allineamento centrale. La guida di allineamento centrale indica ora un margine di 20.

  7. Spostarsi elementHost3 a destra fino a quando il bordo sinistro non è allineato al bordo sinistro di elementHost1.

  8. Modificare la larghezza di elementHost3 finché il bordo destro non è allineato a quello destro di elementHost2.

Ancoraggio e ancoraggio di controlli WPF

Un controllo WPF incluso in un form è soggetto alle stesse regole di ancoraggio e aggancio degli altri controlli Windows Form.

  1. Selezionare elementHost1.

  2. Nella finestra Proprietà impostare la Anchor proprietà su Top, Bottom, Left, Right.

  3. Ridimensionare il controllo TableLayoutPanel impostando dimensioni superiori.

    Il controllo elementHost1 verrà ridimensionato fino ad occupare l'intera cella.

  4. Selezionare elementHost2.

  5. Nella finestra Proprietà impostare il valore della Dock proprietà su Fill.

    Il controllo elementHost2 verrà ridimensionato fino ad occupare l'intera cella.

  6. Selezionare il controllo TableLayoutPanel.

  7. Impostare il valore della proprietà Dock su Top.

  8. Selezionare elementHost3.

  9. Impostare il valore della proprietà Dock su Fill.

    Il controllo elementHost3 verrà ridimensionato fino a occupare lo spazio rimanente sul form.

  10. Ridimensionare il form.

    Tutti e tre i controlli ElementHost verranno ridimensionati in maniera appropriata.

    Per altre informazioni, vedere Procedura: Ancorare e ancorare i controlli figlio in un controllo TableLayoutPanel.

Vedi anche