How to change the default background of selected item in ListBox

Question

I'm developing a Windows Store App using WPF. In the main page I have a background image that covers all the screen. I'm using a few ListBoxes with a custom ItemTemplate and a transparent background. So far, it is working OK.

The thing here, is when I select any item from the ListBox, it's highlighted with a purple color (the default one I guess) and the background of the ListBox change to white.

<ListBox x:Name="listBox1" Background="Transparent" BorderBrush="Transparent" 
         ItemTemplate="   {StaticResource listBox1DataTemplate}" 
         SelectionChanged="listBox1_SelectionChanged" 
         ItemContainerStyle="{StaticResource StylelistBox1}"/>

I tried to change it using styles and applying it when the item is selected. However, it doesn't work.

Does any one know how to change the default color of a selected item?

Regards!

Answer 1

Perhaps you should change the default Style Template of ListBoxItem with respect to your requirement.

<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>

MSDN REFERENCE HERE