Paneel

Panel elementen zijn onderdelen die de weergave van elementen bepalen: hun grootte en afmetingen, hun positie en de rangschikking van hun onderliggende inhoud. Windows Presentation Foundation (WPF) biedt een aantal vooraf gedefinieerde Panel elementen en de mogelijkheid om aangepaste Panel elementen te maken.

Stijlen en sjablonen

Panel is een abstracte basisklasse die geen standaardsjabloon of visuele weergave definieert. Afgeleide paneelklassen implementeren hun eigen stijl en sjabloongedrag.

Inhoudseigenschap

Dit besturingselement gebruikt de Children eigenschap als inhoudseigenschap.

Onderdelen

Dit besturingselement definieert geen sjabloononderdelen.

Visuele statussen

Met dit besturingselement worden geen visuele statussen gedefinieerd.

De klasse Panel

Panel is de basisklasse voor alle elementen die indelingsondersteuning bieden in Windows Presentation Foundation (WPF). Gebruik afgeleide Panel elementen om elementen in Extensible Application Markup Language (XAML) en code te plaatsen en te rangschikken.

WPF bevat een uitgebreide suite met afgeleide paneel-implementaties die veel complexe indelingen mogelijk maken. Deze afgeleide klassen bieden eigenschappen en methoden die de meeste standaardgebruikersinterfacescenario's (UI) mogelijk maken. Als u geen kindindelingsgedrag kunt vinden dat aan uw behoeften voldoet, maakt u nieuwe indelingen door de ArrangeOverride en MeasureOverride methoden te overschrijven.

Gemeenschappelijke leden van het panel

Alle Panel elementen ondersteunen de basiseigenschappen die zijn gedefinieerd door FrameworkElement, inclusief Height, Width, HorizontalAlignment, VerticalAlignment, Margin, en LayoutTransform. Voor meer informatie over positioneringseigenschappen die zijn vastgelegd door FrameworkElement, zie Overzicht van uitlijning, marges en opvulling.

Panel biedt aanvullende eigenschappen die belangrijk zijn voor het begrijpen en gebruiken van indeling. Gebruik de Background eigenschap om het gebied tussen de grenzen van een afgeleid paneelelement te vullen met een Brush. Children vertegenwoordigt de kindverzameling van elementen die Panel omvat. InternalChildren vertegenwoordigt de inhoud van de Children verzameling plus de leden die zijn gegenereerd door gegevensbinding. Beide bestaan uit een UIElementCollection van onderliggende elementen die binnen het bovenliggende Panelelement worden gehost.

In het deelvenster wordt ook een Panel.ZIndex gekoppelde eigenschap weergegeven die u kunt gebruiken om een gelaagde volgorde in een afgeleide Panel aan te brengen. Leden van de paneelverzameling Children met een hogere Panel.ZIndex waarde worden vóór degenen met een lagere Panel.ZIndex waarde weergegeven. Dit gedrag is met name handig voor panelen zoals Canvas en Grid waarmee kinderen dezelfde coördinaatruimte kunnen delen.

Panel definieert ook de OnRender methode die u kunt gebruiken om het standaardgedrag van een Panelpresentatie te overschrijven.

Gekoppelde eigenschappen

Afgeleide paneelelementen maken uitgebreid gebruik van gekoppelde eigenschappen. Een gekoppelde eigenschap is een gespecialiseerde vorm van afhankelijkheidseigenschap die niet beschikt over de conventionele CLR-eigenschap (Common Language Runtime) 'wrapper'. Gekoppelde eigenschappen hebben een gespecialiseerde syntaxis in Extensible Application Markup Language (XAML), die u kunt zien in verschillende van de volgende voorbeelden.

Eén doel van een gekoppelde eigenschap is om kind elementen toe te staan unieke waarden op te slaan van een eigenschap die een ouder element daadwerkelijk definieert. Een toepassing van deze functionaliteit is dat kind-elementen de ouder-elementen laten weten hoe ze in de gebruikersinterface (UI) moeten worden gepresenteerd, wat zeer nuttig is voor de indeling van de toepassing. Zie Overzicht van bijgevoegde eigenschappen voor meer informatie.

Afgeleide paneelelementen

Veel objecten zijn afgeleid van Panel, maar niet allemaal zijn bedoeld voor gebruik als hoofdindelingsproviders. Zes gedefinieerde deelvensterklassen (Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanelen WrapPanel) zijn speciaal ontworpen voor het maken van de gebruikersinterface van toepassingen.

Elk paneelelement bevat een eigen speciale functionaliteit, zoals te zien is in de volgende tabel.

Deelvensters van de gebruikersinterface

WPF biedt zes deelvensterklassen die zijn geoptimaliseerd voor ondersteuning van UI-scenario's: , , Canvas, , en DockPanelGrid. StackPanelVirtualizingStackPanelWrapPanel Deze paneelelementen zijn eenvoudig te gebruiken, veelzijdig en uitbreidbaar genoeg voor de meeste toepassingen.

Elk afgeleid Panel element behandelt de groottebeperkingen anders. Door te begrijpen hoe Panel beperkingen in de horizontale of verticale richting worden verwerkt, kunt u de lay-out voorspelbaarder maken.

In de volgende secties vindt u gedetailleerdere beschrijvingen en gebruiksvoorbeelden van elk van deze elementen.

