We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to customize ComboBoxAdv MouseOver Highlight

How can I disable or change this blue highlighting when I hover over the ComboBox and the ComboBoxItems


                                  BorderThickness="0"
Grid.Row="1"
Grid.Column="2"
Margin="15,10,0,0"
Height="35"
Width="150"
FontFamily="{StaticResource OpenSans}"
Background="{DynamicResource Control}"
Foreground="{DynamicResource Text}"
FontWeight="SemiBold"
FontSize="20"
Padding="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
DropDownClosed="ThemeComboBox_DropDownClosed">


BorderThickness="2"
BorderBrush="{DynamicResource Text}"
Foreground="{DynamicResource Text}"
Background="{DynamicResource Control}"/>
BorderThickness="2,0,2,0"
BorderBrush="{DynamicResource Text}"
Foreground="{DynamicResource Text}"
Background="{DynamicResource Control}"/>
BorderThickness="2,2,2,2"
BorderBrush="{DynamicResource Text}"
Foreground="{DynamicResource Text}"
Background="{DynamicResource Control}"/>
BorderThickness="2,0,2,0"
BorderBrush="{DynamicResource Text}"
Foreground="{DynamicResource Text}"
Background="{DynamicResource Control}"/>
BorderThickness="2"
BorderBrush="{DynamicResource Text}"
Foreground="{DynamicResource Text}"
Background="{DynamicResource Control}"/>


7 Replies 1 reply marked as answer

GT Gokul Thanudhas Syncfusion Team October 24, 2022 03:03 PM UTC

Hi Leon,


We are validating your reported query. We will validate and update you in two business days. We appreciate your patience until then.


Regards,

Gokul T.



GT Gokul Thanudhas Syncfusion Team October 28, 2022 07:10 AM UTC

Hi Leon,


You can able to change or disable the background of the ComboBoxAdv while mouseover by overriding its Control template. We have created a sample based on your requirement. Please refer to the sample for your reference.


Regards,

Gokul T.



Attachment: ComboBoxAdv_d458b410.zip


LE Leon replied to Gokul Thanudhas October 28, 2022 07:30 PM UTC

I implemented the code and changed it a bit so that its good for me. It works perfectly except for one little thing. When I keep the ComboBoxAdv pressed after it closed there is still this blue selected color as you see on the image.





Screenshot_20221028_092847.png


LE Leon October 28, 2022 07:31 PM UTC

