How to change Foreground color of a ComboBox on SelectionChanged in WPF?

MERUN KUMAR MAITY 621

Hi there, I have a WPF application where I use a ComboBox. But my problem is, the ComboBox foreground color that means the text color are flatucating when I change the selection of the ComboBox. But I need to remove the fluctuation and give it to the Foreground color #939393 (Grey).

Here is my Control template:

<ControlTemplate  
            x:Key="ComboBoxToggleButtonTemplate"  
            x:Name="toggleButton"  
            TargetType="ToggleButton">  
<Grid>  
<Grid.ColumnDefinitions>  
<ColumnDefinition />  
<ColumnDefinition Width="20" />  
</Grid.ColumnDefinitions>  
<Border  
                    Name="Border"  
                    Grid.ColumnSpan="2"  
                    Background="#1e1e1e"  
                    BorderBrush="#1e1e1e"  
                    BorderThickness="0,0,0,0"  
                    CornerRadius="0"></Border>  
<Border  
                    Name="ButtonBorder"  
                    Grid.Column="1"  
                    Margin="1,1,1,1"  
                    Background="#1e1e1e"  
                    BorderBrush="#1e1e1e"  
                    BorderThickness="0,0,0,0"  
                    CornerRadius="0, 0, 0, 0" />  
<Path  
                    x:Name="Arrow"  
                    Grid.Column="1"  
                    Width="8"  
                    Height="5"  
                    Margin="-5,0,0,0"  
                    HorizontalAlignment="Center"  
                    VerticalAlignment="Center"  
                    Fill="#969696"  
                    RenderOptions.EdgeMode="Aliased"  
                    SnapsToDevicePixels="True"  
                    Stretch="Fill"  
                    Stroke="#969696"  
                    StrokeThickness="0.3">  
