Panneau

Panel les éléments sont des composants qui contrôlent le rendu des éléments , leur taille et leurs dimensions, leur position et la disposition de leur contenu enfant. Windows Presentation Foundation (WPF) fournit un certain nombre d’éléments prédéfinis Panel ainsi que la possibilité de construire des éléments personnalisés Panel .

Titre	Descriptif
Créer un élément de panneau personnalisé	Montre comment créer un élément de panneau personnalisé.
Remplacer la méthode Panel OnRender	Montre comment remplacer la méthode OnRender d’un panneau.
Définir les propriétés de hauteur d’un élément	Montre comment définir les propriétés de hauteur d’un élément.
Définir les propriétés de largeur d’un élément	Montre comment définir les propriétés de largeur d’un élément.

Styles et modèles

Panel est une classe de base abstraite qui ne définit pas d’apparence visuelle ou de modèle par défaut. Les classes de panneau dérivées implémentent leur propre style et comportement de modèle.

Content, propriété

Ce contrôle utilise la Children propriété comme propriété de contenu.

Pièces

Ce contrôle ne définit aucune partie de modèle.

États visuels

Ce contrôle ne définit aucun état visuel.

Classe Panel

Panel est la classe de base pour tous les éléments qui fournissent la prise en charge de la disposition dans Windows Presentation Foundation (WPF). Les éléments dérivés Panel sont utilisés pour positionner et organiser des éléments dans XAML (Extensible Application Markup Language) et du code.

WpF inclut une suite complète d’implémentations de panneau dérivées qui permettent de nombreuses dispositions complexes. Ces classes dérivées exposent des propriétés et des méthodes qui permettent la plupart des scénarios d’interface utilisateur standard. Les développeurs qui ne trouvent pas de comportement d’arrangement enfant répondant à leurs besoins peuvent créer de nouvelles dispositions en remplaçant les méthodes ArrangeOverride et MeasureOverride.

Membres communs du groupe

Tous les Panel éléments prennent en charge les propriétés de dimensionnement et de positionnement de base définies par FrameworkElement, y compris Height, Width, HorizontalAlignment, VerticalAlignment, , Marginet LayoutTransform. Pour plus d’informations sur le positionnement des propriétés définies par FrameworkElement, consultez Vue d’ensemble de l’alignement, des marges et du remplissage.

Panel expose des propriétés supplémentaires qui sont d’une importance critique dans la compréhension et l’utilisation de la disposition. La Background propriété est utilisée pour remplir la zone entre les limites d’un élément de panneau dérivé avec un Brush. Children représente la collection enfant d'éléments dont Panel est constitué. InternalChildren représente le contenu de la Children collection ainsi que les membres générés par la liaison de données. Les deux sont constitués d’éléments UIElementCollection enfants hébergés au sein du parent Panel.

Panel expose également une propriété attachée Panel.ZIndex qui peut être utilisée pour obtenir un ordre superposé dans une classe dérivée Panel. Les membres de la collection Children d'un panneau avec une valeur Panel.ZIndex plus élevée apparaissent devant ceux avec une valeur Panel.ZIndex inférieure. Cela est particulièrement utile pour les panneaux tels que Canvas et Grid qui permettent aux enfants de partager le même espace de coordonnées.

Panel définit également la OnRender méthode, qui peut être utilisée pour remplacer le comportement de présentation par défaut d’un Panel.

Propriétés jointes

Les éléments de panneau dérivés utilisent largement les propriétés jointes. Une propriété attachée est une forme spécialisée de propriété de dépendance qui n’a pas l'enveloppe de la propriété Common Language Runtime (CLR) conventionnelle. Les propriétés jointes ont une syntaxe spécialisée dans le langage XAML (Extensible Application Markup Language), qui peut être vue dans plusieurs des exemples suivants.

L’un des objectifs d’une propriété jointe est de permettre aux éléments enfants de stocker des valeurs uniques d’une propriété réellement définie par un élément parent. Une application de cette fonctionnalité permet aux éléments enfants d'informer le parent sur la façon dont ils souhaitent être présentés dans l'interface utilisateur, ce qui est extrêmement utile pour la mise en page de l'application. Pour plus d’informations, consultez Vue d’ensemble des propriétés jointes.

