Vishal
Vishal

Reputation: 6378

Change color of Selected-Unfocused ComboBox Item in wpf

I want to change the color of SelectedUnfocused(Item marked with red border in image below) Item in ComboBox.

So, I tried to change the control template of a combobox.

Before Copying ControlTemplate from MSDN :

enter image description here

After Copying ControlTemplate from MSDN :

enter image description here

So, that template has changed the whole look of my control. I don't want to change those colors.

Here is the MSDN link to get the template that I used.

Upvotes: 1

Views: 1432

Answers (2)

Rohit Vats
Rohit Vats

Reputation: 81333

Add only ComboBoxItem style from the linked page and relevant brushes used in the style. No need to overwrite complete template.

Copy/Paste only this much of code in your XAML and you are good to go:

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color> <-- Update color here

<Style x:Key="{x:Type ComboBoxItem}"
       TargetType="{x:Type ComboBoxItem}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ComboBoxItem}">
        <Border x:Name="Border"
                Padding="2"
                SnapsToDevicePixels="true"
                Background="Transparent">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="SelectedUnfocused">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ContentPresenter />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Upvotes: 2

Fede
Fede

Reputation: 44068

If you want to change only the ComboBoxItem style, and not the ComboBox style, simply remove the Style TargetType="ComboBox" from your XAML and leave only the relevant Style TargetType="ComboBoxItem from the linked MSDN page.

Upvotes: 1

Related Questions