<Path.Data>  
<PathGeometry Figures="M8.5,40.5L8.5,40.5 64,96 119.3,40.5 119.3,31.7 111,31.7 64,76.5 17,31.7 8.5,31.7z" FillRule="Nonzero" />  
</Path.Data>  
</Path>  
</Grid>  
<ControlTemplate.Triggers>  
<Trigger Property="UIElement.IsMouseOver" Value="True">  
<Setter TargetName="ButtonBorder" Property="Panel.Background" Value="#202020" />  
<Setter TargetName="Border" Property="Panel.Background" Value="#202020" />  
<Setter TargetName="Arrow" Property="Shape.Fill" Value="#ffffff" />  
<Setter TargetName="Arrow" Property="Shape.Stroke" Value="#ffffff" />  
<Setter TargetName="Arrow" Property="Shape.StrokeThickness" Value="0.3" />  
</Trigger>  
<Trigger Property="ToggleButton.IsPressed" Value="True">  
<Setter TargetName="ButtonBorder" Property="Panel.Background">  
<Setter.Value>  
<RadialGradientBrush GradientOrigin="0.496,1.052">  
<RadialGradientBrush.RelativeTransform>  
<TransformGroup>  
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5" />  
<TranslateTransform X="0.02" Y="0.3" />  
</TransformGroup>  
</RadialGradientBrush.RelativeTransform>  
<GradientStop Offset="1" Color="#181818" />  
<GradientStop Offset="0.3" Color="#181818" />  
</RadialGradientBrush>  
</Setter.Value>  
</Setter>  
<Setter TargetName="Border" Property="Panel.Background">  
<Setter.Value>  
<RadialGradientBrush GradientOrigin="0.496,1.052">  
<RadialGradientBrush.RelativeTransform>  
<TransformGroup>  
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5" />  
<TranslateTransform X="0.02" Y="0.3" />  
</TransformGroup>  
</RadialGradientBrush.RelativeTransform>  
<GradientStop Offset="1" Color="#181818" />  
<GradientStop Offset="0.3" Color="#181818" />  
</RadialGradientBrush>  
</Setter.Value>  
</Setter>  
<Setter TargetName="Arrow" Property="Shape.Fill" Value="#ffffff" />  
<Setter TargetName="Arrow" Property="Shape.Stroke" Value="#ffffff" />  
<Setter TargetName="Arrow" Property="Shape.StrokeThickness" Value="0.3" />  
</Trigger>  
<Trigger Property="ToggleButton.IsChecked" Value="True">  
<Setter TargetName="ButtonBorder" Property="Panel.Background">  
<Setter.Value>  
<RadialGradientBrush GradientOrigin="0.496,1.052">  
<RadialGradientBrush.RelativeTransform>  
<TransformGroup>  
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5" />  
<TranslateTransform X="0.02" Y="0.3" />  
</TransformGroup>  
</RadialGradientBrush.RelativeTransform>  
<GradientStop Offset="1" Color="#1e1e1e" />  
<GradientStop Offset="0.3" Color="#1e1e1e" />  
</RadialGradientBrush>  
</Setter.Value>  
</Setter>  
<Setter TargetName="Border" Property="Panel.Background">  
<Setter.Value>  
<RadialGradientBrush GradientOrigin="0.496,1.052">  
<RadialGradientBrush.RelativeTransform>  
<TransformGroup>  
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5" />  
<TranslateTransform X="0.02" Y="0.3" />  
</TransformGroup>  
</RadialGradientBrush.RelativeTransform>  
<GradientStop Offset="1" Color="#1e1e1e" />  
<GradientStop Offset="0.3" Color="#1e1e1e" />  
</RadialGradientBrush>  
</Setter.Value>  
</Setter>  
<Setter TargetName="Arrow" Property="Shape.Fill" Value="#969696" />  
<Setter TargetName="Arrow" Property="Shape.Stroke" Value="#969696" />  
<Setter TargetName="Arrow" Property="Shape.StrokeThickness" Value="0.3" />  
</Trigger>  
</ControlTemplate.Triggers>  
</ControlTemplate>  

    <Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}" x:Name="Shine">  
 <Setter Property="UIElement.SnapsToDevicePixels" Value="True" />  
 <!--<Setter Property="SnapsToDevicePixels" Value="True"/>-->  
 <Setter Property="UseLayoutRounding" Value="True" />  
 <Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" />  
 <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />  
 <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />  
 <Setter Property="ScrollViewer.CanContentScroll" Value="True" />  
 <Setter Property="TextElement.Foreground" Value="#939393" />  
 <Setter Property="FontFamily" Value="Segoe UI" />  
 <Setter Property="FontSize" Value="10" />  
 <Setter Property="TextOptions.TextFormattingMode" Value="Display" />  
 <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}" />  
 <Setter Property="Control.Template">  
 <Setter.Value>  
 <ControlTemplate TargetType="ComboBox">  
 <Grid>  
 <ToggleButton  
                                Name="ToggleButton"  
                                Grid.Column="2"  
                                Background="{TemplateBinding Background}"  
                                ClickMode="Release"  
                                Focusable="True"  
                                Foreground="{TemplateBinding Foreground}"  
                                IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"  
                                Template="{StaticResource ComboBoxToggleButtonTemplate}"/>  
 <ContentPresenter  
                                Name="ContentSite"  
                                Margin="11.3,3,23,3"  
                                HorizontalAlignment="Left"  
                                VerticalAlignment="Center"  
                                Content="{TemplateBinding ComboBox.SelectionBoxItem}"  
                                ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"  
                                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"  
                                IsHitTestVisible="False"                                 
                                >  

 <ContentPresenter.Resources>  
 <Style BasedOn="{StaticResource textBlockStyle}" TargetType="TextBlock">  
 </Style>  
 </ContentPresenter.Resources>  
 </ContentPresenter>  
 <TextBox  
                                Name="PART_EditableTextBox"  
                                Margin="3,3,23,3"  
                                HorizontalAlignment="Left"  
                                VerticalAlignment="Center"  
                                Background="Transparent"  
                                Focusable="True"  
                                IsReadOnly="{TemplateBinding IsReadOnly}"  
                                Visibility="Hidden">  
 <TextBox.Template>  
 <ControlTemplate TargetType="TextBox">  
 <Border Name="PART_ContentHost" Focusable="False" />  
 </ControlTemplate>  
 </TextBox.Template>  
 </TextBox>  
 <!--  Popup showing items  -->  
 <Popup  
                                Name="Popup"  
                                Width="252"  
                                AllowsTransparency="True"  
                                Focusable="False"  
                                IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"  
                                Placement="Bottom">  
 <Grid  
                                    Name="DropDown"  
                                    MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"  
                                    MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"  
                                    SnapsToDevicePixels="True">  
 <Border  
                                        Name="DropDownBorder"  
                                        Margin="0,1,0,0"  
                                        Background="#1e1e1e"  
                                        BorderBrush="#161616"  
                                        BorderThickness="1,1,1,1"  
                                        CornerRadius="0" />  
 <ScrollViewer Margin="1,4,1,3" SnapsToDevicePixels="True">  
 <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />  
 </ScrollViewer>  
 </Grid>  
 </Popup>  
 </Grid>  
 <ControlTemplate.Triggers>  
 <Trigger Property="ItemsControl.HasItems" Value="False">  
 <Setter TargetName="DropDownBorder" Property="FrameworkElement.MinHeight" Value="95" />  
 </Trigger>  
 <Trigger Property="IsEnabled" Value="True">  
 <Setter Property="Foreground" Value="#939393" />  
 </Trigger>  
 <Trigger Property="IsMouseOver" Value="True">  
 <Setter Property="TextElement.Foreground" Value="#ffffff" />  
 </Trigger>  
 <Trigger Property="IsMouseOver"  Value="False">  
 <Setter Property="TextElement.Foreground"  Value="#939393"/>  
 <Setter Property="FocusManager.FocusedElement" Value="{Binding RelativeSource={RelativeSource Self}}"/>  
 </Trigger>  
 <Trigger Property="IsDropDownOpen" Value="True">  
 <Setter Property="TextElement.Foreground" Value="#939393" />  
 </Trigger>  
 <Trigger Property="IsFocused" Value="True">  
 <Setter Property="Foreground" Value="#939393"/>  
 </Trigger>  
 <Trigger Property="ItemsControl.IsGrouping" Value="True">  
 <Setter Property="ScrollViewer.CanContentScroll" Value="False" />  
 </Trigger>  
 <Trigger Property="ComboBox.IsEditable" Value="True">  
 <Setter Property="KeyboardNavigation.IsTabStop" Value="False" />  
 <Setter TargetName="PART_EditableTextBox" Property="UIElement.Visibility" Value="Visible" />  
 <Setter TargetName="ContentSite" Property="UIElement.Visibility" Value="Hidden" />  
 </Trigger>  
 </ControlTemplate.Triggers>  
 </ControlTemplate>  
 </Setter.Value>  
 </Setter>  
