← ClaudeAtlas

creating-mewui-controlslisted

Creates custom MewUI controls with proper measure, arrange, render, and input handling. Use when building new interactive controls, extending existing controls, or implementing custom rendering.
christian289/dotnet-with-claudecode · ★ 41 · Web & Frontend · score 76
Install: claude install-skill christian289/dotnet-with-claudecode
## Control Base Classes | Base | Use Case | |------|----------| | `Control` | Interactive elements (buttons, inputs) | | `ContentControl` | Single-child containers | | `Panel` | Multi-child layouts | --- ## Basic Control Structure ```csharp public class MyButton : Control { private bool _isPressed; // Property with invalidation public string Text { get; set { if (field != value) { field = value; InvalidateMeasure(); } } } = ""; // Enable focus by overriding (not setting property) public override bool Focusable => true; // Measure: calculate desired size protected override Size MeasureContent(Size availableSize) { var factory = GetGraphicsFactory(); using var ctx = factory.CreateMeasurementContext(GetDpi()); var textSize = ctx.MeasureText(Text, GetFont()); return new Size(textSize.Width + Padding.Horizontal, textSize.Height + Padding.Vertical); } // Render: draw the control protected override void OnRender(IGraphicsContext context) { var bounds = new Rect(0, 0, Bounds.Width, Bounds.Height); var bgColor = _isPressed ? Theme.Palette.ButtonPressedBackground : IsMouseOver ? Theme.Palette.ButtonHoverBackground : Theme.Palette.ButtonFace; context.FillRoundedRectangle(bounds, 4, 4, bgColor); context.DrawRoundedRectangle(bounds, 4, 4,