Marquee Painters (8 Renderers)
8 IMarqueeItemRenderer implementations — Default, Card, Pill, StockTicker, NewsBanner, Minimal, Slide, Vertical — with MarqueePainterFactory and MarqueeRenderContext
Table of Contents
Overview
The BeepMarquee control provides an animated ticker/scrolling display with 8 distinct item renderer styles. Each renderer implements IMarqueeItemRenderer and is resolved via MarqueePainterFactory. The factory creates renderer instances on demand, falling back to DefaultMarqueePainter if no match is found.
Renderers receive a MarqueeRenderContext that captures the current scroll position, theme colors, animation offset, and direction. This enables styles ranging from simple text scrolling to stock tickers with green/red arrows and news banners with separator dots.
IMarqueeItemRenderer Contract
public interface IMarqueeItemRenderer
{
string Name { get; }
Size Measure(Graphics g, MarqueeItem item, MarqueeRenderContext context);
void Draw(Graphics g, MarqueeItem item, Rectangle bounds, MarqueeRenderContext context);
}| Member | Type | Description |
|---|---|---|
Name | string | Unique renderer name used for lookup (e.g., "Default", "StockTicker", "NewsBanner") |
Measure | Method | Computes the pixel size of a marquee item given the current context (font, spacing, style) |
Draw | Method | Renders the item within its bounds: text, icons, backgrounds, arrows, separators, badges |
MarqueePainterFactory
MarqueePainterFactory resolves IMarqueeItemRenderer instances by name. It maintains a static dictionary of all 8 renderers and provides a Create method with fallback logic.
| Member | Signature | Description |
|---|---|---|
Create | static IMarqueeItemRenderer Create(string name) | Returns the renderer instance for the given name; returns DefaultMarqueePainter if name is invalid |
Register | static void Register(string name, IMarqueeItemRenderer renderer) | Registers a custom renderer, overriding the default for that name |
Painter Catalog (8 Total)
| # | Name | Class | Visual Style | Key Features |
|---|---|---|---|---|
| 1 | Default | DefaultMarqueePainter | Plain text scroll | Simple left-to-right scrolling text, custom font and color, no borders or backgrounds |
| 2 | Card | CardMarqueePainter | Card-style items | Rounded rectangle background per item, drop shadow, padded text, theme-colored background |
| 3 | Pill | PillMarqueePainter | Pill/capsule items | Full capsule background, colored accent left edge, bold text, compact spacing |
| 4 | StockTicker | StockTickerMarqueePainter | Stock market ticker | Symbol + price + change display; green up-arrow for gains, red down-arrow for losses; percentage change; bold numeric formatting |
| 5 | NewsBanner | NewsBannerMarqueePainter | News headline banner | Headline text with separator dots between items, optional category badge prefix ("BREAKING", "SPORTS"), left-aligned label |
| 6 | Minimal | MinimalMarqueePainter | Minimalist | No backgrounds, thin text, subtle separators (vertical line), low visual weight, good for status bars |
| 7 | Slide | SlideMarqueePainter | Slide/fade transition | Items slide in from right with fade effect, full-width items, crossfade transition between adjacent items |
| 8 | Vertical | VerticalMarqueePainter | Vertical scroll | Top-to-bottom scrolling, full-width rows, alternate background stripes, vertical direction setting |
MarqueeRenderContext
MarqueeRenderContext is passed to every Measure and Draw call and captures the current state of the marquee animation.
| Property | Type | Description |
|---|---|---|
Theme | Theme | Current theme object for color resolution |
Font | Font | Base font for item text rendering |
TextColor | Color | Default text color from theme |
AccentColor | Color | Accent/highlight color for emphasis (arrows, badges, backgrounds) |
ScrollPosition | float | Current scroll offset in pixels; used to calculate item positions for smooth animation |
IsVertical | bool | True for vertical scrolling (Vertical renderer); false for horizontal |
Gap | int | Pixel gap between consecutive items |
AnimationOffset | float | Additional animation phase offset (in radians) for effects like pulsing or wave motion |
Marquee Helpers
| Class | Responsibility |
|---|---|
AnimationHelper | Manages the scroll animation loop: timer-driven position updates, smooth easing, pause-on-hover |
LayoutHelper | Calculates item positions along the scroll axis, wrapping logic for infinite scroll, spacing computation |
InputHelper | Handles mouse hover (pause animation), click on items, tooltip display for truncated text |
ItemsCollection | Observable collection of MarqueeItem objects; notifies the marquee to re-measure on add/remove |
Examples
Style Switching with Items
var marquee = new BeepMarquee();
marquee.Items.Add(new MarqueeItem { Text = "AAPL 192.53 ▲ 2.1%", Tag = "stock" });
marquee.Items.Add(new MarqueeItem { Text = "GOOGL 175.12 ▼ 0.8%", Tag = "stock" });
marquee.Items.Add(new MarqueeItem { Text = "MSFT 378.91 ▲ 1.4%", Tag = "stock" });
marquee.Items.Add(new MarqueeItem { Text = "TSLA 245.67 ▼ 3.2%", Tag = "stock" });
marquee.RendererName = "StockTicker";
marquee.ScrollSpeed = 60;
marquee.Gap = 32;
marquee.Items.Clear();
marquee.Items.Add(new MarqueeItem { Text = "BREAKING: Market opens higher on tech rally", Tag = "news" });
marquee.Items.Add(new MarqueeItem { Text = "SPORTS: Local team advances to finals", Tag = "news" });
marquee.Items.Add(new MarqueeItem { Text = "WEATHER: Sunny, high of 75°F", Tag = "news" });
marquee.RendererName = "NewsBanner";
marquee.RendererName = "Card";
marquee.Items.Clear();
for (int i = 0; i < 10; i++)
marquee.Items.Add(new MarqueeItem { Text = $"User {i} completed task #{i * 7}" });
marquee.ScrollSpeed = 40;
marquee.RendererName = "Vertical";
marquee.IsVertical = true;
marquee.Height = 120;