XAML Dialects: WPF, WinUI & MAUI

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace Bookshelf.Core.Models;

public sealed partial class Book : ObservableObject
{
    public required string Title { get; init; }
    public required string Author { get; init; }
    public int Year { get; init; }
    public bool IsAvailable { get; init; } = true;

    [ObservableProperty]
    public partial bool IsRead { get; set; }
}

public interface IBookRepository
{
    Task<IReadOnlyList<Book>> GetBooksAsync(string? search, CancellationToken cancellationToken);
}

public interface IDialogService
{
    Task<bool> ConfirmAsync(string title, string message);
}

namespace Bookshelf.Core.ViewModels;

public sealed partial class BooksViewModel : ObservableObject
{
    private readonly IBookRepository _repository;
    private readonly IDialogService _dialogs;

    public BooksViewModel(IBookRepository repository, IDialogService dialogs)
    {
        _repository = repository;
        _dialogs = dialogs;
        SearchText = string.Empty;
    }

    public ObservableCollection<Book> Books { get; } = [];

    [ObservableProperty]
    public partial string SearchText { get; set; }

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(BorrowSelectedCommand))]
    public partial Book? SelectedBook { get; set; }

    [RelayCommand]
    private async Task LoadAsync(CancellationToken cancellationToken)
    {
        var books = await _repository.GetBooksAsync(SearchText, cancellationToken);
        Books.Clear();
        foreach (var book in books)
        {
            Books.Add(book);
        }
    }

    [RelayCommand(CanExecute = nameof(CanBorrowSelected))]
    private async Task BorrowSelectedAsync()
    {
        if (SelectedBook is { } book
            && await _dialogs.ConfirmAsync("Borrow", $"Borrow \"{book.Title}\"?"))
        {
            book.IsRead = true;
        }
    }

    private bool CanBorrowSelected() => SelectedBook is { IsAvailable: true };

    partial void OnSearchTextChanged(string value) => LoadCommand.Execute(null);
}

<UserControl x:Class="Bookshelf.Wpf.Views.BooksView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:models="clr-namespace:Bookshelf.Core.Models;assembly=Bookshelf.Core"
             xmlns:vm="clr-namespace:Bookshelf.Core.ViewModels;assembly=Bookshelf.Core"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance Type=vm:BooksViewModel}">
  <UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisibility" />
    <DataTemplate x:Key="BookRowTemplate" DataType="{x:Type models:Book}">
      <Grid Margin="8,6" ColumnDefinitions="*, Auto">
        <StackPanel>
          <TextBlock Text="{Binding Title}" FontWeight="SemiBold" />
          <TextBlock Text="{Binding Author}" Opacity="0.7" />
          <TextBlock Text="{Binding Year, StringFormat=Published {0}}" Opacity="0.7" />
        </StackPanel>
        <StackPanel Grid.Column="1" VerticalAlignment="Center">
          <TextBlock Text="Available"
                     Visibility="{Binding IsAvailable, Converter={StaticResource BoolToVisibility}}" />
          <CheckBox Content="Read" IsChecked="{Binding IsRead, Mode=TwoWay}" />
        </StackPanel>
      </Grid>
    </DataTemplate>
  </UserControl.Resources>

  <Grid Margin="12" RowDefinitions="Auto, *">
    <TextBox Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}"
             AutomationProperties.Name="Search books" Margin="0,0,0,8" />
    <ListBox Grid.Row="1"
             ItemsSource="{Binding Books}"
             SelectedItem="{Binding SelectedBook, Mode=TwoWay}"
             ItemTemplate="{StaticResource BookRowTemplate}" />
  </Grid>
</UserControl>

using System.Windows.Controls;
using Bookshelf.Core.ViewModels;

namespace Bookshelf.Wpf.Views;

public partial class BooksView : UserControl
{
    // The view model is resolved by the Generic Host and handed in; there is no ViewModelLocator in the toolkit.
    public BooksView(BooksViewModel viewModel)
    {
        InitializeComponent();
        DataContext = viewModel;
    }
}

