Pannello

Panel gli elementi sono componenti che controllano il rendering degli elementi, le loro dimensioni e misure, la loro posizione e la disposizione dei contenuti figli. Windows Presentation Foundation (WPF) offre una serie di elementi predefiniti Panel , nonché la possibilità di costruire elementi personalizzati Panel .

Stili e modelli

Panel è una classe base astratta che non definisce un modello predefinito o un aspetto visivo. Le classi di pannelli derivate implementano il proprio comportamento di stile e modello.

Proprietà del contenuto

Questo controllo usa la Children proprietà come proprietà del contenuto.

Parti

Questo controllo non definisce parti del modello.

Stati di visualizzazione

Questo controllo non definisce stati di visualizzazione.

Classe Panel

Panel è la classe di base per tutti gli elementi che forniscono il supporto del layout in Windows Presentation Foundation (WPF). Usa gli elementi derivati Panel per posizionare e disporre gli elementi nel codice XAML (Extensible Application Markup Language).

WPF include una suite completa di implementazioni di pannelli derivati che consentono molti layout complessi. Queste classi derivate espongono proprietà e metodi che consentono la maggior parte degli scenari dell'interfaccia utente standard. Se non riesci a trovare un comportamento di disposizione child che soddisfi le tue esigenze, crea nuovi layout attraverso l'override dei metodi ArrangeOverride e MeasureOverride.

Membri comuni del pannello

Tutti gli Panel elementi supportano le proprietà di ridimensionamento e posizionamento di base definite da FrameworkElement, tra cui Height, WidthHorizontalAlignment, VerticalAlignment, Margin, e LayoutTransform. Per altre informazioni sulle proprietà di posizionamento definite da FrameworkElement, vedere Cenni preliminari su allineamento, margini e spaziatura interna.

Panel espone proprietà aggiuntive importanti per comprendere e usare il layout. Utilizzare la Background proprietà per riempire l'area tra i limiti di un elemento del pannello derivato con un oggetto Brush. Children rappresenta la raccolta figlia di elementi che il Panel comprende. InternalChildren rappresenta il contenuto della Children raccolta più i membri generati dal data binding. Entrambi sono costituiti da un UIElementCollection elemento figlio ospitato all'interno dell'oggetto padre Panel.

Il pannello espone anche una Panel.ZIndex proprietà associata che è possibile usare per ottenere un ordine a più livelli in un oggetto derivato Panel. I membri della raccolta di Children un pannello con un valore più alto Panel.ZIndex vengono visualizzati davanti a quelli con un valore inferiore Panel.ZIndex . Questo comportamento è particolarmente utile per i pannelli come Canvas e Grid che consentono agli elementi figli di condividere lo stesso spazio di coordinate.

Panel definisce anche il OnRender metodo , che è possibile usare per eseguire l'override del comportamento di presentazione predefinito di un oggetto Panel.

Proprietà associate

Gli elementi del pannello derivati usano ampiamente le proprietà associate. Una proprietà associata è una forma specializzata di proprietà di dipendenza che non ha la proprietà CLR (Common Language Runtime) convenzionale "wrapper". Le proprietà associate hanno una sintassi specializzata in XAML (Extensible Application Markup Language), che è possibile visualizzare in diversi esempi che seguono.

Uno degli scopi di una proprietà associata è consentire agli elementi figlio di archiviare valori univoci di una proprietà definita effettivamente da un elemento padre. Un'applicazione di questa funzionalità consiste nel far sì che gli elementi figlio informino l'elemento padre su in che modo desiderano essere presentati nell'interfaccia utente (UI), il che è estremamente utile per il layout dell'applicazione. Per altre informazioni, vedere Panoramica delle proprietà associate.

Elementi derivati del pannello

Molti oggetti derivano da Panel, ma non tutti sono progettati per essere utilizzati come fornitori di layout principale. Sei classi di pannelli definite (Canvas, DockPanel, GridStackPanel, VirtualizingStackPanel, e WrapPanel) sono progettate specificamente per la creazione dell'interfaccia utente dell'applicazione.

Ogni elemento del pannello incapsula le proprie funzionalità speciali, come illustrato nella tabella seguente.