</Style>

When I close the drop down of the ComboBox the Foreground color first changes to white and after that it becomes grey But I only want the Grey (#939393). Though the Foreground color changes too quickly and it's very hard to notice that's why I attach some GIF to understand it better.

Here is my ComboBoxItem control template :

<Style x:Key="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">  
 <Setter Property="Background" Value="#1e1e1e" />  
 <Setter Property="BorderBrush" Value="#1e1e1e" />  
 <Setter Property="Foreground" Value="#939393" />  
 <Setter Property="SnapsToDevicePixels" Value="True" />  
 <Setter Property="UseLayoutRounding" Value="True" />  
 <Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter Property="Template">  
 <Setter.Value>  
 <ControlTemplate TargetType="{x:Type ComboBoxItem}">  
 <Grid>  
 <Border  
                                x:Name="Bd"  
                                Padding="{TemplateBinding Padding}"  
                                Background="{TemplateBinding Background}"  
                                BorderBrush="{TemplateBinding BorderBrush}"  
                                BorderThickness="{TemplateBinding BorderThickness}"  
                                SnapsToDevicePixels="true">  
 <ContentPresenter  
                                    Margin="25,3.5,4.5,4.5"  
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">  
 <ContentPresenter.ContentTemplate>  
 <DataTemplate>  
 <Grid>  
 <local:CustomTextBlock  
                                                    RenderOptions.BitmapScalingMode="NearestNeighbor"  
                                                    RenderOptions.ClearTypeHint="Enabled"  
                                                    RenderOptions.EdgeMode="Aliased"  
                                                    SnapsToDevicePixels="True"  
                                                    Text="{Binding Name}"  
                                                    TextTrimming="CharacterEllipsis"  
                                                    UseLayoutRounding="True" />  
 </Grid>  
 </DataTemplate>  
 </ContentPresenter.ContentTemplate>  
 </ContentPresenter>  
 </Border>  
 <Rectangle  
                                x:Name="Border1"  
                                Width="12.2"  
                                Height="11"  
                                Margin="-220,0,0,0"  
                                RenderOptions.BitmapScalingMode="HighQuality"  
                                RenderOptions.ClearTypeHint="Auto"  
                                RenderOptions.EdgeMode="Unspecified"  
                                SnapsToDevicePixels="True">  
 <Rectangle.Fill>  
 <DrawingBrush>  
 <DrawingBrush.Drawing>  
 <DrawingGroup x:Name="DrawingLayer">  
 <DrawingGroup.ClipGeometry>  
 <RectangleGeometry Rect="0,0,512,512" />  
 </DrawingGroup.ClipGeometry>  
 <DrawingGroup Transform="0.1,0,0,-0.1,0,512">  
 <GeometryDrawing Brush="#d0021b">  
 <GeometryDrawing.Geometry>  
 <PathGeometry Figures="M4670,3950L2560,1350 1560,2570 830,2190 2590,170 5140,3260 4670,3950z" FillRule="Nonzero" />  
 </GeometryDrawing.Geometry>  
 <GeometryDrawing.Pen>  
 <Pen  
                                                                Brush="#d0021b"  
                                                                EndLineCap="Flat"  
                                                                LineJoin="Miter"  
                                                                StartLineCap="Flat"  
                                                                Thickness="0" />  
 </GeometryDrawing.Pen>  
 </GeometryDrawing>  
 </DrawingGroup>  
 </DrawingGroup>  
 </DrawingBrush.Drawing>  
 </DrawingBrush>  
 </Rectangle.Fill>  
 </Rectangle>  
 </Grid>  
 <ControlTemplate.Triggers>  
 <Trigger Property="IsEnabled" Value="False">  
 <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 </Trigger>  
 <MultiTrigger>  
 <MultiTrigger.Conditions>  
 <Condition Property="IsSelected" Value="False" />  
 <Condition Property="IsMouseOver" Value="True" />  
 <Condition Property="IsKeyboardFocused" Value="False" />  
 </MultiTrigger.Conditions>  
 <Setter TargetName="Bd" Property="Background" Value="#3c3c3c" />  
 <Setter TargetName="Bd" Property="BorderBrush" Value="#3c3c3c" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter Property="Foreground" Value="#ffffff" />  
 </MultiTrigger>  
 <MultiTrigger>  
 <MultiTrigger.Conditions>  
 <Condition Property="IsSelected" Value="True" />  
 <Condition Property="IsMouseOver" Value="False" />  
 <Condition Property="IsKeyboardFocused" Value="True" />  
 </MultiTrigger.Conditions>  
 <Setter TargetName="Border1" Property="Visibility" Value="Visible" />  
 <Setter TargetName="Bd" Property="Background" Value="Transparent" />  
 <Setter TargetName="Bd" Property="BorderBrush" Value="Transparent" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 </MultiTrigger>  
 <MultiTrigger>  
 <MultiTrigger.Conditions>  
 <Condition Property="IsSelected" Value="True" />  
 <Condition Property="IsMouseOver" Value="True" />  
 </MultiTrigger.Conditions>  
 <Setter TargetName="Bd" Property="Background" Value="#3c3c3c" />  
 <Setter TargetName="Bd" Property="BorderBrush" Value="#3c3c3c" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter Property="Foreground" Value="#ffffff" />  
 </MultiTrigger>  
 <MultiTrigger>  
 <MultiTrigger.Conditions>  
 <Condition Property="IsSelected" Value="True" />  
 <Condition Property="IsMouseOver" Value="False" />  
 <Condition Property="IsKeyboardFocused" Value="False" />  
 </MultiTrigger.Conditions>  
 <Setter TargetName="Bd" Property="Background" Value="Transparent" />  
 <Setter TargetName="Bd" Property="BorderBrush" Value="Transparent" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter Property="Foreground" Value="#939393" />  
 </MultiTrigger>  
 <MultiTrigger>  
 <MultiTrigger.Conditions>  
 <Condition Property="IsSelected" Value="False" />  
 <Condition Property="IsMouseOver" Value="False" />  
 <Condition Property="IsKeyboardFocused" Value="True" />  
 </MultiTrigger.Conditions>  
 <Setter TargetName="Bd" Property="BorderBrush" Value="Transparent" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 </MultiTrigger>  
 <MultiTrigger>  
 <MultiTrigger.Conditions>  
 <Condition Property="IsSelected" Value="False" />  
 <Condition Property="IsMouseOver" Value="True" />  
 <Condition Property="IsKeyboardFocused" Value="True" />  
 </MultiTrigger.Conditions>  
 <Setter TargetName="Bd" Property="Background" Value="#3c3c3c" />  
 <Setter TargetName="Bd" Property="BorderBrush" Value="#3c3c3c" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter Property="Foreground" Value="#ffffff" />  
 </MultiTrigger>  
 <Trigger Property="ComboBoxItem.IsMouseOver" Value="True">  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter TargetName="Border1" Property="Visibility" Value="Collapsed" />  
 </Trigger>  
 <Trigger Property="ComboBoxItem.IsMouseOver" Value="False">  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 <Setter TargetName="Border1" Property="Visibility" Value="Hidden" />  
 </Trigger>  
 <Trigger Property="ComboBoxItem.IsSelected" Value="True">  
 <Setter TargetName="Border1" Property="Visibility" Value="Visible" />  
 <Setter TargetName="Bd" Property="SnapsToDevicePixels" Value="True" />  
 <Setter TargetName="Bd" Property="UseLayoutRounding" Value="True" />  
 <Setter TargetName="Bd" Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />  
 <Setter TargetName="Bd" Property="RenderOptions.ClearTypeHint" Value="Enabled" />  
 </Trigger>  
 </ControlTemplate.Triggers>  
 </ControlTemplate>  
 </Setter.Value>  
 </Setter>  
</Style>

And this is how I use it in my ControlTemplate :

<ComboBox  x:Name="cmb1"  SelectionChanged="cmb1_SelectionChanged"  FontFamily="Segoe UI"  FontSize="10"  TextOptions.TextFormattingMode="Display"  SnapsToDevicePixels="True"  UseLayoutRounding="True"  RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.ClearTypeHint="Enabled"     Height="24.2" Width="246.5" Margin="121,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">  
 <ComboBox.Style>  
 <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource ComboBoxFlatStyle}" ></Style>  
 </ComboBox.Style>  
 <ComboBox.ItemContainerStyle>  
 <Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource ComboBoxItemStyle}">  
 </Style>  
 </ComboBox.ItemContainerStyle>  
 <ComboBox.ItemTemplate>  
 <DataTemplate>  
 <TextBlock x:Name="textBlock"  SnapsToDevicePixels="True" UseLayoutRounding="True" RenderOptions.BitmapScalingMode="HighQuality" RenderOptions.EdgeMode="Aliased"   
        Text="{Binding Name}"   
        TextTrimming="CharacterEllipsis" ></TextBlock>  
 </DataTemplate>  
 </ComboBox.ItemTemplate>  
