Panel

Panel Elementen är komponenter som styr hur element återges – deras storlek och dimensioner, deras position och arrangemanget av deras underordnade innehåll. Windows Presentation Foundation (WPF) innehåller ett antal fördefinierade Panel element samt möjlighet att konstruera anpassade Panel element.

Formatmallar och stilar

Panel är en abstrakt basklass som inte definierar någon standardmall eller ett visuellt utseende. Härledda panelklasser implementerar sitt eget formaterings- och mallbeteende.

Innehållsegenskap

Den här kontrollen använder egenskapen Children som dess innehållsegenskap.

Delar

Den här kontrollen definierar inga malldelar.

Visuella tillstånd

Den här kontrollen definierar inga visuella tillstånd.

Klassen Panel

Panel är basklassen för alla element som ger layoutstöd i Windows Presentation Foundation (WPF). Använd härledda Panel element för att placera och ordna element i XAML (Extensible Application Markup Language) och kod.

WPF innehåller en omfattande uppsättning implementeringar av härledda paneler som möjliggör många komplexa layouter. Dessa härledda klasser exponerar egenskaper och metoder som möjliggör de flesta scenarier med standardanvändargränssnitt (UI). Om du inte hittar ett ArrangeOverride-arrangemangsbeteende som uppfyller dina behov kan du skapa nya layouter genom att åsidosätta MeasureOverride-metoderna.

Vanliga medlemmar i panelen

Alla Panel element stöder basstorleks- och positioneringsegenskaperna som definieras av FrameworkElement, inklusive Height, Width, HorizontalAlignment, VerticalAlignment, Marginoch LayoutTransform. Mer information om positioneringsegenskaper som definieras av FrameworkElementfinns i Justering, Marginaler och Utfyllnadsöversikt.

Panel exponerar ytterligare egenskaper som är viktiga för att förstå och använda layout. Använd egenskapen Background för att fylla området mellan gränserna för ett härlett panelelement med en Brush. Children representerar den underordnade samling av element som Panel omfattar. InternalChildren representerar innehållet i Children samlingen plus de medlemmar som genereras av databindningen. Båda består av underordnade element UIElementCollection som finns i det överordnade Panel.

Panelen exponerar även en Panel.ZIndex bifogad egenskap som du kan använda för att uppnå lagerordning i en härledd Panel. Medlemmar i en panelsamling Children med ett högre Panel.ZIndex värde visas framför dem med ett lägre Panel.ZIndex värde. Det här beteendet är särskilt användbart för paneler som Canvas och Grid som gör att underordnade kan dela samma koordinatutrymme.

Panel definierar också metoden OnRender som du kan använda för att åsidosätta standardpresentationsbeteendet för en Panel.

Anslutna egenskaper

Härledda panelelement använder sig i stor utsträckning av bifogade egenskaper. En bifogad egenskap är en specialiserad form av beroendeegenskap som inte har den konventionella CLR-egenskapen (Common Language Runtime) "wrapper". Anslutna egenskaper har en specialiserad syntax i XAML (Extensible Application Markup Language), som du kan se i flera av exemplen nedan.

Ett syfte med en bifogad egenskap är att tillåta underordnade element att lagra unika värden för en egenskap som ett överordnat element faktiskt definierar. En tillämpning av denna funktion är att underordnade element kan informera de överordnade elementen om hur de vill visas i användargränssnittet (UI), vilket är mycket användbart för layouten av en applikation. Mer information finns i Översikt över bifogade egenskaper.

Element i härledda paneler

Många objekt härleds från Panel, men alla är inte avsedda att användas som rotlayoutproviders. Sex definierade panelklasser (Canvas, , DockPanelGrid, StackPanel, VirtualizingStackPaneloch WrapPanel) är särskilt utformade för att skapa programgränssnittet.

Varje panelelement kapslar in sina egna specialfunktioner, enligt följande tabell.

Paneler för användargränssnitt

WPF innehåller sex panelklasser som är optimerade för att stödja användargränssnittsscenarier: Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPaneloch WrapPanel. Dessa panelelement är enkla att använda, mångsidiga och utökningsbara nog för de flesta program.

Varje härlett Panel element behandlar storleksbegränsningar på olika sätt. Att förstå hur en Panel hanterar begränsningar i antingen vågrät eller lodrät riktning kan göra layouten mer förutsägbar.

Du hittar mer detaljerade beskrivningar och användningsexempel för vart och ett av dessa element i följande avsnitt.

