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:
<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>
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>
What I have tried:
I also try to change foreground using IsFocused but somehow the whole thing is messed up and I don't get the desire effect.