</ComboBox>

This is the effect I want :

But I get this effect in my ComboBox :

I also try to change foreground using IsFocused but somehow the whole thing is messed up and I don't get the desire effect.

* UPDATE *

If I does not change the ComboBox Selection and just click the ComboBox and again click the ComboBox to close it without moving the MousePointer from ComboBox that means, if the Selection change event does not occurred then,

This is the effect I want :

But I get this effect in my Combobox :

Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-11-17T02:01:25.077+00:00

HI,@MERUN KUMAR MAITY . What is the style code of your ComboBoxItem and the code of the ComboBox? Is it possible to show the complete code that can reproduce the problem to analyze?
MERUN KUMAR MAITY 621 Reputation points

2022-11-17T05:15:26.743+00:00

Thank you very much sir, as usual you are always present here to help me. I successfully updated my question with ComboBoxItem control template and I also give the code of the ComboBox which I use in the MainWindow.XAML.
Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-11-17T07:25:39.1+00:00

Hi,@MERUN KUMAR MAITY . I can't reproduce the effect of your question. Could you show your code for local:CustomTextBlock and cmb1_SelectionChanged ?
MERUN KUMAR MAITY 621 Reputation points

2022-11-17T14:58:01.993+00:00
Thank you very much sir for your reply. I know that this is too much complex.

