BeepSocialWidget

Overview

BeepSocialWidget is a paint-based WinForms widget that inherits from BaseControl. It uses an IWidgetPainter pipeline to render rich visuals without child controls. The Style property selects one of 10 built-in render modes; changing it at runtime immediately swaps the painter and triggers a repaint.

Toolbox icon: 👥
Category: Beep Widgets → Social
Default size: 300 × 200
Namespace: TheTechIdea.Beep.Winform.Controls.Widgets

Key Features

👥 Ten Social Styles

Profile to chat thread — complete social UI toolkit in one widget.

💬 Chat Bubbles

ChatWidget renders sent/received message bubbles with timestamps.

📊 UserStats

Stats card shows followers, following, posts with numerical badges.

🟢 Online Indicators

UserList style renders live online status dots per user.

🖱️ Action Buttons

ProfileCard and ContactCard styles include Follow/Message action buttons.

🌊 Activity Stream

ActivityStream renders a chronological feed with type icons.

Style Variants (10)

Style Value	Description
`ProfileCard`	User profile with avatar, name, role, and social stats.
`TeamMembers`	Grid of team member avatar thumbnails with name chips.
`MessageCard`	Single message bubble with sender avatar and timestamp.
`ActivityStream`	Chronological social activity feed.
`UserList`	Scrollable contact/user list with online indicators.
`ChatWidget`	Chat interface with sent/received message bubbles.
`CommentThread`	Threaded comment display with reply indentation.
`SocialFeed`	Social media style post card with like/share counts.
`UserStats`	User statistics card (posts, followers, following, etc.).
`ContactCard`	Contact information card with action buttons.

Properties

Property	Type	Default	Description
`Style`	SocialWidgetStyle	ProfileCard	Selects the social painter.
`Title`	string	"Social Widget"	Primary heading or user name.
`Subtitle`	string	"Subtitle"	Secondary heading or role.
`UserName`	string	"John Doe"	Display name for profile/contact styles.
`UserRole`	string	"Developer"	Role or position label.
`AvatarPath`	string	""	Path to avatar image.
`SocialItems`	List<SocialItem>	(empty)	Data collection for feed, chat, and user list styles.
`AccentColor`	Color	(theme primary)	Accent for action buttons and online indicators.

Inherits all BaseControl properties (Border, Padding, Theme colors, etc.).

Events

Event	Args Type	Description
`ProfileClicked`	BeepEventDataArgs	Fired when the profile/avatar area is clicked.
`ActionClicked`	BeepEventDataArgs	Fired when a social action button (Follow, Message, etc.) is clicked.
`ItemClicked`	BeepEventDataArgs	Fired when a feed post, chat message, or list item is clicked.

Basic Usage

var profile = new BeepSocialWidget
{
    Style      = SocialWidgetStyle.ProfileCard,
    UserName   = "Alex Johnson",
    UserRole   = "Senior Engineer",
    AvatarPath = "avatars/alex.png",
    Size       = new Size(260, 200)
};

var chat = new BeepSocialWidget
{
    Style       = SocialWidgetStyle.ChatWidget,
    Title       = "Support Chat",
    SocialItems = new List
    {
        new SocialItem { Text = "Hello, how can I help?",  IsSent = false, Sender = "Support" },
        new SocialItem { Text = "I need help with login.", IsSent = true,  Sender = "You"     },
    },
    Size = new Size(340, 260)
};

Event Handling

profile.ActionClicked  += (s, e) => SendFollowRequest(profile.UserName);
profile.ProfileClicked += (s, e) => OpenUserProfile(profile.UserName);

Best Practices

Set Style before adding the widget to the form to avoid double repaints.
Adjust Size to fit your layout — defaults are minimum comfortable sizes.
Read BeepEventDataArgs.Data in event handlers for context-specific click data.
Call Invalidate() after updating data properties to trigger a repaint.
Let theme colors flow from BeepStyling.CurrentTheme — avoid overriding color properties unless customization is explicitly desired.