Panel Component Samples

Basic Panel with GroupingText

User Info Name:

<Panel GroupingText="User Info">
    <Label Text="Name:" />
    <TextBox />
</Panel>

Panel with ScrollBars

First paragraph of content inside the scrollable panel.

Second paragraph of content inside the scrollable panel.

Third paragraph of content inside the scrollable panel.

Fourth paragraph of content inside the scrollable panel.

<Panel ScrollBars="ScrollBars.Auto" Height="Unit.Pixel(100)">
    <p>First paragraph of content inside the scrollable panel.</p>
    <p>Second paragraph of content inside the scrollable panel.</p>
    <p>Third paragraph of content inside the scrollable panel.</p>
    <p>Fourth paragraph of content inside the scrollable panel.</p>
</Panel>

Panel with DefaultButton

<Panel DefaultButton="btnSubmit">
    <TextBox />
    <Button ID="btnSubmit" Text="Submit" />
</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>