Panel Component Samples

Basic Panel

This content is inside a basic Panel.

A Panel renders as a div element by default.

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

Panel with GroupingText (Fieldset)

User Information

Name: John Doe

Email: john@example.com

<Panel GroupingText="User Information">
    <p>Name: John Doe</p>
    <p>Email: john@example.com</p>
</Panel>

Panel with Styling

This panel has custom colors and border.

<Panel BackColor="WebColor.LightYellow" 
       ForeColor="WebColor.Navy"
       BorderColor="WebColor.Blue"
       BorderWidth="Unit.Pixel(2)"
       BorderStyle="BorderStyle.Solid"
       Width="Unit.Pixel(300)">
    <p>This panel has custom colors and border.</p>
</Panel>

Panel with Vertical ScrollBars

Line 1 - This panel has vertical scrollbars.

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

<Panel ScrollBars="ScrollBars.Vertical" 
       Height="Unit.Pixel(100)" 
       Width="Unit.Pixel(300)"
       BorderStyle="BorderStyle.Solid"
       BorderWidth="Unit.Pixel(1)">
    <p>Line 1</p>
    <p>Line 2</p>
    ...
</Panel>

Panel with Horizontal ScrollBars

This is a very long line of text that will cause horizontal scrolling in the panel.

<Panel ScrollBars="ScrollBars.Horizontal" 
       Height="Unit.Pixel(60)" 
       Width="Unit.Pixel(200)">
    <p>Long content here...</p>
</Panel>

Panel with Auto ScrollBars

Auto scrollbars appear only when needed.

Add more content to see them.

Line 3

Line 4

<Panel ScrollBars="ScrollBars.Auto" 
       Height="Unit.Pixel(80)" 
       Width="Unit.Pixel(250)">
    <p>Content...</p>
</Panel>

Panel with Horizontal Alignment

This text is centered within the panel.

<Panel HorizontalAlign="HorizontalAlign.Center"
       BorderStyle="BorderStyle.Dashed"
       Width="Unit.Pixel(400)">
    <p>This text is centered within the panel.</p>
</Panel>

Panel with Right Alignment

This text is right-aligned.

<Panel HorizontalAlign="HorizontalAlign.Right" Width="Unit.Pixel(400)">
    <p>This text is right-aligned.</p>
</Panel>

Panel with Text Direction (RTL)

This text flows right-to-left.

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

Panel with No Wrap

This long text will not wrap to the next line because Wrap is false.

<Panel Wrap="false" Width="Unit.Pixel(200)">
    <span>This long text will not wrap...</span>
</Panel>

Hidden Panel (Visible=false)

(The panel above is hidden - nothing rendered)

<Panel Visible="false">
    <p>This content should not be visible.</p>
</Panel>

Visible Panel (Visible=true)

This panel is visible (Visible=true is the default).

<Panel Visible="true" BackColor="WebColor.LightGreen">
    <p>This panel is visible.</p>
</Panel>