<Page
    x:Class="Bookshelf.WinUI.Views.BooksPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:Bookshelf.Core.Models"
    mc:Ignorable="d">

  <Page.Resources>
    <DataTemplate x:Key="BookRowTemplate" x:DataType="models:Book">
      <Grid Padding="8,6" ColumnSpacing="12">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel>
          <TextBlock Text="{x:Bind Title}" Style="{StaticResource BodyStrongTextBlockStyle}" />
          <TextBlock Text="{x:Bind Author}"
                     Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
          <TextBlock Text="{x:Bind Year}"
                     Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
        </StackPanel>
        <StackPanel Grid.Column="1" VerticalAlignment="Center">
          <TextBlock Text="Available" Visibility="{x:Bind IsAvailable}" />
          <CheckBox Content="Read" IsChecked="{x:Bind IsRead, Mode=TwoWay}" />
        </StackPanel>
      </Grid>
    </DataTemplate>
  </Page.Resources>

  <Grid Padding="12" RowSpacing="8">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBox PlaceholderText="Search books"
             Text="{x:Bind ViewModel.SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             AutomationProperties.Name="Search books" />
    <ListView Grid.Row="1"
              ItemsSource="{x:Bind ViewModel.Books}"
              SelectedItem="{x:Bind ViewModel.SelectedBook, Mode=TwoWay}"
              ItemTemplate="{StaticResource BookRowTemplate}" />
  </Grid>
</Page>

using Bookshelf.Core.ViewModels;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.UI.Xaml.Controls;

namespace Bookshelf.WinUI.Views;

public sealed partial class BooksPage : Page
{
    // x:Bind resolves "ViewModel.SearchText" against this class, so the view model must be a property here.
    public BooksViewModel ViewModel { get; }