Éléments de panneau dérivés

De nombreux objets dérivent de Panel, mais ils ne sont pas tous destinés à être utilisés en tant que fournisseurs de disposition racine. Il existe six classes de panneau définies (Canvas, DockPanel, , Grid StackPanel, VirtualizingStackPanelet WrapPanel) conçues spécifiquement pour la création de l’interface utilisateur de l’application.

Chaque élément de panneau encapsule ses propres fonctionnalités spéciales, comme indiqué dans le tableau suivant.

Nom de l’élément	Panneau d’interface utilisateur ?	Descriptif
Canvas	Oui	Définit une zone dans laquelle vous pouvez positionner explicitement les éléments enfants en coordonnées par rapport à la Canvas zone.
DockPanel	Oui	Définit une zone dans laquelle vous pouvez organiser les éléments enfants horizontalement ou verticalement, les uns par rapport aux autres.
Grid	Oui	Définit une zone de grille flexible composée de colonnes et de lignes. Les éléments enfants d’un Grid peut être positionnés avec précision à l’aide de la Margin propriété.
StackPanel	Oui	Organise les éléments enfant en une seule ligne qui peuvent être orientée horizontalement ou verticalement.
TabPanel	Non	Gère la disposition des boutons d’onglet dans un TabControl.
ToolBarOverflowPanel	Non	Organise le contenu dans un ToolBar contrôle.
UniformGrid	Non	UniformGrid est utilisé pour organiser des enfants dans une grille avec toutes les tailles de cellules égales.
VirtualizingPanel	Non	fournit une classe de base pour les panneaux qui peuvent « virtualiser » leur collection d'enfants.
VirtualizingStackPanel	Oui	Organise et virtualise le contenu sur une seule ligne orientée horizontalement ou verticalement.
WrapPanel	Oui	WrapPanel positionne les éléments enfants en ordre séquentiel de gauche à droite, en passant le contenu à la ligne suivante au bord de la boîte de conteneur. L’ordre suivant se produit de manière séquentielle de haut en bas ou de droite à gauche, en fonction de la valeur de la Orientation propriété.

Panneaux d’interface utilisateur

Il existe six classes de panneau disponibles dans WPF qui sont optimisées pour prendre en charge les scénarios d’interface utilisateur : Canvas, , DockPanel, Grid, StackPanel, VirtualizingStackPanelet WrapPanel. Ces éléments de panneau sont faciles à utiliser, polyvalents et extensibles suffisamment pour la plupart des applications.

Chaque élément dérivé Panel traite les contraintes de dimensionnement différemment. Comprendre comment un Panel gère les contraintes dans la direction horizontale ou verticale peut rendre la disposition plus prévisible.

Nom du panneau	x-Dimension	y-Dimension
Canvas	Contraint par le contenu	Limité au contenu
DockPanel	Avec des contraintes	Avec des contraintes
StackPanel (Orientation verticale)	Avec des contraintes	Contrainte par le contenu
StackPanel (Orientation horizontale)	Limité au contenu	Avec des contraintes
Grid	Avec des contraintes	Contrainte, sauf dans les cas où Auto s’appliquent aux lignes et aux colonnes
WrapPanel	Restriction liée au contenu	Contraint par le contenu

Vous trouverez ci-dessous des descriptions plus détaillées et des exemples d’utilisation de chacun de ces éléments.

Toile

L’élément Canvas permet le positionnement du contenu en fonction des coordonnées x et y absolues. Les éléments peuvent être dessinés dans un emplacement unique ; ou, si les éléments occupent les mêmes coordonnées, l’ordre dans lequel ils apparaissent dans le balisage détermine l’ordre dans lequel les éléments sont dessinés.

