CODEWITHSUNDEEP
c#wpfcombobox
Encore
Encore

Reputation: 91

C# WPF ComboBox Mouse over color

When the mouse hover over my ComboBox, I get an awful blue/lightblue pair of color for the backgroung of my ComboBox. I tried the solutions here :ComboBox Mouse over color, WPF Combobox Mouse Over, How to style ComboBox Background on Mouse Hover? or WPF combobox default hover color on togglebutton, but it doesn't change anything, I still get the default colors while hovering.

Any suggestions ?

Thank you all in advance, Demasiado.

Here is the XAML code :

<Window x:Class="Homepage.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:sys="clr-namespace:System;assembly=mscorlib" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    <Window.Resources>
        <Storyboard x:Key="TileZoomIn">
            <ThicknessAnimation Storyboard.TargetProperty="Margin" From="10" To="1" Duration="0:0:0.1"/>
        </Storyboard>
        <Storyboard x:Key="TileZoomOut">
            <ThicknessAnimation Storyboard.TargetProperty="Margin" From="1" To="10" Duration="0:0:0.1"/>
        </Storyboard>
        <DropShadowEffect x:Key="DropShadowEffect" BlurRadius="20" Opacity="1" ShadowDepth="0" Color="White"/>
    </Window.Resources>

    <Grid ShowGridLines="True">
        <ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="40,-180,0,256" Background="Transparent" BorderBrush="Transparent" Foreground="White" BorderThickness="0">
            <ComboBox Margin="25" Width="130" Height="50">
                <ComboBox.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
                </ComboBox.Resources>
            </ComboBox>
        </ComboBox>
    </Grid>
</Window>

Upvotes: 7

Views: 6143

Answers (4)

Med.Amine.Touil
Med.Amine.Touil

Reputation: 1235

Redefine your comboxItem Template in your window resources

<Style TargetType="{x:Type ComboBoxItem}"
               BasedOn="{StaticResource {x:Type ComboBoxItem}}">
            <Setter Property="Template">
                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Margin="{TemplateBinding Margin}"
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter Margin="{TemplateBinding Margin}"
                                                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" 
                            Value="Red"/>
                </Trigger>
            </Style.Triggers>

        </Style>

Upvotes: 0

eran otzap
eran otzap

Reputation: 12533

Your problem arises from ButtonChrome in the ToggleButton's template. Remove it from the ToggleButton.

   ComboBox -> ToggleButton -> ButtonChrome

Steps :

1) Open Expression Blend and edit a copy of ComboBox's Style , This will give you the Style of the ComboBox + it's Template and all it's TemplateParts , Among them is the problematic ToggleButton.

2) Locate the ToggleButton and it's Style called "ComboBoxReadonlyToggleButton" .

3) In "ComboBoxReadonlyToggleButton" replace the Themes:ButtonChrome with a Border (like shown in the 3'rd block of code below.)

The ComboBox's default template (Simplified !): 

<ControlTemplate TargetType="{x:Type ComboBox}">
    <Grid x:Name="MainGrid" SnapsToDevicePixels="true">                                 
        <Popup x:Name="PART_Popup">
            .....
        </Popup>
        <ToggleButton  Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
        <ContentPresenter ... />
    </Grid>                     
</ControlTemplate>

The toggle button Style + Template (Simplified !).

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">     
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Themes:ButtonChrome x:Name="Chrome" ....>
                    <Grid>
                        <Path x:Name="Arrow" />
                    </Grid>
                </Themes:ButtonChrome>  
             </ControlTemplate>             
        </Setter.Value>
    </Setter>
</Style>

What you need to do is to override the default ComboBox template and edit the toggle button's style by replacing ButtonChrome with a Border :

 <Setter Property="Template">
     <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
              <Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                <Grid>
                    <Path x:Name="Arrow" />
                </Grid>
            </Border>               
        </ControlTemplate>
    </Setter.Value>
</Setter>

Upvotes: 3

Sagiv b.g
Sagiv b.g

Reputation: 31024

you can override SystemColors.HighlightBrushKey within the ComboBox scope:

<ComboBox.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>

sample

the entire XAML can be something like this:

<Grid>
    <ComboBox Margin="25" Width="130" Height="50">
        <ComboBox.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
        </ComboBox.Resources>
        <ComboBox.ItemsSource>
            <Binding Path="Collection" Source="{StaticResource viewmodel}"/>
        </ComboBox.ItemsSource>
    </ComboBox>
</Grid>

A followup to your comment:

ignore the viewmodel and my ItemSource you should use your own, this was just for the demonstration.

as for your comment about

I could not get anything to work

i would suggest that you will create a new project and test only this XAML (with your ItemSource of course) and see if you can get the result you want. when you will get that, you can move to your real project and see where the styles changes and where is the problem exists.

EDIT#2:

In order to change the color of the ToggleButton i think is best to override the entire ComboBox Style.

enter image description here

i used the 

 <ControlTemplate x:Key="ComboBoxToggleButton"
                 TargetType="{x:Type ToggleButton}">

The rest of the code and style taken from here.

i would recommend you to read this as well.

Upvotes: 2

Encore
Encore

Reputation: 91

There it no item in my ComboBox in the test project. I just hover the mouse over it and the whole control is blue. Here is the .cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Here is the xaml :

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="42,38,0,184" Background="Red" BorderBrush="Transparent" Foreground="White" BorderThickness="0">
            <ComboBox Width="130" Height="50">
                <ComboBox.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
                </ComboBox.Resources>
            </ComboBox>
        </ComboBox>

    </Grid>
</Window>

Upvotes: 0

Related Questions