Pannelli dell'interfaccia utente

WPF offre sei classi di pannelli ottimizzate per supportare scenari di interfaccia utente: Canvas, DockPanel, GridStackPanel, VirtualizingStackPanel, e WrapPanel. Questi elementi del pannello sono facili da usare, versatili ed estendibili abbastanza per la maggior parte delle applicazioni.

Ogni elemento derivato Panel tratta i vincoli di ridimensionamento in modo diverso. Comprendere in che modo un Panel gestisce i vincoli nella direzione orizzontale o verticale può rendere il layout più prevedibile.

È possibile trovare descrizioni più dettagliate ed esempi di utilizzo di ognuno di questi elementi nelle sezioni seguenti.

Tela

L'elemento Canvas abilita il posizionamento del contenuto in base alle coordinate x e y assolute. È possibile disegnare elementi in una posizione unica. Se gli elementi occupano le stesse coordinate, l'ordine in cui vengono visualizzati nel markup determina l'ordine in cui vengono disegnati gli elementi.

Canvas offre il supporto per layout più flessibile di tutti i Paneloggetti. Le proprietà Height e Width vengono usate per definire l'area dell'area di disegno e agli elementi all'interno vengono assegnate coordinate assolute relative all'area dell'elemento padre Canvas. Quattro proprietà associate, Canvas.Left, Canvas.Tope Canvas.RightCanvas.Bottom, consentono un controllo accurato del posizionamento degli oggetti all'interno di un Canvasoggetto , consentendo allo sviluppatore di posizionare e disporre gli elementi esattamente sullo schermo.

Utilizzare ClipToBounds nel Canvas

Canvas può posizionare gli elementi figlio in qualsiasi posizione sullo schermo, anche in corrispondenza di coordinate esterne alla propria definizione di Height e Width. Inoltre, Canvas non è influenzato dalle dimensioni dei relativi figli. Di conseguenza, un elemento figlio può sovrapporre altri elementi all'esterno del rettangolo di delimitazione dell'elemento padre Canvas. Per impostazione predefinita, un oggetto Canvas consente di disegnare i figli al di fuori dei bordi dell'oggetto padre Canvas. Se non si desidera questo comportamento, impostare la ClipToBounds proprietà su true. Questa impostazione fa sì che Canvas sia ritagliato alla propria dimensione. Canvas è l'unico elemento di layout che consente di disegnare figli al di fuori dei suoi limiti.

Questo comportamento è illustrato graficamente nell'esempio di confronto delle proprietà di larghezza.

DockPanel

L'elemento DockPanel usa la DockPanel.Dock proprietà associata impostata negli elementi di contenuto figlio per posizionare il contenuto lungo i bordi di un contenitore. Quando si imposta DockPanel.Dock su Top o Bottom, posiziona gli elementi figlio uno sopra l'altro o uno sotto l'altro. Quando imposti DockPanel.Dock su Left o Right, posiziona gli elementi figlio a sinistra o a destra. La LastChildFill proprietà determina la posizione dell'elemento finale aggiunto come figlio di un oggetto DockPanel.

È possibile usare DockPanel per posizionare un gruppo di controlli correlati, ad esempio un set di pulsanti. In alternativa, è possibile usarlo per creare un'interfaccia utente "panoramica", simile a quella disponibile in Microsoft Outlook.

Ridimensionamento del contenuto

Se non si specificano le proprietà Height e Width, DockPanel si adatta al suo contenuto. La dimensione può aumentare o diminuire per adattarsi alle dimensioni dei suoi elementi figlio. Tuttavia, quando specifichi queste proprietà e non c'è più spazio per l'elemento figlio specificato successivo, DockPanel non visualizza l'elemento figlio o gli elementi figlio successivi e non misura gli elementi figlio successivi.

LastChildFill

Per impostazione predefinita, l'ultimo elemento figlio di un DockPanel elemento riempie lo spazio rimanente non allocato. Se non si desidera questo comportamento, impostare la LastChildFill proprietà su false.

Esempi

