xaml-csharp-development-skill-for-avalonia

HTML/CSS to Avalonia Modern UI Conversion Index

Table of Contents

  1. Scope and Coverage Contract
  2. HTML/CSS Spec Areas Mapped
  3. Migration Workflow
  4. Granular Reference Set
  5. Full API Coverage Pointers
  6. First Conversion Example
  7. AOT/Trimming and Threading Notes
  8. Troubleshooting

Scope and Coverage Contract

This reference lane maps modern HTML/CSS UI idioms to Avalonia 11.3.12 XAML/C# patterns for:

Coverage intent for this lane:

HTML/CSS Spec Areas Mapped

Migration Workflow

  1. Model structure first (layout containers and control tree).
  2. Port design tokens (color, spacing, typography) to resources.
  3. Port selectors/states to Avalonia classes and pseudo-classes.
  4. Port motion from CSS transitions/keyframes to Transitions/Animation.
  5. Port interaction semantics (commands, focus, validation, accessibility).
  6. Validate against full API references for edge cases.

Granular Reference Set

Full API Coverage Pointers

For exhaustive lookup (not just examples):

First Conversion Example

HTML/CSS card:

<article class="card">
  <h2>Revenue</h2>
  <p class="value">$420,000</p>
</article>

.card {
  padding: 16px;
  border-radius: 12px;
  background: #10151e;
  border: 1px solid #283348;
}
.value {
  font-size: 2rem;
  font-weight: 700;
}

Avalonia XAML:

<Border Classes="card" Padding="16">
  <StackPanel Spacing="6">
    <TextBlock Classes="card-title" Text="Revenue" />
    <TextBlock Classes="card-value" Text="$420,000" />
  </StackPanel>
</Border>

<Style Selector="Border.card">
  <Setter Property="CornerRadius" Value="12" />
  <Setter Property="Background" Value="#10151E" />
  <Setter Property="BorderBrush" Value="#283348" />
  <Setter Property="BorderThickness" Value="1" />
</Style>
<Style Selector="TextBlock.card-value">
  <Setter Property="FontSize" Value="32" />
  <Setter Property="FontWeight" Value="Bold" />
</Style>

Avalonia C#:

using Avalonia.Controls;
using Avalonia.Media;

var card = new Border
{
    Padding = new Avalonia.Thickness(16),
    CornerRadius = new CornerRadius(12),
    Background = new SolidColorBrush(Color.Parse("#10151E")),
    BorderBrush = new SolidColorBrush(Color.Parse("#283348")),
    BorderThickness = new Avalonia.Thickness(1),
    Child = new StackPanel
    {
        Spacing = 6,
        Children =
        {
            new TextBlock { Text = "Revenue" },
            new TextBlock { Text = "$420,000", FontSize = 32, FontWeight = FontWeight.Bold }
        }
    }
};

AOT/Trimming and Threading Notes

Troubleshooting

  1. Web-first layouts feel rigid after port.
    • Replace CSS absolute-heavy patterns with Grid + overlays.
  2. Selector behavior differs from CSS expectations.
    • Move from deep descendant chains to explicit classes and control themes.
  3. Animation ports jitter.
    • Use built-in transitions first, then escalate to keyframes/compositor only for hotspots.
This site is open source. Improve this page.