AgentSkillsCN

beep-controls-usage

提供使用 Beep.Winform 控件替代标准 WinForms 控件的指南。内容涵盖控件映射、使用示例、迁移方案,以及将通用 Windows Forms 控件替换为具备 Material Design 设计风格、主题化支持与增强功能的 Beep 控件的最佳实践。

SKILL.md
--- frontmatter
name: beep-controls-usage
description: Guide for using Beep.Winform controls instead of standard WinForms controls. Provides control mapping, usage examples, migration patterns, and best practices for replacing generic Windows Forms controls with Beep controls that offer Material Design, theming, and enhanced functionality.

Beep.Winform Controls Usage Guide

Complete guide for using Beep.Winform controls instead of standard Windows Forms controls. Beep controls provide Material Design styling, theme support, DPI scaling, and enhanced functionality while maintaining compatibility with WinForms.

Complete Control Catalog

Button Controls

ControlNamespaceDescription
BeepButtonTheTechIdea.Beep.Winform.Controls.ButtonsPrimary button with 16 styles, icons, ripple effects
BeepChevronButtonTheTechIdea.Beep.Winform.Controls.ButtonsChevron/arrow button for navigation
BeepCircularButtonTheTechIdea.Beep.Winform.Controls.ButtonsCircular/FAB-style button
BeepExtendedButtonTheTechIdea.Beep.Winform.ControlsExtended button with additional features
BeepButtonPopListTheTechIdea.Beep.Winform.ControlsButton with dropdown popup list

Text Controls

ControlNamespaceDescription
BeepLabelTheTechIdea.Beep.Winform.ControlsLabel with image support, subheader, multiline
BeepTextBoxTheTechIdea.Beep.Winform.Controls.TextFieldsMaterial Design textbox with floating labels

Selection Controls

ControlNamespaceDescription
BeepComboBoxTheTechIdea.Beep.Winform.Controls.ComboBoxesMaterial Design dropdown with search
BeepDropDownCheckBoxSelectTheTechIdea.Beep.Winform.Controls.ComboBoxesMulti-select dropdown with checkboxes
BeepSelectTheTechIdea.Beep.Winform.ControlsAdvanced selection control
BeepListBoxTheTechIdea.Beep.Winform.Controls.ListBoxsMaterial Design listbox with virtual scrolling

CheckBox/Toggle Controls

ControlNamespaceDescription
BeepCheckBoxTheTechIdea.Beep.Winform.Controls.CheckBoxesGeneric checkbox with custom styling
BeepToggleTheTechIdea.Beep.Winform.Controls.ToggleMaterial Design toggle switch
BeepSwitchTheTechIdea.Beep.Winform.Controls.SwitchsAnimated switch control
BeepRadioGroupTheTechIdea.Beep.Winform.Controls.RadioGroupGrouped radio buttons
BeepHierarchicalRadioGroupTheTechIdea.Beep.Winform.Controls.RadioGroupHierarchical radio button groups

Container Controls

ControlNamespaceDescription
BeepCardTheTechIdea.Beep.Winform.Controls.CardsMaterial Design card with elevation
BeepTabsTheTechIdea.Beep.Winform.Controls.TabsTabbed container control
BeepDialogBoxTheTechIdea.Beep.Winform.ControlsMaterial Design dialog box

Navigation Controls

ControlNamespaceDescription
BeepSideBarTheTechIdea.Beep.Winform.Controls.SideBarSide navigation with accordion
BeepSideMenuTheTechIdea.Beep.Winform.ControlsSimple side menu
BeepNavBarTheTechIdea.Beep.Winform.Controls.NavBarsTop navigation bar
BeepMenuBarTheTechIdea.Beep.Winform.Controls.MenusApplication menu bar
BeepBreadcrumpTheTechIdea.Beep.Winform.Controls.BreadCrumbsBreadcrumb navigation
BeepWebHeaderAppBarTheTechIdea.Beep.Winform.Controls.AppBarsWeb-style header app bar
BeepFlyoutMenuTheTechIdea.Beep.Winform.ControlsFlyout menu panel
BeepDropDownMenuTheTechIdea.Beep.Winform.ControlsDropdown menu

Data Display Controls

ControlNamespaceDescription
BeepSimpleGridTheTechIdea.Beep.Winform.ControlsHigh-performance data grid
BeepTreeTheTechIdea.Beep.Winform.Controls.TreesTree view with icons, animations
BeepChartTheTechIdea.Beep.Winform.Controls.ChartsCharting control

Progress/Status Controls

ControlNamespaceDescription
BeepProgressBarTheTechIdea.Beep.Winform.Controls.ProgressBarsLinear/circular progress
BeepStarRatingTheTechIdea.Beep.Winform.Controls.RatingsStar rating control
BeepStepperBarTheTechIdea.Beep.Winform.Controls.SteppersStep indicator control
BeepStepperBreadCrumbTheTechIdea.Beep.Winform.Controls.SteppersBreadcrumb-style stepper

Date/Time Controls