Nell'esempio seguente viene illustrato come usare Canvas per posizionare il contenuto in modo assoluto. Questo codice produce tre quadrati da 100 pixel. Il primo quadrato è rosso e la posizione superiore sinistra (x, y) viene specificata come (0, 0). Il secondo quadrato è verde e la posizione superiore sinistra è (100, 100), appena sotto e a destra del primo quadrato. Il terzo quadrato è blu e la posizione superiore sinistra è (50, 50), comprendendo così il quadrante inferiore destro del primo quadrato e il quadrante superiore sinistro del secondo. Poiché il terzo quadrato è disposto per ultimo, sembra essere sopra gli altri due quadrati, ovvero le parti sovrapposte presuppongono il colore della terza casella.

// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "Canvas Sample";

// Create the Canvas
myParentCanvas = new Canvas();
myParentCanvas.Width = 400;
myParentCanvas.Height = 400;

// Define child Canvas elements
myCanvas1 = new Canvas();
myCanvas1.Background = Brushes.Red;
myCanvas1.Height = 100;
myCanvas1.Width = 100;
Canvas.SetTop(myCanvas1, 0);
Canvas.SetLeft(myCanvas1, 0);

myCanvas2 = new Canvas();
myCanvas2.Background = Brushes.Green;
myCanvas2.Height = 100;
myCanvas2.Width = 100;
Canvas.SetTop(myCanvas2, 100);
Canvas.SetLeft(myCanvas2, 100);

myCanvas3 = new Canvas();
myCanvas3.Background = Brushes.Blue;
myCanvas3.Height = 100;
myCanvas3.Width = 100;
Canvas.SetTop(myCanvas3, 50);
Canvas.SetLeft(myCanvas3, 50);

// Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1);
myParentCanvas.Children.Add(myCanvas2);
myParentCanvas.Children.Add(myCanvas3);

// Add the parent Canvas as the Content of the Window Object
mainWindow.Content = myParentCanvas;
mainWindow.Show ();

WindowTitle = "Canvas Sample"
'Create a Canvas as the root Panel
Dim myParentCanvas As New Canvas()
myParentCanvas.Width = 400
myParentCanvas.Height = 400

' Define child Canvas elements
Dim myCanvas1 As New Canvas()
myCanvas1.Background = Brushes.Red
myCanvas1.Height = 100
myCanvas1.Width = 100
Canvas.SetTop(myCanvas1, 0)
Canvas.SetLeft(myCanvas1, 0)

Dim myCanvas2 As New Canvas()
myCanvas2.Background = Brushes.Green
myCanvas2.Height = 100
myCanvas2.Width = 100
Canvas.SetTop(myCanvas2, 100)
Canvas.SetLeft(myCanvas2, 100)

Dim myCanvas3 As New Canvas()
myCanvas3.Background = Brushes.Blue
myCanvas3.Height = 100
myCanvas3.Width = 100
Canvas.SetTop(myCanvas3, 50)
Canvas.SetLeft(myCanvas3, 50)

' Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1)
myParentCanvas.Children.Add(myCanvas2)
myParentCanvas.Children.Add(myCanvas3)

' Add the parent Canvas as the Content of the Window Object
Me.Content = myParentCanvas

<Page WindowTitle="Canvas Sample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas Height="400" Width="400">
    <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
    <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
    <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
  </Canvas>
</Page>

L'applicazione compilata restituisce una nuova interfaccia utente simile all'immagine seguente.

Nell'esempio seguente viene illustrato come partizionare lo spazio usando un oggetto DockPanel. Nell'esempio vengono aggiunti cinque Border elementi in qualità di figli di un elemento padre DockPanel. Ogni elemento figlio usa una proprietà di posizionamento diversa di un DockPanel oggetto per partizionare lo spazio. L'elemento finale "riempie" lo spazio rimanente, non allocato.

// Create the application's main window
mainWindow = gcnew Window();
mainWindow->Title = "DockPanel Sample";

// Create the DockPanel
DockPanel^ myDockPanel = gcnew DockPanel();
myDockPanel->LastChildFill = true;