Canvas offre le support de mise en page le plus flexible de tout Panel. Les propriétés Height et Width sont utilisées pour définir la zone du canevas, et les éléments à l’intérieur sont affectés à des coordonnées absolues par rapport à la zone du parent Canvas. Quatre propriétés jointes, Canvas.Left, Canvas.Top Canvas.Right et , permettent Canvas.Bottomun contrôle précis de l’emplacement d’objet au sein d’un Canvas, permettant au développeur de positionner et d’organiser des éléments précisément sur l’écran.

ClipToBounds dans une toile

Canvas peut positionner les éléments enfants à n’importe quelle position sur l’écran, même à des coordonnées en dehors de ses propres coordonnées définies Height et Width. De plus, Canvas n’est pas affecté par la taille de ses enfants. Par conséquent, il est possible qu’un élément enfant recouvre d’autres éléments en dehors du rectangle de délimitation du parent Canvas. Le comportement par défaut d’un Canvas est de permettre aux enfants d’être dessinés en dehors des limites du parent Canvas. Si ce comportement n’est pas souhaitable, la ClipToBounds propriété peut être définie sur true. Cela amène Canvas à se réduire à sa propre taille. Canvas est le seul élément de disposition qui permet aux enfants d’être dessinés en dehors de ses limites.

Ce comportement est illustré graphiquement dans l’exemple de comparaison des propriétés de largeur.

DockPanel

L’élément DockPanel utilise la DockPanel.Dock propriété jointe telle que définie dans les éléments de contenu enfant pour positionner le contenu le long des bords d’un conteneur. Quand DockPanel.Dock est défini sur Top ou Bottom, il positionne les éléments enfants au-dessus ou en dessous les uns des autres. Quand DockPanel.Dock est défini sur Left ou Right, il positionne les éléments enfants à gauche ou à droite les uns des autres. La LastChildFill propriété détermine la position de l’élément final ajouté en tant qu’enfant d’un DockPanel.

Vous pouvez utiliser DockPanel pour positionner un groupe de contrôles associés, tels qu’un ensemble de boutons. Vous pouvez également l’utiliser pour créer une interface utilisateur « panoramique », similaire à celle trouvée dans Microsoft Outlook.

Redimensionnement en fonction du contenu

Si ses propriétés Height et Width ne sont pas spécifiées, DockPanel s’adapte à la taille de son contenu. La taille peut augmenter ou diminuer pour s'adapter à la taille de ses éléments enfants. Toutefois, lorsque ces propriétés sont spécifiées et qu’il n’y a plus de place pour l’élément enfant spécifié suivant, DockPanel n’affiche pas cet élément enfant ou les éléments enfants suivants et ne mesure pas les éléments enfants suivants.

LastChildFill

Par défaut, le dernier enfant d’un DockPanel élément « remplira » l’espace restant, non alloué. Si ce comportement n’est pas souhaité, définissez la LastChildFill propriété sur false.

Examples

L’exemple suivant montre comment utiliser Canvas pour positionner absolument le contenu. Ce code produit trois carrés de 100 pixels. Le premier carré est rouge et sa position supérieure gauche (x, y) est spécifiée comme (0, 0). Le deuxième carré est vert, et sa position supérieure gauche est (100, 100), juste en dessous et à droite du premier carré. Le troisième carré est bleu et sa position supérieure gauche est (50, 50), englobant ainsi le quadrant inférieur droit du premier carré et le quadrant supérieur gauche de la seconde. Étant donné que le troisième carré est disposé en dernier, il semble se trouver au-dessus des deux autres carrés, c’est-à-dire que les parties qui se chevauchent supposent la couleur de la troisième boîte.


// 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’application compilée génère une nouvelle interface utilisateur qui ressemble à ceci.

Élément Canvas typique.

L’exemple suivant montre comment partitionner l’espace à l’aide d’un DockPanel. Cinq Border éléments sont ajoutés en tant qu’enfants d’un parent DockPanel. Chacun utilise une propriété de positionnement différente d’un DockPanel pour diviser l’espace. L’élément final « remplit » l’espace restant, non alloué.


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

Voir aussi

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-02-09