Search code examples
c#wpfxamllistboxwindows-8

Can we change the selected item color of a ListBox?


So, I have this ListBox written in XAML:

<ListBox Margin="0" x:Name="ListBox_Main" Grid.Row="1" VerticalAlignment="Top" FontSize="24" SelectionChanged="ListBox_Main_SelectionChanged" Foreground="Black">
     <ListBoxItem Content="Item 1" Background="#19000000" />
     <ListBoxItem Content="Item 2" Background="#19000000" />
     <ListBoxItem Content="Item 3" Background="#19000000" />
     <ListBoxItem Content="Item 4" Background="#19000000"/> 
     <ListBoxItem Content="Item 5" Background="#19000000"/>
 </ListBox>

I can change the color of background, foreground, and the text of the list box items but there's no option to change the color when any of the items is selected, it is blue by default: enter image description here

Can we change that blue color?


Solution

  • You need to change the default Style Template of ListBoxItem with respect to your requirement. MSDN Reference

    <Style TargetType="ListBoxItem">
      <Setter Property="Padding" Value="3" />
      <Setter Property="HorizontalContentAlignment" Value="Left" />
      <Setter Property="VerticalContentAlignment" Value="Top" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="TabNavigation" Value="Local" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="ListBoxItem">
                  <Grid Background="{TemplateBinding Background}">
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="CommonStates">
                              <vsm:VisualState x:Name="Normal" />
                              <vsm:VisualState x:Name="MouseOver">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="SelectionStates">
                              <vsm:VisualState x:Name="Unselected" />
                              <vsm:VisualState x:Name="Selected">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="FocusStates">
                              <vsm:VisualState x:Name="Focused">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                          <DiscreteObjectKeyFrame KeyTime="0">
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Unfocused"/>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                      <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                      <ContentPresenter
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              Margin="{TemplateBinding Padding}"/>
                      <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
    </Style>
    

    You may also have a look on this link, Formatting the Background Color of a Selected WPF ListBox Item for reference.