// Define the child content
Border^ myBorder1 = gcnew Border();
myBorder1->Height = 25;
myBorder1->Background = Brushes::SkyBlue;
myBorder1->BorderBrush = Brushes::Black;
myBorder1->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder1, Dock::Top);
TextBlock^ myTextBlock1 = gcnew TextBlock();
myTextBlock1->Foreground = Brushes::Black;
myTextBlock1->Text = "Dock = Top";
myBorder1->Child = myTextBlock1;

Border^ myBorder2 = gcnew Border();
myBorder2->Height = 25;
myBorder2->Background = Brushes::SkyBlue;
myBorder2->BorderBrush = Brushes::Black;
myBorder2->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder2, Dock::Top);
TextBlock^ myTextBlock2 = gcnew TextBlock();
myTextBlock2->Foreground = Brushes::Black;
myTextBlock2->Text = "Dock = Top";
myBorder2->Child = myTextBlock2;

Border^ myBorder3 = gcnew Border();
myBorder3->Height = 25;
myBorder3->Background = Brushes::LemonChiffon;
myBorder3->BorderBrush = Brushes::Black;
myBorder3->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder3, Dock::Bottom);
TextBlock^ myTextBlock3 = gcnew TextBlock();
myTextBlock3->Foreground = Brushes::Black;
myTextBlock3->Text = "Dock = Bottom";
myBorder3->Child = myTextBlock3;

Border^ myBorder4 = gcnew Border();
myBorder4->Width = 200;
myBorder4->Background = Brushes::PaleGreen;
myBorder4->BorderBrush = Brushes::Black;
myBorder4->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder4, Dock::Left);
TextBlock^ myTextBlock4 = gcnew TextBlock();
myTextBlock4->Foreground = Brushes::Black;
myTextBlock4->Text = "Dock = Left";
myBorder4->Child = myTextBlock4;

Border^ myBorder5 = gcnew Border();
myBorder5->Background = Brushes::White;
myBorder5->BorderBrush = Brushes::Black;
myBorder5->BorderThickness = Thickness(1);
TextBlock^ myTextBlock5 = gcnew TextBlock();
myTextBlock5->Foreground = Brushes::Black;
myTextBlock5->Text = "This content will Fill the remaining space";
myBorder5->Child = myTextBlock5;

// Add child elements to the DockPanel Children collection
myDockPanel->Children->Add(myBorder1);
myDockPanel->Children->Add(myBorder2);
myDockPanel->Children->Add(myBorder3);
myDockPanel->Children->Add(myBorder4);
myDockPanel->Children->Add(myBorder5);

// Add the parent Canvas as the Content of the Window Object
mainWindow->Content = myDockPanel;
mainWindow->Show();

// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "DockPanel Sample";

// Create the DockPanel
DockPanel myDockPanel = new DockPanel();
myDockPanel.LastChildFill = true;

// Define the child content
Border myBorder1 = new Border();
myBorder1.Height = 25;
myBorder1.Background = Brushes.SkyBlue;
myBorder1.BorderBrush = Brushes.Black;
myBorder1.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder1, Dock.Top);
TextBlock myTextBlock1 = new TextBlock();
myTextBlock1.Foreground = Brushes.Black;
myTextBlock1.Text = "Dock = Top";
myBorder1.Child = myTextBlock1;

Border myBorder2 = new Border();
myBorder2.Height = 25;
myBorder2.Background = Brushes.SkyBlue;
myBorder2.BorderBrush = Brushes.Black;
myBorder2.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder2, Dock.Top);
TextBlock myTextBlock2 = new TextBlock();
myTextBlock2.Foreground = Brushes.Black;
myTextBlock2.Text = "Dock = Top";
myBorder2.Child = myTextBlock2;

Border myBorder3 = new Border();
myBorder3.Height = 25;
myBorder3.Background = Brushes.LemonChiffon;
myBorder3.BorderBrush = Brushes.Black;
myBorder3.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder3, Dock.Bottom);
TextBlock myTextBlock3 = new TextBlock();
myTextBlock3.Foreground = Brushes.Black;
myTextBlock3.Text = "Dock = Bottom";
myBorder3.Child = myTextBlock3;