<Style TargetType="{x:Type sync:ComboBoxItemAdv}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxItemFocusVisual}" />
                <Setter Property="Padding" Value="3,0,3,0" />
                <Setter Property="BorderThickness" Value="0,0,0,1" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type sync:ComboBoxItemAdv}">
                            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <CheckBox Visibility="{Binding Path=AllowMultiSelect, Converter={StaticResource VisiblityConverter}, RelativeSource={RelativeSource AncestorType={x:Type sync:ComboBoxAdv}}}" IsHitTestVisible="False" Margin="1" x:Name="PART_CheckBox" />
                                    <ContentPresenter Margin="1" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="FlowDirection" Value="RightToLeft">
                                    <Setter Property="FlowDirection" TargetName="PART_CheckBox" Value="LeftToRight"/>
                                </Trigger>
                                <Trigger Property="sync:SkinStorage.EnableTouch" Value="true">
                                    <Setter Property="Padding" Value="12,9,10,9" />
                                    <Setter Property="FontSize" Value="18" />
                                    <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" />
                                </Trigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding MultiSelect,RelativeSource={RelativeSource Self}}" Value="True" />
                                        <Condition Binding="{Binding Path=(sync:SkinStorage.EnableTouch), RelativeSource={RelativeSource Self}}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Padding" Value="12,6,10,6" />
                                    <Setter Property="FontSize" Value="18" />
                                    <Setter Property="CornerRadius" TargetName="Bd" Value="0" />
                                    <Setter Property="Margin" TargetName="Bd" Value="0" />
                                    <Setter Property="BorderThickness" Value="0,0,0,1" />
                                    <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" />
                                </MultiDataTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="true" />
                                        <Condition Property="sync:SkinStorage.EnableTouch" Value="true" />
                                    </MultiTrigger.Conditions>
                                </MultiTrigger>
                                <Trigger Property="IsHighlighted" Value="true">
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource Button}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </Trigger>


                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsKeyboardFocusWithin" Value="true" />
                                        <Condition Property="sync:SkinStorage.EnableTouch" Value="false" />
                                    </MultiTrigger.Conditions>


                                </MultiTrigger>


                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsFocused" Value="true" />
                                        <Condition Property="sync:SkinStorage.EnableTouch" Value="true" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" TargetName="Bd" Value="transparent" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </MultiTrigger>


                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsPressed" Value="true" />
                                        <Condition Property="sync:SkinStorage.EnableTouch" Value="false" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource Button}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </MultiTrigger>


                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource Self}}" Value="true" />
                                        <Condition Binding="{Binding Path=IsKeyboardFocusWithin,RelativeSource={RelativeSource Self}}" Value="false" />
                                        <Condition Binding="{Binding Path=IsHighlighted,RelativeSource={RelativeSource Self}}" Value="false" />
                                        <Condition Binding="{Binding MultiSelect,RelativeSource={RelativeSource Self}}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveCaptionTextBrushKey}}" />
                                </MultiDataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource Self}}" Value="true" />
                                        <Condition Binding="{Binding Path=IsKeyboardFocusWithin,RelativeSource={RelativeSource Self}}" Value="true" />
                                        <Condition Binding="{Binding Path=IsHighlighted,RelativeSource={RelativeSource Self}}" Value="false" />
                                        <Condition Binding="{Binding MultiSelect,RelativeSource={RelativeSource Self}}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveCaptionTextBrushKey}}" />
                                </MultiDataTrigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsLoaded, RelativeSource={RelativeSource Self}}" Value="True">
                        <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                        <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="ComboBoxReadonlyToggleButton1" TargetType="{x:Type ToggleButton}">


                <Setter Property="OverridesDefaultStyle" Value="true" />
                <Setter Property="IsTabStop" Value="false" />
                <Setter Property="Focusable" Value="false" />
                <Setter Property="ClickMode" Value="Press" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true">
                                <Grid x:Name="dropdownbutton" HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                                    <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center" />
                                </Grid>
                            </Microsoft_Windows_Themes:ButtonChrome>
                            <ControlTemplate.Triggers>
                                <Trigger Property="sync:SkinStorage.EnableTouch" Value="true">
                                    <Setter Property="Data" Value="M 0 0 L 7 7 L 14 0 Z" TargetName="Arrow" />
                                    <Setter Property="RenderMouseOver" TargetName="Chrome" Value="false" />
                                    <Setter Property="Margin" TargetName="dropdownbutton" Value="0,0,10,0" />
                                    <Setter Property="Effect" TargetName="Chrome">
                                        <Setter.Value>
                                            <DropShadowEffect Direction="315" ShadowDepth="2" Opacity="0.3" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="0.8"/>
                                </Trigger>
                                <Trigger Property="IsChecked" Value="true">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="0.8"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


            <Style TargetType="{x:Type sync:ComboBoxAdv}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}" />
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
                <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}" />
                <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
                <Setter Property="Padding" Value="4,3" />
                <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
                <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type sync:ComboBoxAdv}">
                            <Grid>
                                <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />
                                    </Grid.ColumnDefinitions>
                                    <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" StaysOpen="False" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                        <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="#71000000" Margin="0,0,5,5" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                                            <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                                                <Grid>
                                                    <Grid x:Name="Item_Presenter" Visibility="{TemplateBinding DropDownContentTemplate, Converter={StaticResource dropDownTemplateConvertor}, ConverterParameter='Item_Presenter'}">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="*" />
                                                            <RowDefinition Height="Auto" />
                                                        </Grid.RowDefinitions>
                                                        <ScrollViewer x:Name="DropDownScrollViewer">
                                                            <Grid>
                                                                <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                                    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}" />
                                                                </Canvas>
                                                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                                                <TextBlock x:Name="No_Records"
                                                               Text="{sync:SharedLocalizationResourceExtension ResourceName=NoRecords}"
                                                               Focusable="False"
                                                               Padding="3"
                                                               Background="{Binding Background, ElementName=DropDownBorder}"
                                                               Visibility="Collapsed"/>
                                                            </Grid>
                                                        </ScrollViewer>
                                                    </Grid>
                                                    <ContentControl x:Name="Content_Control" Visibility="{TemplateBinding DropDownContentTemplate, Converter={StaticResource dropDownTemplateConvertor}, ConverterParameter='Content_Control'}" ContentTemplate="{TemplateBinding DropDownContentTemplate}" ></ContentControl>
                                                </Grid>
                                            </Border>
                                        </Microsoft_Windows_Themes:SystemDropShadowChrome>
                                    </Popup>
                                    <ToggleButton x:Name="PART_ToggleButton" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton1}" />
                                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding SelectionBoxTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    <TextBlock Text="{TemplateBinding DefaultText}" x:Name="PART_DefaultText" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5" />
                                    <TextBox x:Name="PART_Editable" Visibility="Collapsed" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" BorderThickness="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <TextBox x:Name="PART_IsEditDefaultText" Text="{TemplateBinding DefaultText}" Visibility="Collapsed" Opacity="0.5" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsGrouping" Value="true">
                                    <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                                </Trigger>
                                <Trigger Property="IsEditable" Value="True">
                                    <Setter TargetName="PART_Editable" Property="Visibility" Value="Visible" />
                                    <Setter TargetName="PART_DefaultText" Property="Visibility" Value="Collapsed" />
                                    <Setter TargetName="PART_IsEditDefaultText" Property="Visibility" Value="Visible" />
                                    <Setter TargetName="ContentPresenter" Property="Visibility" Value="Collapsed" />
                                </Trigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=HasItems, RelativeSource={RelativeSource Self}}" Value="false"></Condition>
                                        <Condition Binding="{Binding Path=AutoCompleteMode,RelativeSource={RelativeSource Self}}" Value="Suggest"></Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Height" TargetName="DropDownBorder" Value="{Binding Height, ElementName=No_Records}" />
                                </MultiDataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=HasItems,RelativeSource={RelativeSource Self}}" Value="false"></Condition>
                                        <Condition Binding="{Binding Path=AutoCompleteMode,RelativeSource={RelativeSource Self}}" Value="None"></Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Height" TargetName="DropDownBorder" Value="95" />
                                </MultiDataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel VirtualizingStackPanel.VirtualizationMode="Recycling"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="sync:SkinStorage.EnableTouch" Value="true">
                        <Setter Property="FontSize" Value="18" />
                        <Setter Property="Padding" Value="16,10,23,10" />
                    </Trigger>
                    <Trigger Property="IsEditable" Value="True">
                        <Setter Property="AllowMultiSelect" Value="False" />
                    </Trigger>
                    <Trigger Property="AllowMultiSelect" Value="True">
                        <Setter Property="Template" Value="{StaticResource MultiSelectTemplate}" />
                    </Trigger>
                </Style.Triggers>
            </Style>


GT Gokul Thanudhas Syncfusion Team November 1, 2022 11:56 AM UTC

You can disable the blue background while pressing the ComboBoxAdv by removing RenderPressed property for the Buttonchrome in toggle button




Marked as answer

LE Leon replied to Gokul Thanudhas November 1, 2022 09:35 PM UTC

Works perfectly, thank you very much :)



GT Gokul Thanudhas Syncfusion Team November 2, 2022 01:58 PM UTC

We are glad to know that your issue has been fixed. Please let us know if you need any other assistance. We are happy to assist you


Loader.
Live Chat Icon For mobile
Up arrow icon