0

OK. I have a ComboBox with blue background and white text. The items shown in this ComboBox are of two kinds: Ones that have children and ones that do not.

  • The ones that do not have children are shown as simple TextBlock.
  • The ones that have children are shown as Expander, with its Header set to a simple TextBlock and its body set to an ItemsControl showing all the children.

I want to show these items in the dropdown list in BLACK color, whereas when selected, I want to show them in WHITE color in the TextBox area of the ComboBox (i.e. not in the dropdown list).

So I googled and found this post. After much trial and error, I have achieved the following:

<Style x:Key="MyComboStyle" TargetType="ComboBox">
  <Setter Property="Background" Value="Blue" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="ItemTemplate">
    <Setter.Value>
      <DataTemplate>
        <DataTemplate.Resources>
          <DataTemplate DataType="{x:Type localVM:CostCenterVM}" x:Key="CCWithoutChildren" >
            <TextBlock Text="{Binding CCNumberName}"  />
          </DataTemplate>
          <DataTemplate DataType="{x:Type localVM:CostCenterVM}" x:Key="CCWithChildren">
            <Expander>
              <Expander.Header>
                <TextBlock VerticalAlignment="Center" Text="{Binding CCNumberName}" />
              </Expander.Header>
              <Expander.Content>
                <ItemsControl ItemsSource="{Binding Children}" DisplayMemberPath="CCNumberName" 
                            Background="Transparent" Padding="10,0,0,0" />
              </Expander.Content>
            </Expander>
          </DataTemplate>
        </DataTemplate.Resources>
        <ContentControl Content="{Binding}">
          <ContentControl.Style>
            <Style TargetType="ContentControl">
              <Style.Triggers>
                <DataTrigger Binding="{Binding HasChildren}" Value="False">
                  <Setter Property="ContentTemplate" Value="{StaticResource CCWithoutChildren}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding HasChildren}" Value="True">
                  <Setter Property="ContentTemplate" Value="{StaticResource CCWithChildren}" />
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </ContentControl.Style>
        </ContentControl>
      </DataTemplate>
    </Setter.Value>
  </Setter>

  <Setter Property="ItemContainerStyle">
    <Setter.Value>
      <Style TargetType="{x:Type ComboBoxItem}">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
              <Border x:Name="Bd"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">

                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                  <ContentPresenter.Resources>
                    <Style TargetType="TextBlock">
                      <Setter Property="Foreground" Value="Black" />
                    </Style>
                  </ContentPresenter.Resources>
                </ContentPresenter>
              </Border>
              <ControlTemplate.Triggers>
                <Trigger Property="IsHighlighted" Value="True">
                  <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
</Style>

This works for the most part, except in one case. If I select an item from the dropdown that has children, the selected item is shown in BLACK color in the TextBox area, unlike the child-less items which are correctly shown in WHITE. How can I fix this?

Community
  • 1
  • 1
dotNET
  • 33,414
  • 24
  • 162
  • 251
  • If I understand you correctly then you select an item from outside of the `ComboBox`s collection, which means you would have to set `IsEditable="True"` so the `ComboBox` can display values outside of it's `Collection`. HTH – XAMlMAX Dec 10 '14 at 08:55
  • 1
    @XAMlMAX: And if I understand you correctly, then you didn't understand it correctly. :) – dotNET Dec 10 '14 at 10:55

0 Answers0