ControlNamespaceDescription
BeepDatePickerTheTechIdea.Beep.Winform.ControlsMaterial Design date picker
BeepTimePickerTheTechIdea.Beep.Winform.ControlsTime selection control
BeepCalendarTheTechIdea.Beep.Winform.Controls.CalendarFull calendar control
BeepDatePickerViewTheTechIdea.Beep.Winform.ControlsDate picker view control

Notification Controls

ControlNamespaceDescription
BeepNotificationTheTechIdea.Beep.Winform.Controls.NotificationsIndividual notification
BeepNotificationManagerTheTechIdea.Beep.Winform.Controls.NotificationsNotification system manager
BeepNotificationGroupTheTechIdea.Beep.Winform.Controls.NotificationsGrouped notifications
BeepNotificationHistoryTheTechIdea.Beep.Winform.Controls.NotificationsNotification history viewer

Chip/Tag Controls

ControlNamespaceDescription
BeepMultiChipGroupTheTechIdea.Beep.Winform.Controls.ChipsMulti-select chips/tags

Image Controls

ControlNamespaceDescription
BeepImageTheTechIdea.Beep.Winform.Controls.ImagesSVG-aware image control
BeepShapeTheTechIdea.Beep.Winform.ControlsGeometric shape control

Other Controls

ControlNamespaceDescription
BeepScrollBarTheTechIdea.Beep.Winform.ControlsMaterial Design scrollbar
BeepScrollListTheTechIdea.Beep.Winform.ControlsScrollable list control
BeepBindingNavigatorTheTechIdea.Beep.Winform.ControlsData binding navigator
BeepFunctionsPanelTheTechIdea.Beep.Winform.ControlsQuick functions panel
BeepCompanyProfileTheTechIdea.Beep.Winform.ControlsCompany profile display
BeepDualPercentageControlTheTechIdea.Beep.Winform.ControlsDual percentage display
BeepTaskListItemTheTechIdea.Beep.Winform.ControlsTask list item
BeepFieldFilterTheTechIdea.Beep.Winform.ControlsField filter control

Control Mapping Reference

Standard WinForms → Beep Controls

Standard WinForms ControlBeep ControlNamespace
LabelBeepLabelTheTechIdea.Beep.Winform.Controls
TextBoxBeepTextBoxTheTechIdea.Beep.Winform.Controls.TextFields
ButtonBeepButtonTheTechIdea.Beep.Winform.Controls.Buttons
CheckBoxBeepCheckBoxTheTechIdea.Beep.Winform.Controls.CheckBoxes
RadioButtonBeepRadioGroupTheTechIdea.Beep.Winform.Controls.RadioGroup
ComboBoxBeepComboBoxTheTechIdea.Beep.Winform.Controls.ComboBoxes
ListBoxBeepListBoxTheTechIdea.Beep.Winform.Controls.ListBoxs
DataGridViewBeepSimpleGridTheTechIdea.Beep.Winform.Controls
TreeViewBeepTreeTheTechIdea.Beep.Winform.Controls.Trees
PanelBeepCardTheTechIdea.Beep.Winform.Controls.Cards
TabControlBeepTabsTheTechIdea.Beep.Winform.Controls.Tabs
MenuStripBeepMenuBarTheTechIdea.Beep.Winform.Controls.Menus
ProgressBarBeepProgressBarTheTechIdea.Beep.Winform.Controls.ProgressBars
DateTimePickerBeepDatePickerTheTechIdea.Beep.Winform.Controls
PictureBoxBeepImageTheTechIdea.Beep.Winform.Controls.Images
ToggleButtonBeepToggleTheTechIdea.Beep.Winform.Controls.Toggle

Basic Usage Examples

BeepButton

csharp
using TheTechIdea.Beep.Winform.Controls.Buttons;

var btn = new BeepButton
{
    Text = "Click Me",
    UseThemeColors = true,
    IconPath = "GFX/icons/check.svg"
};
btn.Click += (s, e) => { /* handle click */ };

BeepTextBox

csharp
using TheTechIdea.Beep.Winform.Controls.TextFields;

var textBox = new BeepTextBox
{
    PlaceholderText = "Enter name",
    UseThemeColors = true
};
string value = textBox.Text;

BeepComboBox

csharp
using TheTechIdea.Beep.Winform.Controls.ComboBoxes;

var combo = new BeepComboBox
{
    PlaceholderText = "Select option",
    UseThemeColors = true
};
combo.Items.AddRange(new[] { "Option 1", "Option 2" });

BeepCard (Panel replacement)

csharp
using TheTechIdea.Beep.Winform.Controls.Cards;

var card = new BeepCard
{
    UseThemeColors = true,
    CornerRadius = 8
};
card.Controls.Add(childControl);

Theme Integration

csharp
using TheTechIdea.Beep.Winform.Controls.ThemeManagement;

// Apply theme to all controls
var theme = BeepThemesManager.Instance.GetTheme("Material3Dark");
foreach (Control c in this.Controls)
{
    if (c is BaseControl beep)
    {
        beep.CurrentTheme = theme;
        beep.ApplyTheme();
    }
}

Individual Control Skills

See individual skill files for detailed usage: