How can I override the default pointerover style for a button?

[Ha-rlan]

I can't find the pointerover pseudo-class for the button selector, and I have a situation where I need to change the font color when a ListBoxItem is selected. I wrote the style like this

        <Style Selector="ListBox:not(.Base) ListBoxItem:selected /template/ ContentPresenter">
            <Setter Property="Background" Value="{StaticResource MainColor}"/>
            <Setter Property="Foreground" Value="{StaticResource FontColor}"/>
            <Style Selector="^ Button">
                <Setter Property="Foreground" Value="{StaticResource FontColor}"/>
            </Style>
        </Style>

but it's useless

[stevemonaco]

You always need to read the relevant ControlTheme for whichever control you're trying to customize. For Button in Fluent theme, it is located here: https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/Button.xaml

If you look through it, you'll see properties are applied to the internal ContentPresenter and not the Button itself. So you probably want (untested):

<Style Selector="ListBox:not(.Base) ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{StaticResource MainColor}"/>
	<Setter Property="Foreground" Value="{StaticResource FontColor}"/>
	<Style Selector="^ Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
		<Setter Property="Foreground" Value="{StaticResource FontColor}"/>
	</Style>
</Style>

There may be some simplifications, but it's not entirely clear how much customization you want.

[Ha-rlan]

"Thank you for your reply. I have two goals:
1.Change the button's background, which I successfully achieved following your advice.
2.Change the button's font color when the mouse hovers over it, but I haven’t been able to accomplish this.
and following is my code structure:

                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Panel>
                                            <TextBlock Text="{Binding DisplayText}" HorizontalAlignment="Left"/>
                                            <Button Content="Preview" Command="{Binding $parent[ListBox].((vm:ProtocolSettingViewModel)DataContext).GeneratePreviewResponseCommand}"
                                                    CommandParameter="{Binding .}" HorizontalAlignment="Right" Classes="Minimal"/>
                                        </Panel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>

i have tried like this:

        <Style Selector="ListBox:not(.Base) ListBoxItem:selected /template/ ContentPresenter">
            <Setter Property="Background" Value="{StaticResource MainColor}"/>
            <Setter Property="Foreground" Value="{StaticResource FontColor}"/>
            <Style Selector="^ Button /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Foreground" Value="#FFFFFF"/>
            </Style>
        </Style>

but nothing happened

[stevemonaco]

I'm using Fluent theme for this example.

There's some issue with going through templated ContentPresenters twice or some rule I don't understand. I've tried the following and it doesn't work:

<Style Selector="ListBox:not(.Base) ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Foreground" Value="#0000FF" />
    <Setter Property="Background" Value="#00FF00" />
</Style>

What does work is separating them without nesting:

<Window.Resources>
    <Color x:Key="MainColor">#FF0000</Color>
    <Color x:Key="FontColor">#808000</Color>
</Window.Resources>
<Window.Styles>
    <Style Selector="ListBox:not(.Base) ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter">
        <Setter Property="Background" Value="{StaticResource MainColor}" />
        <Setter Property="Foreground" Value="{StaticResource FontColor}" />
    </Style>
    <Style Selector="ListBox:not(.Base) ListBoxItem:selected Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
        <Setter Property="Foreground" Value="#0000FF" />
        <Setter Property="Background" Value="#00FF00" />
    </Style>
</Window.Styles>

<Grid RowDefinitions="*, *">
    <ListBox Classes="Base">
        <ListBoxItem>
            <Button Content="Click Me" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Click Me" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Click Me" />
        </ListBoxItem>
    </ListBox>
    <ListBox Grid.Row="1">
        <ListBoxItem>
            <Button Content="Click Me" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Click Me" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Click Me" />
        </ListBoxItem>
    </ListBox>
</Grid>

[Ha-rlan]

Thank you, it works very well, but i can't understand why the first one didn't work

[stevemonaco]

I'm not entirely sure either. I would have expected my failed attempt to work, but there must be some implementation detail I'm not aware of. Might be /template/ not doing a descendant search out-of-template. So /template/ ContentPresenter Button /template/ may be expecting the Button to be inside of the first template, rather than a descendant of the ContentPresenter below in the visual tree.