Border myBorder4 = new Border();
myBorder4.Width = 200;
myBorder4.Background = Brushes.PaleGreen;
myBorder4.BorderBrush = Brushes.Black;
myBorder4.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder4, Dock.Left);
TextBlock myTextBlock4 = new TextBlock();
myTextBlock4.Foreground = Brushes.Black;
myTextBlock4.Text = "Dock = Left";
myBorder4.Child = myTextBlock4;

Border myBorder5 = new Border();
myBorder5.Background = Brushes.White;
myBorder5.BorderBrush = Brushes.Black;
myBorder5.BorderThickness = new Thickness(1);
TextBlock myTextBlock5 = new TextBlock();
myTextBlock5.Foreground = Brushes.Black;
myTextBlock5.Text = "This content will Fill the remaining space";
myBorder5.Child = myTextBlock5;

// Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1);
myDockPanel.Children.Add(myBorder2);
myDockPanel.Children.Add(myBorder3);
myDockPanel.Children.Add(myBorder4);
myDockPanel.Children.Add(myBorder5);

// Add the parent Canvas as the Content of the Window Object
mainWindow.Content = myDockPanel;
mainWindow.Show ();

WindowTitle = "DockPanel Sample"
'Create a DockPanel as the root Panel
Dim myDockPanel As New DockPanel()
myDockPanel.LastChildFill = True

' Define the child content
Dim myBorder1 As New Border()
myBorder1.Height = 25
myBorder1.Background = Brushes.SkyBlue
myBorder1.BorderBrush = Brushes.Black
myBorder1.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder1, Dock.Top)
Dim myTextBlock1 As New TextBlock()
myTextBlock1.Foreground = Brushes.Black
myTextBlock1.Text = "Dock = Top"
myBorder1.Child = myTextBlock1

Dim myBorder2 As New Border()
myBorder2.Height = 25
myBorder2.Background = Brushes.SkyBlue
myBorder2.BorderBrush = Brushes.Black
myBorder2.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder2, Dock.Top)
Dim myTextBlock2 As New TextBlock()
myTextBlock2.Foreground = Brushes.Black
myTextBlock2.Text = "Dock = Top"
myBorder2.Child = myTextBlock2

Dim myBorder3 As New Border()
myBorder3.Height = 25
myBorder3.Background = Brushes.LemonChiffon
myBorder3.BorderBrush = Brushes.Black
myBorder3.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder3, Dock.Bottom)
Dim myTextBlock3 As New TextBlock()
myTextBlock3.Foreground = Brushes.Black
myTextBlock3.Text = "Dock = Bottom"
myBorder3.Child = myTextBlock3

Dim myBorder4 As New Border()
myBorder4.Width = 200
myBorder4.Background = Brushes.PaleGreen
myBorder4.BorderBrush = Brushes.Black
myBorder4.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder4, Dock.Left)
Dim myTextBlock4 As New TextBlock()
myTextBlock4.Foreground = Brushes.Black
myTextBlock4.Text = "Dock = Left"
myBorder4.Child = myTextBlock4

Dim myBorder5 As New Border()
myBorder5.Background = Brushes.White
myBorder5.BorderBrush = Brushes.Black
myBorder5.BorderThickness = New Thickness(1)
Dim myTextBlock5 As New TextBlock()
myTextBlock5.Foreground = Brushes.Black
myTextBlock5.Text = "This content will Fill the remaining space"
myBorder5.Child = myTextBlock5

' Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1)
myDockPanel.Children.Add(myBorder2)
myDockPanel.Children.Add(myBorder3)
myDockPanel.Children.Add(myBorder4)
myDockPanel.Children.Add(myBorder5)
Me.Content = myDockPanel

Vedere anche

• Panoramica di allineamento, margini e spaziatura interna
• Panoramica delle proprietà associate
• Creare un esempio di pannello personalizzato per l'avvolgimento del contenuto
• Impaginazione
• Layout e Design
• Visualizzatore di scorrimento
• Panoramica dell'uso del layout automatico
• Guida passo-passo: La mia prima applicazione desktop WPF
• Esempio della Galleria di controlli WPF
• Esempio di galleria layout WPF