Condividi tramite


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

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

Prerequisiti

Per completare questa procedura dettagliata, è necessario Visual Studio.

Creare il progetto

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

Nota

Quando si ospita contenuto WPF, sono supportati solo i progetti C# e Visual Basic.

Creare il controllo WPF

Dopo aver aggiunto un controllo WPF al progetto, è possibile disporre il controllo nel modulo.

  1. Aggiungi 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 su Windows Form in fase di progettazione.

  2. In Visualizzazione struttura, assicurarsi che sia selezionato UserControl1.

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

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

  5. Costruire 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 altri controlli Windows Form.

  1. Aprire Form1 nella progettazione di Windows Forms.

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

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

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

  5. Nella Toolbox , fai doppio clic su UserControl1 per creare un'istanza di UserControl1 nella prima cella del controllo TableLayoutPanel.

    L'istanza di UserControl1 è ospitata in un nuovo controllo ElementHost denominato elementHost1.

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

  7. Nella finestra Struttura documento, selezionare tableLayoutPanel1.

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

    Entrambi i controlli ElementHost vengono ridimensionati per adattarsi al nuovo layout.

Usare le linee di allineamento per allineare i controlli WPF

Le guide di allineamento consentono un facile allineamento dei controlli su un modulo. È possibile usare le snaplines per allineare anche i controlli WPF. Per altre informazioni, vedere Procedura dettagliata: Disposizione di controlli in Windows Forms tramite snapline.

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

    L'istanza di UserControl1 è ospitata in un nuovo controllo ElementHost denominato elementHost3.

  2. Usando le linee di allineamento, allineare il bordo sinistro di elementHost3 al bordo sinistro del controllo TableLayoutPanel.

  3. Utilizzando le linee di allineamento, le dimensioni elementHost3 alla stessa larghezza del controllo TableLayoutPanel.

  4. Sposta elementHost3 verso il controllo TableLayoutPanel fino a quando non viene visualizzata una linea di allineamento centrale tra i controlli.

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

  6. Spostare il elementHost3 dal controllo TableLayoutPanel fino a quando non viene visualizzata di nuovo la linea di allineamento centrale. La linea di allineamento centrale indica ora un margine pari a 20.

  7. Spostare elementHost3 a destra fino a che il bordo sinistro sia allineato al bordo sinistro di elementHost1.

  8. Cambia la larghezza di elementHost3 finché il suo bordo destro non è allineato al bordo destro di elementHost2.

Ancoraggio e agganciamento di controlli WPF

Un controllo WPF ospitato su una form ha lo stesso comportamento di ancoraggio e aggancio degli altri controlli Windows Form.

  1. Selezionare elementHost1.

  2. Nella finestra Proprietà impostare la proprietà Anchor su In alto, In basso, a sinistra, a destra.

  3. Ridimensionare il controllo TableLayoutPanel a una dimensione più grande.

    Il controllo elementHost1 viene ridimensionato per riempire la cella.

  4. Selezionare elementHost2.

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

    Il controllo elementHost2 si ridimensiona per riempire la 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 viene ridimensionato per riempire lo spazio rimanente nel modulo.

  10. Ridimensionare il modulo.

    Tutti e tre i controlli ElementHost vengono ridimensionati in modo appropriato.

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

Vedere anche