Here is the code of local:CustomTextBlock which I previously asked on this Microsoft Q & A forum and I also answered this question by myself.

Here is the link : https://learn.microsoft.com/en-us/answers/questions/1037784/how-can-i-give-different-font-size-to-the-uppercas.html

On another hand, for cmb1_SelectionChanged I don't have any proper code actually, I trying random things on SelectionChanged event. The last thing I try is to set the Foreground.

Here is the code :

private void cmb1_SelectionChanged(object sender, SelectionChangedEventArgs e) { cmb1.Foreground = (SolidColorBrush)new BrushConverter().ConvertFrom("#939393"); }

But the problem is, if I do this then the Mouseover is not working anymore. Though some MSDN website suggests me to use the ComboBox cb = sender as ComboBox; method but I don't understand that and that completely over my head.

The logic behind the Sender method is to send the Foreground color as default every time when the ComboBox SelectionChanged event fired. But I don't know how to do that.

I stuck on this issue for almost 20 days. I tried lot of data binding, trigger but nothing works.

I wish you can solve my problem.
Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-11-21T09:39:27.12+00:00

Hi,@MERUN KUMAR MAITY . I still haven't reproduced your problem in my project. I move the mouse MouseOver on the ComboBox EditTextBox does not trigger the White Foreground. Could you show a minimal example code that reproduces the problem?
MERUN KUMAR MAITY 621 Reputation points

