Question

I would like to customize the default – “OnMouseOver”-“color” for the Combobox and also the “Background” color for the list that drops down in the combobox ..can we customize the above mentioned properties of combobox..If yes, please help me..
the following is my Xaml code for the combobox :

<ComboBox Name="CmbBox1" BorderBrush="Black" Margin="1,1,1,1"
                      ItemsSource="{Binding}">
                <ComboBox.Style>
                    <Style TargetType="{x:Type ComboBox}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Red"/>
                        </Trigger>
                        </Style.Triggers>
                    </Style>
                </ComboBox.Style>
                    <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Background="{Binding Background}" Foreground="Black" FontSize="10"  TextAlignment="Left" 
                                               FontWeight="Black" Text="{Binding}"></TextBlock>

                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>

Answer 1

Here is one way to do what I think you’re after. I made a few changes to your ComboBox.

Added comments in the Xaml code so it should be pretty self explanatory

Edit. This didn’t work under Windows 7 because of the ButtonChrome that is deep within the ComboBox Template. You could either re-template the whole thing, or use this workaround which uses some code behind.

First, add a reference to PresentationFramework.Aero
Then subscribe to the Loaded event of the ComboBox and disable the ButtonChrome and bind the MainGrid background in the event handler like this

private void CmbBox1_Loaded(object sender, RoutedEventArgs e)
{
    ComboBox comboBox = sender as ComboBox;
    ToggleButton toggleButton = GetVisualChild<ToggleButton>(comboBox);
    ButtonChrome chrome = toggleButton.Template.FindName("Chrome", toggleButton) as ButtonChrome;
    chrome.RenderMouseOver = false;
    chrome.RenderPressed = false;
    chrome.RenderDefaulted = false;
    chrome.Background = Brushes.Transparent;
    Grid MainGrid = comboBox.Template.FindName("MainGrid", comboBox) as Grid;
    Binding backgroundBinding = new Binding("Background");
    backgroundBinding.Source = comboBox;
    MainGrid.SetBinding(Grid.BackgroundProperty, backgroundBinding);
}

private static T GetVisualChild<T>(DependencyObject parent) where T : Visual
{
    T child = default(T);
    int numVisuals = VisualTreeHelper.GetChildrenCount(parent);
    for (int i = 0; i < numVisuals; i++)
    {
        Visual v = (Visual)VisualTreeHelper.GetChild(parent, i);
        child = v as T;
        if (child == null)
        {
            child = GetVisualChild<T>(v);
        }
        if (child != null)
        {
            break;
        }
    }
    return child;
}

Xaml

<ComboBox Name="CmbBox1" BorderBrush="Black" Margin="1,1,1,1"
          ItemsSource="{Binding Source={x:Static Fonts.SystemFontFamilies}}"
          Loaded="CmbBox1_Loaded"
          Width="150">
    <ComboBox.Resources>
        <SolidColorBrush x:Key="MouseOverBrush"
                         Color="Red"/>
        <SolidColorBrush x:Key="DropDownListBrush"
                         Color="Green"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                         Color="Transparent"/>
    </ComboBox.Resources>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ComboBox}},
                                                Path=IsDropDownOpen}"
                             Value="True">
                    <Setter Property="Background" Value="{StaticResource DropDownListBrush}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
    <ComboBox.Style>
        <Style TargetType="{x:Type ComboBox}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource MouseOverBrush}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ComboBox.Style>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Border x:Name="border" SnapsToDevicePixels="True">
                <TextBlock Foreground="Black" FontSize="10"  TextAlignment="Left" 
                           FontWeight="Black" Text="{Binding}"></TextBlock>
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ComboBoxItem}}, Path=IsMouseOver}" Value="True">
                    <Setter TargetName="border" Property="Background" Value="{StaticResource MouseOverBrush}"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>