← ClaudeAtlas

binding-mewui-datalisted

Binds MewUI controls to data using ObservableValue and ValueBinding. Use when implementing reactive UI updates, building ViewModels, or connecting controls to data sources.
christian289/dotnet-with-claudecode · ★ 41 · Web & Frontend · score 76
Install: claude install-skill christian289/dotnet-with-claudecode
## ObservableValue<T> Reactive value container: ```csharp // Create var name = new ObservableValue<string>("Initial"); var count = new ObservableValue<int>(0); var enabled = new ObservableValue<bool>(true); // Read/Write string current = name.Value; name.Value = "New"; // Triggers Changed event // Subscribe via Changed event name.Changed += () => Console.WriteLine($"Changed to: {name.Value}"); // With coercion (value constraint) var percent = new ObservableValue<double>(50, coerce: v => Math.Clamp(v, 0, 100)); percent.Value = 150; // Becomes 100 ``` --- ## Fluent Binding ```csharp var vm = new MyViewModel(); new StackPanel().Children( // One-way (source → UI) new Label().BindText(vm.Message), // Two-way (source ↔ UI) new TextBox().BindText(vm.Name), new CheckBox().BindIsChecked(vm.IsEnabled), new Slider().BindValue(vm.Volume), // With converter new Label().BindText(vm.Count, c => $"Count: {c}"), // Common bindings new Button().BindIsEnabled(vm.CanSubmit).BindIsVisible(vm.ShowButton) ) ``` --- ## ViewModel Pattern ```csharp public class PersonViewModel { public ObservableValue<string> FirstName { get; } = new(""); public ObservableValue<string> LastName { get; } = new(""); public ObservableValue<string> FullName { get; } = new(""); public ObservableValue<bool> IsValid { get; } = new(false); public PersonViewModel() { FirstName.Changed += Update; LastName.Changed += Update; }