> For the complete documentation index, see [llms.txt](https://avaloniachina.gitbook.io/avalonia/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://avaloniachina.gitbook.io/avalonia/docs/controls/panel.md).

# Panel

The `Panel` is the base class for controls that can contain multiple children like `DockPanel` or `StackPanel`.

The `Panel` class can be useful on its own for very basic layouts, or simply to allow multiple controls to be to be contained.

```markup
<Panel Height="300" Width="300">
    <Rectangle Fill="Red" Height="100" VerticalAlignment="Top"/>
    <Rectangle Fill="Blue" Width="100" HorizontalAlignment="Right" />
    <Rectangle Fill="Green" Height="100" VerticalAlignment="Bottom"/>
    <Rectangle Fill="Orange" Width="100" HorizontalAlignment="Left"/>
</Panel>
```

![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-0374c574c520ba560c8608cbe301bc3439742a06%2Fimage%20\(7\).png?alt=media)

There are other more useful panels that derive from `Panel`, these include:

{% content-ref url="/pages/NY0OfuNecuG367rDIxTr" %}
[StackPanel](/avalonia/docs/controls/stackpanel.md)
{% endcontent-ref %}

{% content-ref url="/pages/do6d9i6EwkTJHFt7xXch" %}
[DockPanel](/avalonia/docs/controls/dockpanel.md)
{% endcontent-ref %}

{% content-ref url="/pages/ISqySeHONWrg5s6pktWT" %}
[RelativePanel](/avalonia/docs/controls/relativepanel.md)
{% endcontent-ref %}

{% content-ref url="/pages/evFKUnkyLH2XhkGiccYB" %}
[WrapPanel](/avalonia/docs/controls/wrappanel.md)
{% endcontent-ref %}

### Reference <a href="#reference" id="reference"></a>

[Panel](http://reference.avaloniaui.net/api/Avalonia.Controls/Panel/)

### Source code <a href="#source-code" id="source-code"></a>

[Panel.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Panel.cs)

### Related Docs

{% content-ref url="/pages/ISa9cswxqgAUqrV0tDyM" %}
[面板概述](/avalonia/docs/layout/panels-overview.md)
{% endcontent-ref %}

{% content-ref url="/pages/wKTInQVk65ayVBkUybDm" %}
[创建自定义面板](/avalonia/docs/layout/create-a-custom-panel.md)
{% endcontent-ref %}