Doek

Het Canvas element maakt plaatsing van inhoud mogelijk op basis van absolute x- en y-coördinaten . U kunt elementen op een unieke locatie tekenen. Als elementen dezelfde coördinaten bevatten, bepaalt de volgorde waarin deze in markeringen worden weergegeven de volgorde waarin de elementen worden getekend.

Canvas biedt de meest flexibele indelingsondersteuning van elke Panel. Eigenschappen hoogte en breedte worden gebruikt om het gebied van het canvas te definiëren en elementen binnen worden absolute coördinaten toegewezen ten opzichte van het gebied van het bovenliggende Canvaselement. Vier gekoppelde eigenschappen, Canvas.Left, Canvas.Top, Canvas.Right en Canvas.Bottom, maken een fijne controle van de plaatsing van objecten binnen een Canvas mogelijk, zodat de ontwikkelaar elementen nauwkeurig op het scherm kan plaatsen en rangschikken.

ClipToBounds binnen een canvas

Canvas kan onderliggende elementen op elke positie op het scherm plaatsen, zelfs bij coördinaten die buiten de eigen gedefinieerde Height en Width vallen. Bovendien wordt Canvas niet beïnvloed door de grootte van zijn kinderen. Hierdoor kan een onderliggend element andere elementen buiten de begrenzingsrechthoek van het bovenliggende Canvaselement overschrijven. Canvas Standaard kunnen kinderen buiten de grenzen van het bovenliggende Canvaselement worden getrokken. Als u dit gedrag niet wilt, stelt u de ClipToBounds eigenschap in op true. Deze instelling zorgt ervoor dat Canvas de clip een eigen grootte heeft. Canvas is het enige indelingselement waarmee kinderen buiten de grenzen kunnen worden getrokken.

Dit gedrag wordt grafisch geïllustreerd in het vergelijkingsvoorbeeld breedteeigenschappen.

DockPanel

Het DockPanel element maakt gebruik van de gekoppelde eigenschap DockPanel.Dock die is ingesteld bij subelementen om inhoud langs de randen van een container te plaatsen. Wanneer u DockPanel.Dock instelt op Top of Bottom, worden subelementen boven elkaar of onder elkaar geplaatst. Wanneer u DockPanel.Dock instelt op Left of Right, worden onderliggende elementen links of rechts van elkaar gepositioneerd. De LastChildFill eigenschap bepaalt de positie van het uiteindelijke element dat is toegevoegd als een onderliggend element van een DockPanel.

U kunt DockPanel gebruiken om een groep gerelateerde besturingselementen, zoals een set knoppen, te plaatsen. U kunt deze ook gebruiken om een gepaneerde gebruikersinterface te maken, vergelijkbaar met die in Microsoft Outlook.

Grootte aanpassen aan inhoud

Als u de Height en Width eigenschappen niet opgeeft, past DockPanel het formaat aan aan de inhoud. De grootte kan groter of kleiner worden om de grootte van de onderliggende elementen aan te passen. Wanneer u deze eigenschappen echter opgeeft en er geen ruimte meer is voor het volgende opgegeven onderliggende element, DockPanel wordt dat onderliggende element of de volgende onderliggende elementen niet weergegeven en worden de volgende onderliggende elementen niet gemeten.

LastChildFill

Standaard vult het laatste kind-element van een DockPanel-element de resterende, niet-toegewezen ruimte. Als u dit gedrag niet wilt, stelt u de LastChildFill eigenschap in op false.

Voorbeelden

In het volgende voorbeeld kunt u zien hoe u met Canvas inhoud absoluut kunt positioneren. Deze code produceert drie vierkanten van 100 pixels. Het eerste vierkant is rood en de positie linksboven (x, y) wordt opgegeven als (0, 0). Het tweede vierkant is groen en de positie linksboven is (100, 100), net onder en rechts van het eerste vierkant. Het derde vierkant is blauw en de positie linksboven is (50, 50), die dus het kwadrant rechtsonder van het eerste vierkant en het kwadrant linksboven van de tweede omvat. Omdat het derde vierkant als laatste is ingedeeld, lijkt het boven op de andere twee vierkanten te staan, dat wil gezegd, nemen de overlappende gedeelten de kleur van het derde vak aan.

// 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>

De gecompileerde toepassing levert een nieuwe gebruikersinterface op die eruitziet als de volgende afbeelding.

In het volgende voorbeeld ziet u hoe u ruimte partitioneert met behulp van een DockPanel. In het voorbeeld worden vijf Border-elementen als kind elementen van een bovenliggende DockPanel-element toegevoegd. Elk onderliggend element maakt gebruik van een andere plaatsingseigenschap van een DockPanel om ruimte te partitioneren. Het laatste element vult de resterende, niet-toegewezen ruimte in.

// 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

Zie ook

• Overzicht van uitlijning, marges en opvulling
• Overzicht van bijgevoegde eigenschappen
• Maak een voorbeeld van een aangepast inhoudsomhullingspaneel
• Indeling
• Indeling en ontwerp
• ScrollViewer-
• Overzicht van automatische indeling gebruiken
• Walkthrough: Mijn eerste WPF-bureaubladtoepassing
• WPF-controle galerij voorbeeld
• Voorbeeld van WPF-lay-outgalerij