文本不在WPF ComboBox中显示

Question

I almost perfected my Combobox, its working 98%. The only thing missing is the highlighted color on an item. The moment I set this I get the desired highlighted color, but it displays no text. When I comment the highlight part out it works 100%, only the highlightcolor is wrong. Can someone see what is wrong.

This is my complete xaml:

<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#B9B9B9" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#E1E1E1" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />
<ControlTemplate TargetType="ToggleButton"         x:Key="ComboBoxToggleButtonTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border Grid.ColumnSpan="2" Name="Border"
          BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
          CornerRadius="0" BorderThickness="1, 1, 1, 1" 
          Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
        <Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder"
          CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" 
          Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
        <Path Name="Arrow" Grid.Column="1" 
        Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
        HorizontalAlignment="Center" Fill="#444"
        VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="UIElement.IsMouseOver" Value="True">
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="#E5F1FB"/>
            <Setter Property="Panel.Background" TargetName="Border" Value="#E5F1FB"/>
            <Setter Property="BorderBrush" TargetName="Border" Value="#0078D7"/>
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="#CCE4F7"/>
            <Setter Property="Panel.Background" TargetName="Border" Value="#CCE4F7"/>
            <Setter Property="BorderBrush" TargetName="Border" Value="#3176AF"/>
        </Trigger>

        <Trigger Property="UIElement.IsEnabled" Value="False">
            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
    <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="Black"/>
    <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Height" Value="22"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Margin" Value="3"/>
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton Name="ToggleButton" Grid.Column="2"
            ClickMode="Press" Focusable="False"
            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
            Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

                    <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                          HorizontalAlignment="Left" VerticalAlignment="Center"                              
                          Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
                          ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                    <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                 IsReadOnly="{TemplateBinding IsReadOnly}"
                 Visibility="Hidden" Background="Transparent"
                 HorizontalAlignment="Left" VerticalAlignment="Center"
                 Focusable="True" >
                        <TextBox.Template>
                            <ControlTemplate TargetType="TextBox" >
                                <Border Name="PART_ContentHost" Focusable="False" />
                            </ControlTemplate>
                        </TextBox.Template>
                    </TextBox>
                    <!-- Popup showing items -->
                    <Popup Name="Popup" Placement="Bottom"
               Focusable="False" AllowsTransparency="True"
               IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
               PopupAnimation="Slide">
                        <Grid Name="DropDown" SnapsToDevicePixels="True"
                MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                            <Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0"
                    CornerRadius="0" BorderThickness="1,1,1,1" 
                    BorderBrush="#0078D7"/>
                            <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ItemsControl.HasItems" Value="False">
                        <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                    </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 Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                        <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                    </Trigger>               
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ComboBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ComboBoxItem">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2">
                                <TextBlock Text="{TemplateBinding Content}" Margin="2" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{x:Static SystemColors.HighlightBrush}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

Resulting this (text in list missing):

Onece you comment out the last setter (HighlightColor), this piece:

<Setter Property="ItemContainerStyle">
    <Setter.Value>
        <Style TargetType="ComboBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2">
                            <TextBlock Text="{TemplateBinding Content}" Margin="2" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{x:Static SystemColors.HighlightBrush}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Setter.Value>
</Setter>

Resulting this (Text there, but highligtcolor wrong):

Why is my text missing once I set the desired Highlight color?

Answer 1

Instead of using "#3399ff" try with "#663399ff". Adding opacity will make colors transparent and they wont cover your text. Also you may find this useful http://yolijn.com/convert-rgba-to-rgb to calculate resulting color from background color and transparent color over it.

Answer 2

The Opocity thing did not work for me. This also was not the problem, because I should have then seen some text if even if it was not highlighted. This was not the case. So I had to fiddle for quite a while, whilest not knowing what I'm doing ;-). By replacing:

<TextBlock Text="{TemplateBinding Content}" Margin="2" />

with

<ContentPresenter></ContentPresenter>

solved the problem for me. Hope this small thing will help someone else.