rendering-mewui-elements

Name: rendering-mewui-elements
Availability: InStock
Author: parksanghoon

Implements custom rendering in MewUI controls using IGraphicsContext drawing APIs.

Updated Nov 22, 2023

Search Tags:#csharp #graphics #rendering #mewui #onrender #custom controls #igraphicscontext

Ready to run

npx skills add https://github.com/parksanghoon-sys/TestCode --skill rendering-mewui-elements-parksanghoon-sys

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: rendering-mewui-elements
Source: https://github.com/parksanghoon-sys/TestCode/tree/main/src/Modbus/.agents/skills/rendering-mewui-elements
Command: npx skills add https://github.com/parksanghoon-sys/TestCode --skill rendering-mewui-elements-parksanghoon-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers building custom MewUI controls need to understand the Measure/Arrange/Render pipeline and the IGraphicsContext drawing API, including non-obvious details like parameter ordering, DPI-aware text measurement, and state management. ## Core Features & Use Cases - Rendering Pipeline Guidance: Explains the three-pass layout system (Measure, Arrange, Render) and which methods to override in custom controls. - IGraphicsContext API Reference: Documents drawing primitives, text rendering, images, clipping, and state Save/Restore patterns. - Backend & Invalidation: Covers Direct2D, GDI, and OpenGL graphics backends plus InvalidateMeasure/Arrange/Visual semantics. - Use Case: When implementing a custom GradientButton control, use this Skill to correctly override MeasureContent with DPI-aware text measurement and OnRender with rounded rectangles and centered text. ## Quick Start Ask the AI to implement a custom MewUI control that draws a rounded rectangle background with centered text using OnRender and IGraphicsContext.

Frequently Asked Questions about rendering-mewui-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I draw custom graphics in a MewUI control?▼

Override OnRender(IGraphicsContext context) in your control and call drawing methods like FillRectangle, DrawLine, FillEllipse, or DrawText. Coordinates are relative to the control's Bounds, and you should wrap state changes in Save/Restore calls.

How does the MewUI Measure Arrange Render pipeline work?▼

MewUI uses a three-pass layout: Measure calculates DesiredSize via MeasureContent, Arrange sets Bounds via ArrangeContent, and Render draws visuals via OnRender. Window.PerformLayout drives the first two passes and RenderFrame triggers drawing.

How do I measure text size in MewUI for layout?▼

Create a measurement context with factory.CreateMeasurementContext(dpi) inside MeasureContent, then call ctx.MeasureText with your text, font, and optional max width. Return the measured size padded as needed for your DesiredSize.

Which graphics backends does MewUI support?▼

MewUI supports three backends set via Application.DefaultGraphicsBackend: Direct2D for GPU-accelerated rendering on Windows, GDI for software rendering on Windows, and OpenGL for cross-platform rendering.

What is the difference between InvalidateMeasure, InvalidateArrange, and InvalidateVisual?▼

InvalidateMeasure triggers re-measure, re-arrange, and re-render. InvalidateArrange triggers re-arrange and re-render. InvalidateVisual triggers only a re-render, making it the lightest option when only the visual output changes.

Why is my MewUI text drawn in the wrong position?▼

DrawText takes parameters in the order text, bounds, font, color, horizontal alignment, vertical alignment, then wrapping. Passing arguments in the wrong order or omitting the two separate TextAlignment values commonly causes misplaced text.