# Building Mewui Apps

> Creates MewUI applications with proper setup, windows, theming, and controls. Use when starting a new MewUI project, understanding application lifecycle, using built-in controls, or styling with themes.

- Skill: `tomevault-io/building-mewui-apps` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/building-mewui-apps`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/building-mewui-apps/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/building-mewui-apps

---


## Minimal App

```csharp
using MewUI;
using MewUI.Controls;

var window = new Window()
    .Title("My App")
    .Width(800).Height(600)
    .Content(new Label().Text("Hello, MewUI!"));

Application.Run(window);  // Static method
```

---

## Application Setup

```csharp
// Set defaults BEFORE Run()
Application.DefaultGraphicsBackend = GraphicsBackend.Direct2D;  // or Gdi, OpenGL

var window = new Window().Title("My App").Content(mainContent);
Application.Run(window);

// Access current app AFTER Run() starts
// Application.Current.SetTheme(ThemeVariant.Light);
```

---

## Common Controls

```csharp
new Label().Text("Display text").BindText(observable)
new TextBox().BindText(observable).Placeholder("Hint")
new Button().Content("Click").OnClick(() => DoAction())
new CheckBox().Text("Option").BindIsChecked(observable)  // Note: .Text() not .Content()
new ComboBox().Items("A", "B", "C").BindSelectedIndex(observable)
new ListBox().Items("X", "Y", "Z").BindSelectedIndex(observable)
new Slider().Minimum(0).Maximum(100).BindValue(observable)
new ProgressBar().Minimum(0).Maximum(100).BindValue(observable)
new Image().SourceFile("path.png").StretchMode(ImageStretch.Uniform)  // Note: SourceFile, StretchMode
```

---

## Theming

```csharp
// Access theme in controls
var bg = Theme.Palette.ControlBackground;
var accent = Theme.Palette.Accent;  // Note: Accent, not AccentColor
var radius = Theme.Metrics.ControlCornerRadius;

// Visual states
var color = _isPressed ? Theme.Palette.ButtonPressedBackground
    : IsMouseOver ? Theme.Palette.ButtonHoverBackground
    : Theme.Palette.ButtonFace;

// Theme change notification - note two parameters
protected override void OnThemeChanged(Theme oldTheme, Theme newTheme)
{
    base.OnThemeChanged(oldTheme, newTheme);
    InvalidateVisual();
}
```

---

## Fluent Styling

```csharp
element
    .Width(200).Height(100)
    .Margin(8).Padding(4)
    .Background(Colors.White).Foreground(Colors.Black)
    .HorizontalAlignment(HorizontalAlignment.Center)
    .VerticalAlignment(VerticalAlignment.Stretch)
```

---

## App Layout Pattern

```csharp
new DockPanel().Children(
    CreateMenu().DockTo(Dock.Top),      // Note: .DockTo() not .Dock()
    CreateToolbar().DockTop(),           // Or convenience methods
    CreateStatusBar().DockBottom(),
    CreateSidebar().DockLeft().Width(200),
    CreateMainContent()  // Fills remaining
)
```

---

**Dialogs & Popups**: See [dialogs.md](dialogs.md)
**Window management**: See [windows.md](windows.md)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/christian289) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->