Avalonia Tip: Binding to ListBoxItem.IsSelected from Inside a DataTemplate

[TomOSullivan]

🧠 Avalonia: Show a Button Only When a ListBoxItem Is Selected

Avalonia doesn’t support DataTriggers inside DataTemplates, which makes it less obvious how to change part of a list item’s UI based on selection state.

Here’s how to make a button appear only when a ListBoxItem is selected.

---

✅ The Setup

We’re binding to a simple string[] or ObservableCollection<string>. Each item has a label and a button. The button is only visible when its container is selected.

<ListBox Items="{Binding MyItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Spacing="8" Margin="4">
                <TextBlock Text="{Binding}" VerticalAlignment="Center" />
                
                <Button Content="Action"
                        VerticalAlignment="Center"
                        IsVisible="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

---

🧩 How It Works

• IsSelected is a property on the container (ListBoxItem), not the bound data.
• RelativeSource AncestorType=ListBoxItem walks up the visual tree to get it.
• This works in Avalonia 11+ — earlier versions may not support AncestorType.

---

👇 ViewModel for Context

public ObservableCollection<string> MyItems { get; } = new()
{
    "Item One", "Item Two", "Item Three"
};

---

🛠 Notes

• Works for TreeViewItem, TabItem, etc., too.
• If you want to animate or style based on selection, you’ll need a custom control or style selector.

---

Avalonia’s styling system is powerful, but sometimes under-documented. This is one of those tricks that’s worth locking in.