Siticone Pinnable Panel Host
The SiticonePinnablePanelHost is an intelligent container that acts as a manager for
SiticonePinnablePanel
controls.
It automatically sorts child panels into two groups: Pinned (important) and Unpinned (standard).
The host handles smooth reordering animations, layout flow (Vertical, Horizontal, or Grid), and collision detection.
Layout Configuration
Configure how panels are arranged within the host container.
| Property | Type | Description & Usage Example |
|---|---|---|
LayoutMode |
PanelLayout |
host.LayoutMode = PanelLayout.Vertical;
Controls arrangement strategy. Options:
|
PinnedPanelSpacing |
int | host.PinnedPanelSpacing = 15; Gap in pixels between panels in the Pinned section. |
UnpinnedPanelSpacing |
int | host.UnpinnedPanelSpacing = 10; Gap in pixels between panels in the Unpinned section. |
PreserveOriginalOrder |
bool | host.PreserveOriginalOrder = true; If true, when a panel is unpinned, it returns to its original relative position among other unpinned items, rather than being appended to the end. |
Section Headers
Visual separators that categorize content into Pinned and Unpinned areas.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowSectionHeaders |
bool | host.ShowSectionHeaders = true; Enables drawing of section titles above the Pinned and Unpinned groups. |
PinnedSectionTitle |
string | host.PinnedSectionTitle = "Favorites"; Text displayed above the pinned panels group. |
UnpinnedSectionTitle |
string | host.UnpinnedSectionTitle = "More Widgets"; Text displayed above the unpinned panels group. |
SectionHeaderFont |
Font | host.SectionHeaderFont = new Font("Segoe UI", 12, FontStyle.Bold); |
PinnedSectionHeaderBackColor |
Color | host.PinnedSectionHeaderBackColor = Color.AliceBlue; |
Animation & Behavior
Settings for smooth reordering transitions when panels change state.
| Property | Type | Description & Usage Example |
|---|---|---|
AnimateReordering |
bool | host.AnimateReordering = true; If true, panels slide to their new positions. If false, they snap instantly. |
AnimationDuration |
int | host.AnimationDuration = 300; Time in milliseconds for the reorder animation to complete. |
AnimationEasing |
EasingType | host.AnimationEasing = AnimationEasingPbfx.EaseOutQuad; Acceleration curve: Linear, EaseIn, EaseOut, Bounce, etc. |
IsOverlappingDetectionEnabled |
bool | host.IsOverlappingDetectionEnabled = true; Automatically runs a background check to fix panel overlaps caused by rapid resizing. |
Public Methods
Programmatic control over panel ordering and state.
// Adds a new panel to the host and automatically arranges it.
host.AddPanel(myNewPanel);
// Reorders a panel within its current section (Pinned or Unpinned).
host.MovePanelUp(panel1);
host.MovePanelDown(panel2);
// Bulk operation to change the state of all managed panels.
host.PinAllPanels(); // Moves everything to top
host.UnpinAllPanels(); // Moves everything to bottom
// Updates the internal "default order" to match the current arrangement.
// Useful for persisting user customizations.
host.SaveCurrentOrderAsOriginal();
// Forces a complete recalculation of panel positions.
// Use this if panels become misaligned due to external size changes.
host.ResetLayout(true); // true = animate to new positions
Events
| Event | Description |
|---|---|
PanelPinned |
Fired when a child panel's IsPinned property becomes true. |
PanelUnpinned |
Fired when a child panel's IsPinned property becomes false. |
PanelsReordered |
Fired after the layout engine has finished moving panels to new positions. |
PanelMoved |
Fired when a specific panel changes its index order (via MovePanelUp/Down). |
Detailed Usage Examples
Example 1: Dashboard with Grid Layout
Sets up a responsive grid of widgets where users can pin their favorites to the top.
private void InitializeDashboard()
{
// Configure Host for Grid Mode
hostDashboard.LayoutMode = SiticonePinnablePanelHost.PanelLayout.Grid;
hostDashboard.ShowSectionHeaders = true;
hostDashboard.PinnedSectionTitle = "Priority Widgets";
hostDashboard.UnpinnedSectionTitle = "All Widgets";
// Add 10 widgets
for (int i = 1; i <= 10; i++)
{
var panel = new SiticonePinnablePanel();
panel.Size = new Size(250, 150); // Fixed size for grid cells
panel.BackgroundColor = Color.White;
// Add content
var lbl = new Label { Text = $"Widget {i}", Location = new Point(10, 10) };
panel.Controls.Add(lbl);
// Add to host
hostDashboard.AddPanel(panel);
}
}
Example 2: Vertical Task List
Manages a To-Do list where pinned items act as "High Priority" tasks.
private void SetupTaskList()
{
hostTasks.LayoutMode = SiticonePinnablePanelHost.PanelLayout.Vertical;
// Styling Headers
hostTasks.ShowSectionHeaders = true;
hostTasks.PinnedSectionHeaderBackColor = Color.MistyRose;
hostTasks.PinnedSectionTitle = "URGENT TASKS";
hostTasks.UnpinnedSectionTitle = "Backlog";
// Smooth Animation
hostTasks.AnimateReordering = true;
hostTasks.AnimationDuration = 400;
hostTasks.AnimationEasing = SiticonePinnablePanelHost.AnimationEasingPbfx.Bounce;
// Handle pinning event to log changes
hostTasks.PanelPinned += (s, e) => {
Console.WriteLine($"Task '{e.PanelName}' marked as Urgent");
};
}
Example 3: Dynamic Panel Management
Adding and removing panels at runtime with proper cleanup.
private void btnAdd_Click(object sender, EventArgs e)
{
// Create new panel
var newPnl = new SiticonePinnablePanel();
newPnl.Height = 100;
// Add button to remove itself
var btnClose = new Button { Text = "X", Dock = DockStyle.Right, Width = 30 };
btnClose.Click += (s, args) => {
hostMain.RemovePanel(newPnl); // Safe removal from host
newPnl.Dispose(); // Clean up resources
};
newPnl.Controls.Add(btnClose);
// Add to host - it will slide into place
hostMain.AddPanel(newPnl);
}