Avalonia Controls Data Display

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 |

    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).

> 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 |

---

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 |

---

DataGrid

Requires separate NuGet package: Avalonia.Controls.DataGrid

Add to App.axaml styles:

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 |

> 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.

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

---

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
• Source: linuxdevel/Avalonia-skills
• License: MIT

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