Struggling to change the combobox mouseover effect on a dark background

Marcello Dichiera 0 Reputation points
2024-12-04T10:27:55.9466667+00:00

Hi, hope someone can help, I tried to follow some answers here but I am not able to change the ugly default mouse over effect on my combobox. I want to keep the same style as before hovering with the mouse. I am really struggling with it. Below my current code. Thanks a lot!!

<Page.Resources>
    <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <Border x:Name="Border" Background="#0F141E" BorderBrush="Gray" BorderThickness="1" CornerRadius="10">
                            <Grid>
                                <ToggleButton x:Name="ToggleButton" Background="Transparent" BorderThickness="0" Grid.Column="2" ClickMode="Press" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                    <Path x:Name="Arrow" Data="M 0 0 L 4 4 L 8 0 Z" Fill="White" HorizontalAlignment="Right" Margin="160,0,0,0" VerticalAlignment="Center"/>
                                </ToggleButton>
                                <ContentPresenter x:Name="ContentSite" Content="{TemplateBinding SelectionBoxItem}" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="3,3,23,3" VerticalAlignment="Center">
                                    <ContentPresenter.Resources>
                                        <Style TargetType="{x:Type TextBlock}">
                                            <Setter Property="Foreground" Value="White"/>
                                        </Style>
                                    </ContentPresenter.Resources>
                                </ContentPresenter>
                                <TextBox x:Name="PART_EditableTextBox" Background="Transparent" Focusable="True" HorizontalAlignment="Left" IsReadOnly="{TemplateBinding IsReadOnly}" Margin="3,3,23,3" Style="{x:Null}" VerticalAlignment="Center" Visibility="Hidden"/>
                            </Grid>
                        </Border>
                        <Popup x:Name="Popup" AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" PopupAnimation="Slide">
                            <Grid x:Name="DropDown" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True">
                                <Border x:Name="DropDownBorder" Background="LightGray" BorderBrush="Gray" BorderThickness="1" CornerRadius="10"/>
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel KeyboardNavigation.DirectionalNavigation="Contained" IsItemsHost="True"/>
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="False">
                            <Setter Property="MinHeight" TargetName="DropDownBorder" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="Gray"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                        </Trigger>
                        <Trigger Property="AllowsTransparency" SourceName="Popup" Value="True">
                            <Setter Property="CornerRadius" TargetName="DropDownBorder" Value="10"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="#0F141E"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="ComboBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Border x:Name="Border" Background="Transparent">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Transparent"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
824 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.