Getting Started

Hello World with a ViewModel

Use this version when you want the more WPF-like flow: state lives in a view model, the view binds to it, and button clicks call commands instead of mutating controls directly.

The main project already references CommunityToolkit.Mvvm, so you can use ObservableObject, [ObservableProperty], and [RelayCommand] the same way the existing sample view models do.

View

<?xml version="1.0" encoding="utf-8"?>
<UserControl xmlns="urn:inkkslinger-ui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="InkkSlinger.HelloWorldWithViewModelView"
             Background="#101822"
             Padding="24">
  <Border Background="#142231"
          BorderBrush="#28445F"
          BorderThickness="1"
          CornerRadius="14"
          Padding="20">
    <StackPanel>
      <Label Text="{Binding Message}"
             FontSize="24"
             FontWeight="SemiBold"
             Foreground="#F4FAFF" />

      <Button Text="Change message"
              Command="{Binding ChangeMessageCommand}"
              Margin="0,12,0,0" />
    </StackPanel>
  </Border>
</UserControl>

View model

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace InkkSlinger;

public partial class HelloWorldViewModel : ObservableObject
{
    [ObservableProperty]
    private string _message = "Hello from the view model.";

    [RelayCommand]
    private void ChangeMessage()
    {
        Message = "You clicked the button.";
    }
}

Code-behind

namespace InkkSlinger;

public partial class HelloWorldWithViewModelView : UserControl
{
    public HelloWorldWithViewModelView()
    {
        InitializeComponent();
        DataContext = new HelloWorldViewModel();
    }
}

What the binding does: {Binding Message} reads the Message property from the view's DataContext, and {Binding ChangeMessageCommand} binds the button to the generated command.