Panel

March 25, 2026 · View on GitHub

The Panel component is a container control that renders as a <div> element, or as a <fieldset> when the GroupingText property is set. It provides a way to group controls and apply common styling.

Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.panel?view=netframework-4.8

Features Supported in Blazor

Child content rendering
GroupingText property for fieldset/legend rendering
Direction property for text direction (LTR/RTL)
HorizontalAlign property for text alignment
ScrollBars property for overflow control
Wrap property for content wrapping
BackImageUrl property for background images
All style properties (BackColor, ForeColor, CssClass, etc.)
Visible property to show/hide the panel

Web Forms Features NOT Supported

DefaultButton - JavaScript-based button targeting is not implemented

Syntax Comparison

=== "Web Forms"

```html
<asp:Panel
    ID="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DefaultButton="string"
    Direction="NotSet|LeftToRight|RightToLeft"
    Enabled="True|False"
    Font-Bold="True|False"
    Font-Italic="True|False"
    Font-Names="string"
    Font-Size="string"
    ForeColor="color name|#dddddd"
    GroupingText="string"
    Height="size"
    HorizontalAlign="NotSet|Left|Center|Right|Justify"
    ScrollBars="None|Horizontal|Vertical|Both|Auto"
    Visible="True|False"
    Width="size"
    Wrap="True|False"
    runat="server">
    
    <!-- Child content here -->
    
</asp:Panel>
```

=== "Blazor"

```razor
<Panel>
    <p>This is content inside a panel.</p>
</Panel>
```

Blazor Syntax

Basic Panel

<Panel>
    <p>This is content inside a panel.</p>
</Panel>

Panel with CSS Class

<Panel CssClass="card p-3">
    <h3>Card Title</h3>
    <p>Card content goes here.</p>
</Panel>

Panel with GroupingText (Fieldset)

When GroupingText is set, the Panel renders as a <fieldset> with a <legend>:

<Panel GroupingText="Personal Information">
    <Label Text="Name:" />
    <TextBox @bind-Text="name" />
    <br />
    <Label Text="Email:" />
    <TextBox @bind-Text="email" TextMode="TextBoxMode.Email" />
</Panel>

Renders as:

<fieldset>
    <legend>Personal Information</legend>
    <!-- content -->
</fieldset>

Panel with ScrollBars

<Panel ScrollBars="ScrollBars.Auto" Height="Unit.Pixel(200)" Width="Unit.Pixel(300)">
    <p>This content can scroll if it overflows the panel dimensions.</p>
    <!-- lots of content -->
</Panel>

Panel with Text Direction (RTL)

<Panel Direction="ContentDirection.RightToLeft">
    <p>This text will be right-to-left.</p>
</Panel>

Panel with Horizontal Alignment

<Panel HorizontalAlign="HorizontalAlign.Center">
    <p>This content is centered.</p>
</Panel>

Panel with No Wrap

<Panel Wrap="false">
    <p>This content will not wrap to a new line.</p>
</Panel>

Styled Panel

@using static BlazorWebFormsComponents.WebColor

<Panel BackColor="LightGray" 
       ForeColor="DarkBlue"
       BorderColor="Navy"
       BorderWidth="Unit.Pixel(1)"
       BorderStyle="BorderStyle.Solid">
    <p>Styled panel content.</p>
</Panel>

Conditionally Visible Panel

<CheckBox Text="Show Details" @bind-Checked="showDetails" />

<Panel Visible="@showDetails">
    <p>These are the details that can be shown or hidden.</p>
</Panel>

@code {
    private bool showDetails = false;
}

Panel with BackImageUrl

The BackImageUrl property sets a CSS background image on the panel. This renders as an inline background-image:url(...) style.

<Panel BackImageUrl="https://example.com/images/background.png"
       Width="Unit.Pixel(500)"
       Height="Unit.Pixel(200)"
       BorderStyle="BorderStyle.Solid"
       BorderWidth="Unit.Pixel(1)">
    <p>Content displayed over the background image.</p>
</Panel>

Renders as:

<div style="background-image:url(https://example.com/images/background.png);width:500px;height:200px;border-style:Solid;border-width:1px;">
    <p>Content displayed over the background image.</p>
</div>

HTML Output

Default Panel (div)

Blazor:

<Panel CssClass="my-panel">
    <p>Content</p>
</Panel>

Rendered HTML:

<div class="my-panel">
    <p>Content</p>
</div>

Panel with GroupingText (fieldset)

Blazor:

<Panel GroupingText="Settings" CssClass="settings-group">
    <p>Content</p>
</Panel>

Rendered HTML:

<fieldset class="settings-group">
    <legend>Settings</legend>
    <p>Content</p>
</fieldset>

ScrollBars Property Values

Value	CSS Output
`ScrollBars.None`	No overflow style
`ScrollBars.Horizontal`	`overflow-x:scroll; overflow-y:hidden`
`ScrollBars.Vertical`	`overflow-x:hidden; overflow-y:scroll`
`ScrollBars.Both`	`overflow:scroll`
`ScrollBars.Auto`	`overflow:auto`

Migration Notes

When migrating from Web Forms to Blazor:

Remove the asp: prefix and runat="server" attribute
Replace ID with @ref if you need a component reference
The DefaultButton property is not implemented - use JavaScript or Blazor event handling instead
Use ChildContent pattern (content between tags) for child controls

Before (Web Forms):

<asp:Panel ID="pnlDetails" 
           CssClass="details-panel" 
           Visible="true" 
           runat="server">
    <p>Panel content</p>
</asp:Panel>

After (Blazor):

<Panel CssClass="details-panel" Visible="true">
    <p>Panel content</p>
</Panel>