using-mewui-layout

Arranges UI elements using MewUI layout panels in C#.

Updated Nov 22, 2023
One-click install
npx skills add https://github.com/parksanghoon-sys/TestCode --skill using-mewui-layout-parksanghoon-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-mewui-layout
Source: https://github.com/parksanghoon-sys/TestCode/tree/main/src/Modbus/.agents/skills/using-mewui-layout
Command: npx skills add https://github.com/parksanghoon-sys/TestCode --skill using-mewui-layout-parksanghoon-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building UI layouts in MewUI requires knowing which panel to use and the correct fluent API syntax, which differs from standard WPF conventions (e.g., .DockTo() instead of .Dock(), single Spacing property). This Skill provides the exact patterns for arranging elements with StackPanel, Grid, Canvas, DockPanel, and WrapPanel. ## Core Features & Use Cases - Panel Quick Reference: Covers StackPanel, Grid, Canvas, DockPanel, and WrapPanel with fluent C# code examples for each layout scenario. - Attached Properties: Documents Grid row/column positioning, Canvas coordinates, and DockPanel docking via ConditionalWeakTable-based attached properties. - Custom Panel Creation: Provides the MeasureContent/ArrangeContent override pattern with complete RadialPanel and TilePanel examples. - Use Case: When building a settings dialog with a toolbar on top, status bar at bottom, and a grid of form fields, use this Skill to compose DockPanel and Grid with correct MewUI syntax. ## Quick Start Use the using-mewui-layout skill to create a Grid layout with a header row spanning two columns and a button in the bottom-right cell.

Frequently Asked Questions about using-mewui-layout

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

FAQPage Schema
How do I create a Grid layout in MewUI?▼

Create a Grid by calling .Rows() and .Columns() with definition strings like "Auto,*,Auto", then position children using .Row(), .Column(), or the .GridPosition(row, column) convenience method. Use .ColumnSpan() for elements spanning multiple columns.

How do I dock elements in a MewUI DockPanel?▼

Use the .DockTo(Dock.Top) method on child elements, not .Dock() as in WPF. Convenience methods .DockTop(), .DockBottom(), .DockLeft(), and .DockRight() are also available, and .LastChildFill(true) makes the final child fill remaining space.

Which MewUI panel should I use for my layout?▼

Use StackPanel for vertical or horizontal lists, Grid for row/column layouts, Canvas for absolute positioning, DockPanel for edge-docked elements like toolbars and status bars, and WrapPanel for flowing content that wraps.

How do I create a custom panel in MewUI?▼

Inherit from Panel and override MeasureContent (returns Size) and ArrangeContent (returns void, not Size). Call InvalidateMeasure() for size-affecting properties, handle Padding via Deflate()/Inflate(), and check child visibility by casting to UIElement.

Does MewUI use DependencyProperty for attached properties?▼

No, MewUI uses ConditionalWeakTable for attached properties instead of a DependencyProperty system. This provides weak references with automatic cleanup, thread safety, and lazy data creation only when a property is set.