2022-11-23T16:43:58.707+00:00

Thank you very much sir for your reply. You say that, you applied my code but still does not trigger the White Foreground. It's give me a clue that this white Foreground problem does not appear when the Combobox has a static content. In my case, My Combobox have a dynamic content that means my Combobox content is bind to a List. Actually this List <> is showing the available audio device through the Combobox.

Could you show a minimal example code that reproduces the problem?

I already give all of my code of the Combobox, there nothing left. The white Foreground did not appear in your case because you did not apply the List<> as Combobox content. In my case this List<> is audio device list.

Here is the Link of that Audio Device List : https://learn.microsoft.com/en-us/answers/questions/1037784/how-can-i-give-different-font-size-to-the-uppercas.html

Just read the question part where I briefly told that how I added the List<> as ComboBox content. Still I tell you some important part. just give the Combobox name as cmb1, that's it. In Line number 94 you can see the line this.cmb1.ItemsSource = lcv;. this how the List<> is added as ComboBox content.

I truly believe you will see the white Foreground problem after these steps.
Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-11-24T05:40:17.163+00:00

Hi,@MERUN KUMAR MAITY . What is the code of your textBlockStyle ? Is it related to this style?
MERUN KUMAR MAITY 621 Reputation points

2022-11-24T13:58:08.877+00:00
Thank you very much sir, for your reply. I am really amazed by how you care my every line of Code.. Actually, this textBlockStyle is just a simple style setter, I just try to solve my problem by declaring a separate style and doing random things there, though none of this solve my actual white Foreground problem.

Here is the code of textBlockStyle :

<Style x:Key="textBlockStyle" TargetType="TextBlock">    </Style>

I hope you solve my problem because it's too much hard.
MERUN KUMAR MAITY 621 Reputation points

2022-11-30T14:20:35.263+00:00

Dear sir, please give me any reply. At least show the code on that how can you move the mouse MouseOver on the ComboBox EditTextBox.

Because you previously told me that.

I move the mouse MouseOver on the ComboBox EditTextBox does not trigger the White Foreground.
Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-12-06T06:07:06.083+00:00

Hi,@MERUN KUMAR MAITY . I reproduced your problem, but I haven't found a solution yet.
I haven't found a problem with MouseOver triggering the Foreground to flicker.

I tried to modify the code, but it didn't work.
MERUN KUMAR MAITY 621 Reputation points

2022-12-06T20:41:35.783+00:00

Thank you very much sir, I am really amazed that you still working hard to solve my question. But, by the grace of GOD I found an amazing solution. I need some help from you, I know that, you can definitely help me to get out of this situation. I updated the Combobox control template, just see the first part of my question and see the x:Key="ComboBoxFlatStyle" which is in my case the Combo box control template.