Kanvas

Elementet Canvas möjliggör positionering av innehåll enligt absoluta x- och y-koordinater . Du kan rita element på en unik plats. Om elementen upptar samma koordinater avgör ordningen i vilken de visas i markering den ordning som elementen ritas.

Canvas ger det mest flexibla layoutstödet för alla Panel. Egenskaper för höjd och bredd används för att definiera arbetsytans område och element inuti tilldelas absoluta koordinater i förhållande till området för den överordnade Canvas. Fyra bifogade egenskaper, Canvas.Left, Canvas.Top, Canvas.Right och Canvas.Bottom, tillåter fin kontroll över objektplacering inom en Canvas, så att utvecklaren kan placera och ordna element exakt på skärmen.

ClipToBounds i en arbetsyta

Canvas kan placera underordnade element på valfri plats på skärmen, även vid koordinater som är utanför sin egen definierade Height och Width. Dessutom Canvas påverkas inte av storleken på dess barn. Som ett resultat kan ett underordnat element överlappa andra element utanför den överordnade Canvas:s avgränsningsrektangel. Som standardinställning kan barnobjekt på Canvas ritas utanför gränserna för sin överordnade Canvas. Om du inte vill ha det här beteendet anger du egenskapen ClipToBounds till true. Den här inställningen gör att Canvas klipps till sin egen storlek. Canvas är det enda layoutelementet som tillåter att barn ritas utanför dess gränser.

Det här beteendet illustreras grafiskt i jämförelseexemplet för breddegenskaper.

DockPanel

Elementet DockPanel använder den bifogade egenskapen DockPanel.Dock som anges i underelement för att placera innehåll längs kanten av en behållare. När du anger DockPanel.Dock till Top eller Bottomplacerar den underordnade element ovanför eller under varandra. När du anger DockPanel.Dock till Left eller Rightplacerar den underordnade element till vänster eller höger om varandra. Egenskapen LastChildFill bestämmer positionen för det sista elementet som läggs till som underordnat till en DockPanel.

Du kan använda DockPanel för att placera en grupp relaterade kontroller, till exempel en uppsättning knappar. Alternativt kan du använda det för att skapa ett "panorerat" användargränssnitt, liknande det som finns i Microsoft Outlook.

Storlek på innehåll

Om du inte anger egenskaperna för Height och Width, anpassar sig DockPanel efter dess innehåll. Storleken kan öka eller minska för att anpassa sig efter storleken på sina underordnade element. Men när du anger dessa egenskaper och det inte längre finns plats för nästa angivna underordnade element, DockPanel visas inte det underordnade elementet eller efterföljande underordnade element och mäter inte efterföljande underordnade element.

LastChildFill

Som standardinställning fyller det sista underordnade elementet i DockPanel det återstående, oallokerade utrymmet. Om du inte vill ha det här beteendet anger du egenskapen LastChildFill till false.

Examples

I följande exempel visas hur du använder Canvas för att absolut placera innehåll. Den här koden genererar tre rutor på 100 bildpunkter. Den första fyrkanten är röd och dess position överst till vänster (x, y) anges som (0, 0). Den andra fyrkanten är grön och dess övre vänstra position är (100, 100), precis nedanför och till höger om den första fyrkanten. Den tredje kvadraten är blå, och dess övre vänstra position är (50, 50), vilket omfattar den nedre högra kvadranten av den första kvadraten och den övre vänstra kvadranten av den andra. Eftersom den tredje kvadraten läggs ut sist, verkar den vara ovanpå de andra två rutorna, det vill säga att de överlappande delarna antar färgen på den tredje rutan.

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

Det kompilerade programmet ger ett nytt användargränssnitt som ser ut som följande bild.

I följande exempel demonstreras hur man partitionerar utrymme med hjälp av en DockPanel. Exemplet lägger till fem Border element som underordnade till en överordnad DockPanel. Varje underordnat element använder en annan positioneringsegenskap för ett DockPanel för att dela in utrymme. Det sista elementet "fyller" det återstående, oallokerade utrymmet.

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

Se även

• Översikt över justering, marginaler och utfyllnad
• Översikt över bifogade egenskaper
• Skapa ett anpassat exempel på innehållshanteringspanel
• Layout
• Layout och design
• ScrollViewer
• Använd automatisk layoutöversikt
• Genomgång: Mitt första WPF-skrivbordsprogram
• Galleriexempel för WPF-kontroller
• Exempel på WPF-layoutgalleri