In a WPF application, add a custom style ComboBox . The problem is that the standard mouse control is highlighted with blue itself and selects Items in the same way. I tried to use styles, but boxing still works as a standard when hovering. Where is the mistake?

  <ComboBox x:Name="subjct_cmb" Grid.Row="1" Height="20" Width="120" Foreground="{StaticResource GrayEA}" FontFamily="{StaticResource MainFont}" Background="#FF262626" > <ComboBox.ItemContainerStyle> <Style TargetType="ComboBoxItem"> <Style.Triggers> <Trigger Property="IsFocused" Value="true"> <Setter Property="Background" Value="#FF2E2E2E"/> </Trigger> </Style.Triggers> </Style> </ComboBox.ItemContainerStyle> <ComboBoxItem Content="About Programm" Background="{StaticResource Gray36}" Height="16"/> <ComboBoxItem Content="Report a Bug" Background="{StaticResource Gray36}" Height="16"/> <ComboBoxItem Content="Feedback" Background="{StaticResource Gray36}" Height="16"/> <ComboBoxItem Content="Other" Background="{StaticResource Gray36}" Height="16"/> </ComboBox>

Result:

enter image description here

  • @AresGod is the same blue color - Sergey

1 answer 1

You can always change the standard control template. To do this, right-click on the control in the designer, select EditTempate > Edit A Copy .... In your case, first open the box ( ExpandCombobox ), right-click on an item in the drop-down list, select EditTempate > Edit A Copy .... A sheet will appear with a pattern where everything is there. You need the last trigger in it (at least I have it last). It looks like this:

 <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="False" /> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="IsKeyboardFocused" Value="True" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="#5426A0DA" /> <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA" /> </MultiTrigger>

You need to replace the color in Property="Background" ( #5426A0DA ) with yours. Now the template is ready. Use it like this:

 <Style TargetType="ComboBoxItem"> <Setter Property="Template" Value="{StaticResource ComboBoxItemControlTemplate1}"></Setter> </Style>

Complete code:

 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="WpfApp3.MainWindow" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ControlTemplate x:Key="ComboBoxItemControlTemplate1" TargetType="{x:Type ComboBoxItem}"> <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"> <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="False" /> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="IsKeyboardFocused" Value="False" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="#1F26A0DA" /> <Setter Property="BorderBrush" TargetName="Bd" Value="#A826A0DA" /> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="True" /> <Condition Property="IsMouseOver" Value="False" /> <Condition Property="IsKeyboardFocused" Value="True" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="#3D26A0DA" /> <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA" /> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="True" /> <Condition Property="IsMouseOver" Value="True" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="#2E0080FF" /> <Setter Property="BorderBrush" TargetName="Bd" Value="#99006CD9" /> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="True" /> <Condition Property="IsMouseOver" Value="False" /> <Condition Property="IsKeyboardFocused" Value="False" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="#3DDADADA" /> <Setter Property="BorderBrush" TargetName="Bd" Value="#FFDADADA" /> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="False" /> <Condition Property="IsMouseOver" Value="False" /> <Condition Property="IsKeyboardFocused" Value="True" /> </MultiTrigger.Conditions> <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA" /> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="False" /> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="IsKeyboardFocused" Value="True" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="#FF2E2E2E" /> <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA" /> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> <Style TargetType="ComboBoxItem"> <Setter Property="Template" Value="{StaticResource ComboBoxItemControlTemplate1}"></Setter> </Style> </Window.Resources> <Grid> <ComboBox Height="20" Width="120" Background="#FF262626" IsDropDownOpen="True"> <ComboBoxItem Content="About Programm" Height="16" /> <ComboBoxItem Content="Report a Bug" Height="16" /> <ComboBoxItem Content="Feedback" Height="16" /> <ComboBoxItem Content="Other" Height="16" /> </ComboBox> </Grid> </Window>
  • And on the ComboBox part, when hovering, which property is responsible? Not ComboBoxValue and boxing itself? - Sergey
  • @ Sergey for this, generate a template for the combo box itself (the sheet will be more than 4 times), you need to search there. - RusArt
  • Template or Style? - Sergey
  • @ Sergey will create a new ControlTemplate for the combo box - RusArt
  • All that is created is <ControlTemplate x:Key="ComboBoxControlTemplate" TargetType="{x:Type ComboBox}"> <Grid/> </ControlTemplate> - Sergey