# Avalonia Controls Data Display

> Use when working with Avalonia data display controls: TextBlock, Label, ListBox, DataGrid, TreeView, ItemsControl, Carousel, or MarkdownViewer. Covers binding patterns, templates, virtualization, selection modes, and column configuration for Avalonia 12.

- **Type:** Skill
- **Install:** `agentstack add skill-linuxdevel-avalonia-skills-data-display`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [linuxdevel](https://agentstack.voostack.com/s/linuxdevel)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [linuxdevel](https://github.com/linuxdevel)
- **Source:** https://github.com/linuxdevel/Avalonia-skills/tree/main/skills/avalonia/avalonia-controls/data-display

## Install

```sh
agentstack add skill-linuxdevel-avalonia-skills-data-display
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Avalonia Data Display Controls

## Overview

Data display controls render read-only or selectable information. Prefer `ItemsControl` for simple lists, `ListBox` when selection is needed, `DataGrid` for tabular data, and `TreeView` for hierarchical data.

---

## TextBlock

| Property | Type | Notes |
|---|---|---|
| `Text` | `string` | Plain text content |
| `FontSize` | `double` | In device-independent pixels |
| `FontWeight` | `FontWeight` | `Normal`, `Bold`, `SemiBold`, etc. |
| `FontStyle` | `FontStyle` | `Normal`, `Italic`, `Oblique` |
| `TextWrapping` | `TextWrapping` | `NoWrap`, `Wrap`, `WrapWithOverflow` |
| `TextTrimming` | `TextTrimming` | `None`, `CharacterEllipsis`, `WordEllipsis` |
| `TextDecorations` | `TextDecorationCollection` | `Underline`, `Strikethrough` |
| `LineHeight` | `double` | Line spacing |
| `MaxLines` | `int` | Clamps number of displayed lines |
| `Inlines` | `InlineCollection` | Mixed-format inline content |

```xml

    Important:
     This is 
    critical
    
    

```

---

## Label

| Property | Type | Notes |
|---|---|---|
| `Content` | `object` | Text or XAML content |
| `Target` | `IInputElement` | Associates access key with target control |

Use `_` prefix in content to define an access key (Alt+key focuses `Target`).

```xml

```

> **Note:** `Label` adds padding and is a `ContentControl`. For pure display, prefer `TextBlock`.

---

## ItemsControl

Base class for all list controls. Use directly when no selection is needed.

| Property | Type | Notes |
|---|---|---|
| `ItemsSource` | `IEnumerable` | Bound collection |
| `ItemTemplate` | `DataTemplate` | Template for each item |
| `ItemsPanel` | `ItemsPanelTemplate` | Layout panel (default: `StackPanel`) |
| `ItemContainerTheme` | `ControlTheme` | Style for each container |

```xml

    
        
            
                
            
        
    
    
    
        
            
        
    

```

---

## ListBox

Extends `ItemsControl` with selection. Virtualizes items by default.

| Property | Type | Notes |
|---|---|---|
| `SelectedItem` | `object` | TwoWay by default |
| `SelectedItems` | `IList` | Multiple selection (requires `SelectionMode` flag) |
| `SelectedIndex` | `int` | Zero-based index |
| `SelectionMode` | `SelectionMode` | `Single`, `Multiple`, `Toggle`, `AlwaysSelected` |
| `Scroll` | `ScrollViewer` | Access the internal scroll viewer |

```xml

    
        
            
                
                
            
        
    

    
        
            
        
    

```

---

## DataGrid

Requires separate NuGet package: `Avalonia.Controls.DataGrid`

Add to `App.axaml` styles:
```xml

```

Namespace: `xmlns:dg="using:Avalonia.Controls"`

| Property | Type | Notes |
|---|---|---|
| `ItemsSource` | `IEnumerable` | Bound collection |
| `AutoGenerateColumns` | `bool` | False for manual columns |
| `CanUserSortColumns` | `bool` | Click-to-sort |
| `CanUserResizeColumns` | `bool` | Drag column edges |
| `CanUserReorderColumns` | `bool` | Drag column headers |
| `GridLinesVisibility` | `DataGridGridLinesVisibility` | `All`, `Horizontal`, `Vertical`, `None` |
| `FrozenColumnCount` | `int` | Columns that don't scroll |
| `RowBackground` | `IBrush` | Row fill |
| `AlternatingRowBackground` | `IBrush` | Alternating fill |
| `SelectedItem` | `object` | TwoWay |
| `SelectionMode` | `DataGridSelectionMode` | `Single`, `Extended` |

**Column types:**

| Type | Use for |
|---|---|
| `DataGridTextColumn` | String/primitive display |
| `DataGridCheckBoxColumn` | Boolean values |
| `DataGridTemplateColumn` | Custom cell content |

```xml

    
        
        
        
        
        
            
                
                    
                
            
        
    

```

> **Note:** DataGrid column `Binding` always uses reflection bindings (`{Binding ...}`), even when the page uses compiled bindings. `x:DataType` on `DataTemplate` inside columns is not supported.

---

## TreeView

| Property | Type | Notes |
|---|---|---|
| `ItemsSource` | `IEnumerable` | Root nodes |
| `ItemTemplate` | `TreeDataTemplate` | **Must** use `TreeDataTemplate` for hierarchy |
| `SelectedItem` | `object` | TwoWay |
| `AutoScrollToSelectedItem` | `bool` | Scrolls to selection |

`TreeDataTemplate` has an `ItemsSource` property that points to each node's children collection.

```xml

    
        
            
                
                
            
        
    

```

```csharp
public class TreeNodeVm
{
    public string Name { get; set; } = "";
    public string IconData { get; set; } = "";
    public ObservableCollection Children { get; } = new();
}
```

---

## Carousel

Displays one item at a time with animated transitions. Useful for image galleries, onboarding flows, or wizard steps.

| Property | Type | Notes |
|---|---|---|
| `ItemsSource` | `IEnumerable` | Bound collection |
| `SelectedIndex` | `int` | TwoWay |
| `SelectedItem` | `object` | TwoWay |
| `PageTransition` | `IPageTransition` | Animation between items |
| `IsVirtualized` | `bool` | Only renders visible item |

**Built-in transitions:** `PageSlide`, `CrossFade`, `CompositePageTransition`

```xml

    
        
    
    
        
            
                
            
        
    

    
    
    

```

---

## Common Mistakes

| Mistake | Fix |
|---|---|
| `DataGrid` not styled / missing | Add `Avalonia.Controls.DataGrid` NuGet and include `Fluent.xaml` style |
| `DataGrid` column `Binding` with `x:DataType` | Not supported in columns — use reflection `{Binding}`, not compiled |
| `TreeView` using plain `DataTemplate` | Use `TreeDataTemplate` with `ItemsSource` pointing to children; plain `DataTemplate` won't expand |
| `ListBox.SelectedItems` always empty | Requires `SelectionMode="Multiple"` (or `Toggle`) to populate |
| `ItemsControl` inside `ScrollViewer` inside `StackPanel` | `StackPanel` gives infinite height — items render but `ScrollViewer` won't scroll. Use `Grid` row with `*` height |
| `Carousel` flickering on fast navigation | Set `IsVirtualized="True"` and use `CrossFade` instead of `PageSlide` for smoother transitions |
| `TextBlock` not trimming | `TextTrimming` requires a `MaxWidth` constraint or a parent that constrains width |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [linuxdevel](https://github.com/linuxdevel)
- **Source:** [linuxdevel/Avalonia-skills](https://github.com/linuxdevel/Avalonia-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-linuxdevel-avalonia-skills-data-display
- Seller: https://agentstack.voostack.com/s/linuxdevel
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.