I solved the flickering white foreground issue by binding IsFocused with Mouseover false through Relative source. It's an amazing solution which I found after hours of hard work for over a week. The logic is very simple, I give a color to the IsFocused property and if I remove the mouse pointer from the Combobox then the IsMouseOver = false property is triggered and at that time the IsFocused property is also triggered which is remove the flickering.

But there only one last problem is remaining, suppose I click the Combobox and the popup is open successfully and I don't choose any option that means there no change in selection then still the IsFocused property is triggered. Though the logic is clearly visible there only mouseover event is present there because I don't remove my mouse from the Combobox.

Can you solve my problem by using any custom attach behavior? Some kind of Focus extension where the IsFocused never triggered until I move the mouse from the Combobox. In a single sentence the problem is the Mouse over event is not triggered after focus.
Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-12-08T01:36:19.777+00:00

Hi,@MERUN KUMAR MAITY . I tested your updated code and it works fine. I don't understand the question you mentioned. Is it possible to demonstrate expected and actual results?
MERUN KUMAR MAITY 621 Reputation points

2022-12-11T17:18:01.873+00:00

Thank you very much sir, for your reply and patience.

I don't understand the question you mentioned. Is it possible to demonstrate expected and actual results?

I updated the question with proper instructions and GIF images, just see the last part of the question. I written it as "UPDATE".

If you carefully see those two GIFs, then you clearly see that in the first GIF, known as "This is the effect I want", If the user click on the ComboBox and close it without selecting any option from Combobox item list, in a single sentence if the Selection change event does not occurred then still the Mouseover effect is active, I give you some point by point instructions.

1) User move the mouse to the ComboBox.
2) The ComboBox IsMouseOver event is triggered that's why the Color changes to white.
3) The ComboBox Drop Down will open, If the user does not select any option then close the ComboBox then the IsMouseOver effect is revert back.
4) Another important effect is also triggered when the Drop Down will open is, "IsDropDownOpen" where I give the Foreground colour grey (#939393) which you clearly understand by looking into the ComboBox control template.

But in the second GIF, that means what I tried the IsMouseOver effect does not triggered again that's why the color does not change back to white in case if there no Selection change occurred. I hope you understand what I want to say.

By the way, again thank you for your help.
Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-12-15T09:51:49.427+00:00

Hi,@MERUN KUMAR MAITY . I replied the answer in your new question, you could check it.

1 answer

Hui Liu-MSFT 48,586 Reputation points Microsoft Vendor

2022-12-16T06:31:03.377+00:00

Hi,@MERUN KUMAR MAITY .

You could refer to the code below.

The complete code:

271287-comboboxforegroundtrigger.txt

The result：

----------------------------------------------------------------------------

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
MERUN KUMAR MAITY 621 Reputation points

2022-12-16T07:39:34.537+00:00

Thank you very much sir, for your complete code. All of your code is perfect. But still that same error "Member not found in Data context".

The first build may report an error, but it can run successfully. After you run it the first time, the error goes away.

I do that but still the error is present in my code. The main culprit is the ViewModel which I think. We should find a simple and sophisticated way, so that we can call this attach behavior in our ComboBox without the Data Context error.

Sir, I know that in your side there nothing wrong, and you can run all your code very successfully that's why you posted the GIF image as result, But that's not the case in my side.

MERUN KUMAR MAITY 621 Reputation points

2022-12-16T10:42:27.427+00:00

Thank you very much sir for your reply. If I paste your complete code in a completely new visual studio WPF project then it's run but my main issue does not solve, though this Mouse Over issue is solved but still the old issue appear again still the Foreground Color are fluctuating. To avoid the fluctuating I introduce this Is Focused if the old issue appear again then what's the point to use this attach behavior.

The first build may report an error, but it can run successfully

Absolutely, wrong.. the issue still present in your code. That's why the Data Context error appeared again and again.

Maybe my View Model somehow unable to call this attach behavior. We Have to Find another way. Another honorable mention is, My View Models are different classes that means every time I add a new class and declare View Model in the new class, I don't put all View Models in MainWindow.xaml.CS, May be that's primary reason of this problem, though I don't know.

That's it.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to change Foreground color of a ComboBox on SelectionChanged in WPF?

1 answer

Your answer