    public BooksPage()
    {
        // App.Services is the host service provider exposed by the sample application class.
        ViewModel = App.Services.GetRequiredService<BooksViewModel>();
        InitializeComponent();
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Bookshelf.Maui.Views.BooksPage"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Bookshelf.Core.Models;assembly=Bookshelf.Core"
             xmlns:vm="clr-namespace:Bookshelf.Core.ViewModels;assembly=Bookshelf.Core"
             x:DataType="vm:BooksViewModel"
             Title="Bookshelf">

  <Grid Padding="12" RowDefinitions="Auto,*" RowSpacing="8">
    <SearchBar Placeholder="Search books"
               Text="{Binding SearchText}"
               SemanticProperties.Description="Search books" />
    <CollectionView Grid.Row="1"
                    ItemsSource="{Binding Books}"
                    SelectionMode="Single"
                    SelectedItem="{Binding SelectedBook}">
      <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:Book">
          <Grid Padding="8,6" ColumnDefinitions="*,Auto" ColumnSpacing="12">
            <VerticalStackLayout>
              <Label Text="{Binding Title}" FontAttributes="Bold" />
              <Label Text="{Binding Author}" Opacity="0.7" />
              <Label Text="{Binding Year, StringFormat='Published {0}'}" Opacity="0.7" />
            </VerticalStackLayout>
            <VerticalStackLayout Grid.Column="1" VerticalOptions="Center">
              <Label Text="Available" IsVisible="{Binding IsAvailable}" />
              <HorizontalStackLayout>
                <CheckBox IsChecked="{Binding IsRead}" />
                <Label Text="Read" VerticalOptions="Center" />
              </HorizontalStackLayout>
            </VerticalStackLayout>
          </Grid>
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
  </Grid>
</ContentPage>

using Bookshelf.Core.ViewModels;

namespace Bookshelf.Maui.Views;

public partial class BooksPage : ContentPage
{
    public BooksPage(BooksViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
    }
}

<Page
    x:Class="Bookshelf.WinUI.Views.BookDetailsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Bookshelf.WinUI">

  <StackPanel Spacing="8" Padding="16">
    <!-- OneTime (the default): evaluated when the page loads -->
    <TextBlock Text="{x:Bind ViewModel.SelectedBook.Title}" />

    <!-- OneWay: refreshed when SelectedBook or its Title raise PropertyChanged -->
    <TextBlock Text="{x:Bind ViewModel.SelectedBook.Author, Mode=OneWay}" />

    <!-- TwoWay with a fallback for a null chain -->
    <TextBox Text="{x:Bind ViewModel.SearchText, Mode=TwoWay, FallbackValue='(none)'}" />

    <!-- Function binding: a static method evaluated with bound arguments -->
    <TextBlock Text="{x:Bind local:Formatting.ByLine(ViewModel.SelectedBook.Author, ViewModel.SelectedBook.Year), Mode=OneWay}" />

    <!-- Binding to an element by name: the element is a field of the page -->
    <TextBlock Text="{x:Bind SearchBox.Text, Mode=OneWay}" />
    <TextBox x:Name="SearchBox" />
  </StackPanel>
</Page>

namespace Bookshelf.WinUI;

public static class Formatting
{
    public static string ByLine(string? author, int year) =>
        author is null ? string.Empty : $"{author}, {year}";
}

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Bookshelf.Core.Models;assembly=Bookshelf.Core"
             xmlns:vm="clr-namespace:Bookshelf.Core.ViewModels;assembly=Bookshelf.Core"
             x:Class="Bookshelf.Maui.Views.BookDetailsPage"
             x:DataType="vm:BooksViewModel">

  <VerticalStackLayout Padding="16" Spacing="8">
    <!-- Compiled: the path is checked against BooksViewModel at build time -->
    <Label Text="{Binding SelectedBook.Title}" />

    <!-- A template that binds to another type redeclares x:DataType -->
    <VerticalStackLayout BindableLayout.ItemsSource="{Binding Books}">
      <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="models:Book">
          <Label Text="{Binding Title}" />
        </DataTemplate>
      </BindableLayout.ItemTemplate>
    </VerticalStackLayout>

    <!-- Turn compilation off for one element that uses a dynamic source -->
    <Label x:DataType="{x:Null}" Text="{Binding DynamicValue}" />

    <!-- Reaching the page view model from inside a template -->
    <Button Text="Borrow"
            Command="{Binding Source={RelativeSource AncestorType={x:Type vm:BooksViewModel}}, Path=BorrowSelectedCommand}" />
  </VerticalStackLayout>
</ContentPage>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Style x:Key="BookTitleStyle" TargetType="TextBlock">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontWeight" Value="SemiBold" />
  </Style>

  <Style TargetType="ListBoxItem">
    <Setter Property="Padding" Value="8,6" />
    <Style.Triggers>
      <!-- A data trigger reads a property of the item, no code-behind needed -->
      <DataTrigger Binding="{Binding IsAvailable}" Value="False">
        <Setter Property="Opacity" Value="0.55" />
      </DataTrigger>
      <!-- A property trigger reacts to a dependency property of the element itself -->
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="{DynamicResource BookHoverBrush}" />
      </Trigger>
      <!-- Several conditions at once -->
      <MultiTrigger>
        <MultiTrigger.Conditions>
          <Condition Property="IsSelected" Value="True" />
          <Condition Property="IsMouseOver" Value="True" />
        </MultiTrigger.Conditions>
        <Setter Property="Background" Value="{DynamicResource BookSelectedHoverBrush}" />
      </MultiTrigger>
    </Style.Triggers>
  </Style>
</ResourceDictionary>

<Page
    x:Class="Bookshelf.WinUI.Views.BooksShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Page.Resources>
    <Style x:Key="BookTitleStyle" TargetType="TextBlock"
           BasedOn="{StaticResource BodyStrongTextBlockStyle}">
      <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
    </Style>
  </Page.Resources>

  <Grid x:Name="RootGrid">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition x:Name="DetailsColumn" Width="0" />
    </Grid.ColumnDefinitions>

    <ListView x:Name="BookList" />
    <StackPanel x:Name="DetailsPane" Grid.Column="1" Visibility="Collapsed" />

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="WidthStates">
        <VisualState x:Name="Wide">
          <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="900" />
          </VisualState.StateTriggers>
          <VisualState.Setters>
            <Setter Target="DetailsPane.Visibility" Value="Visible" />
            <Setter Target="DetailsColumn.Width" Value="360" />
          </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Narrow">
          <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="0" />
          </VisualState.StateTriggers>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Grid>
</Page>

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

  <Style x:Key="BookTitleStyle" TargetType="Label">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontAttributes" Value="Bold" />
  </Style>

  <!-- A style class is applied with StyleClass="Caption" and several can be combined -->
  <Style TargetType="Label" Class="Caption">
    <Setter Property="Opacity" Value="0.7" />
    <Setter Property="FontSize" Value="12" />
  </Style>

  <!-- Visual states inside a style: the selected row gets a themed background -->
  <Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
      <VisualStateGroupList>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal" />
          <VisualState x:Name="Selected">
            <VisualState.Setters>
              <Setter Property="BackgroundColor"
                      Value="{AppThemeBinding Light=#DCE9F7, Dark=#2B3F55}" />
            </VisualState.Setters>
          </VisualState>
        </VisualStateGroup>
      </VisualStateGroupList>
    </Setter>
  </Style>
</ResourceDictionary>