Avalonia UI, how to get element selectors (f.e. combobox)

Question

I am trying to get into Avalonia UI, coming from WinForms and Web dev. I checked out the API but I didn't find the selectors for the combobox.

I was searching for a while when I found a sample containing this: Colors defined in:

<Style xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:system="clr-namespace:System;assembly=System.Runtime">
    
    <Design.PreviewWith>
    </Design.PreviewWith>
    
    <!-- Add Styles Here -->
    <Style.Resources>
        <!-- Colors -->
        <Color x:Key="MyColor">#1976d2</Color>
        <Color x:Key="MyGrayColor">#6586a7</Color>
        ...
    </Style.Resources>
</Style>

Style defined in:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <Panel Height="600" Width="500">
            <TextBlock Classes="h1">I'm a Heading!</TextBlock>
            <ComboBox SelectedIndex="0" Margin="5,44,5,5" Width="100"
                      HorizontalAlignment="Left" VerticalAlignment="Top">
                <ComboBoxItem>Text</ComboBoxItem>
                <ComboBoxItem>lorem ipsum</ComboBoxItem>
                <ComboBoxItem>Testing</ComboBoxItem>
                <ComboBoxItem>Foo</ComboBoxItem>
                <ComboBoxItem>Bar</ComboBoxItem>
            </ComboBox>
        </Panel>
    </Design.PreviewWith>
    
    <!-- Add Styles Here -->
    <Style Selector="TextBlock.h1">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>
    
    <Style Selector="ComboBox">
        <Setter Property="Foreground" Value="{DynamicResource WhiteColor}"/>
        <Setter Property="Background" Value="{DynamicResource MyColor}"/>
    </Style>
    
    <Style Selector="ComboBox /template/ Path#DropDownGlyph">
        <Setter Property="Fill" Value="{DynamicResource MyGrayColor}" />
    </Style>
    
    <Style Selector="ComboBox:pointerover /template/ Path#DropDownGlyph">
        <Setter Property="Fill" Value="{DynamicResource WhiteColor}" />
    </Style>
    
    <Style Selector="ComboBox:pointerover">
        <Setter Property="Foreground" Value="{DynamicResource WhiteColor}"/>
    </Style>
    
    <Style Selector="ComboBox:pointerover /template/ Border#Background">
        <Setter Property="Background" Value="{DynamicResource MyGrayColor}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource MyGrayColor}" />
    </Style>
    
    <Style Selector="ComboBox /template/ Border#PopupBorder">
        <Setter Property="Background" Value="{DynamicResource WhiteColor}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource WhiteColor}"/>
    </Style>
    
    <Style Selector="ComboBoxItem /template/ ContentPresenter">
        <Setter Property="Background" Value="{DynamicResource MyGrayColor}"/>
    </Style>
    
    <Style Selector="ComboBoxItem">
        <Setter Property="Foreground" Value="{DynamicResource WhiteColor}"/>
        <Setter Property="Background" Value="{DynamicResource MyColor}"/>
    </Style>
</Styles>

I spend several hours searching how to set the selected item color in the combobox dropdown. But it seems I didn't hit the right keywords.

Someone recommended looking for the tags in the Avalonia github, but it seems a little strange to check out the project code.

Answer 1

ComboBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter should be the selector you need.