BeepAccordionMenuDesigner
Design-time designer for BeepAccordionMenu — 10 smart-tag properties, 6 designer verbs, 6 style presets, adornment rendering (empty-state + preview hints), and item manipulation
Table of Contents
Overview
Namespace: TheTechIdea.Beep.Winform.Controls.Design.Server.Designers
Inheritance: BaseBeepControlDesigner
BeepAccordionMenuDesigner provides a rich design-time experience for the accordion sidebar menu control. It features adornment rendering — drawing empty-state hints ("Click 'Add Sample Items' to get started...") and preview-footers directly on the design surface — plus 6 designer verbs, 10 smart-tag properties, and 6 one-click style presets.
BeepAccordionMenuDesigner
| Member | Description |
|---|---|
| Initialize(component) | Wires ListItems.ListChanged event, calls UpdateEmptyState() |
| Dispose(disposing) | Unsubscribes ListChanged event |
| OnPaintAdornments(pe) | Draws empty-state hint if no items, or preview footer if items exist |
| PreFilterProperties(dict) | Hides Margin, ImeMode, AccessibleDescription/Name/Role from the Properties window |
Designer Verbs (6)
| Verb | Action |
|---|---|
| Add Sample Items | Populates 3 sample sections: Dashboard (with Analytics/Monitoring children), Reports, and Settings (with Profile/Preferences children) |
| Toggle Expand/Collapse | Inverts the expanded state of all items |
| Expand All | Expands all accordion sections |
| Collapse All | Collapses all accordion sections |
| Apply Recommended Sizes | Uses AccordionStyleHelpers to set ItemHeight and ChildItemHeight to style-appropriate values |
| Reset to Defaults | Resets to Material3 style, standard sizes, clears all items |
Adornment Rendering
Two visual hints drawn directly on the design surface:
- Empty State — Dashed rectangle with text "Click 'Add Sample Items' to get started..." when the accordion has no items. This prevents a blank control from appearing confusing at design time.
- Preview Footer — Small footer showing item count and current style name when items exist.
BeepAccordionMenuActionList — Smart-Tag
Properties (10)
| Property | Type | Category | Description |
|---|---|---|---|
| AccordionStyle | AccordionStyle | Appearance | Visual style (Material3, Modern, Classic, Minimal, iOS, Fluent2) |
| Title | string | Appearance | Optional title text above the menu |
| ItemHeight | int | Layout | Height of parent-level items in px |
| ChildItemHeight | int | Layout | Height of child-level items in px |
| ExpandedWidth | int | Layout | Width when expanded |
| CollapsedWidth | int | Layout | Width when collapsed |
| AutoScrollEnabled | bool | Behavior | Enable vertical scrolling for overflow |
| AutoFitHeight | bool | Behavior | Auto-size height to fit all items |
| AllowItemDragDrop | bool | Behavior | Allow reordering items via drag-and-drop |
| HasItemIcons | bool | Behavior | Show icon column for items |
| AnimationStep | int | Animation | Animation step interval in ms |
| AnimationDelay | int | Animation | Animation delay before starting in ms |
Style Presets (6 Methods)
ApplyMaterial3Style(), ApplyModernStyle(), ApplyClassicStyle(), ApplyMinimalStyle(), ApplyiOSStyle(), ApplyFluent2Style()
Item Actions (3 Methods)
AddSampleItems(), ExpandAll(), CollapseAll(). Plus SetRecommendedItemHeight().
Smart-Tag Sections (8 Sections)
| Section | Items |
|---|---|
| Style | AccordionStyle property |
| Style Presets | 6 set-style methods |
| Appearance | Title property + title method |
| Layout | ItemHeight, ChildItemHeight, ExpandedWidth, CollapsedWidth |
| Behavior | AutoScrollEnabled, AutoFitHeight, AllowItemDragDrop, HasItemIcons |
| Animation | AnimationStep, AnimationDelay |
| Items | AddSampleItems, ExpandAll, CollapseAll actions |
| Quick Actions | SetRecommendedItemHeight |
Examples
// At design time, use the smart-tag:
// Smart-tag > Style Presets > "Apply Material 3 Style"
// Smart-tag > Items > "Add Sample Items"
// Smart-tag > Behavior > AllowItemDragDrop = true
// Equivalent at runtime:
var accordion = new BeepAccordionMenu();
accordion.AccordionStyle = AccordionStyle.Material3;
accordion.ExpandedWidth = 240;
accordion.CollapsedWidth = 56;
accordion.ItemHeight = 44;
accordion.AnimationStep = 150;
accordion.Items.Add(new AccordionItem("Dashboard", Icons.Dashboard,
new List<AccordionItem> {
new AccordionItem("Analytics", Icons.Chart),
new AccordionItem("Monitoring", Icons.Monitor)
}));