title: Custom List Box item style
body: <p>I have a style like below:</p>
  
  <pre><code>&lt;!-- ListBox ItemTemplate style. --&gt;
          &lt;Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"&gt;
              &lt;Setter Property="Background" Value="Transparent"/&gt;
              &lt;Setter Property="BorderThickness" Value="0"/&gt;
              &lt;Setter Property="BorderBrush" Value="Transparent"/&gt;
              &lt;Setter Property="Padding" Value="0"/&gt;
              &lt;Setter Property="HorizontalContentAlignment" Value="Stretch"/&gt;
              &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="ListBoxItem"&gt;
                          &lt;Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"&gt;
                              &lt;VisualStateManager.VisualStateGroups&gt;
                                  &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                      &lt;VisualState x:Name="Normal"/&gt;
                                      &lt;VisualState x:Name="MouseOver"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name="MouseLeave"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name="Disabled"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                  &lt;/VisualStateGroup&gt;
                                  &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                                      &lt;VisualState x:Name="Unselected"/&gt;
                                      &lt;VisualState x:Name="Selected"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                  &lt;/VisualStateGroup&gt;
                                  &lt;VisualStateGroup x:Name="FocusStates"&gt;
                                      &lt;VisualState x:Name="Focused"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"&gt;
                                                  &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                                      &lt;DiscreteObjectKeyFrame.Value&gt;
                                                          &lt;Visibility&gt;Visible&lt;/Visibility&gt;
                                                      &lt;/DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;/DiscreteObjectKeyFrame&gt;
                                              &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name="Unfocused"/&gt;
                                  &lt;/VisualStateGroup&gt;
                              &lt;/VisualStateManager.VisualStateGroups&gt;
                              &lt;ContentControl x:Name="ContentContainer" 
                                              ContentTemplate="{TemplateBinding ContentTemplate}" 
                                              Content="{TemplateBinding Content}" 
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" 
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
                              &lt;Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/&gt;
                              &lt;Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/&gt;
                              &lt;Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/&gt;
                          &lt;/Grid&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
  </code></pre>
  
  <p>This is set to my list box like this :</p>
  
  <pre><code>    &lt;ListBox Name="listBox" 
               HorizontalAlignment="Stretch"
               ItemContainerStyle="{StaticResource ListBoxItemStyle}"
               ItemTemplate="{StaticResource DefaultDataTemplate}"
       &lt;ListBox.ItemsPanel&gt;
               &lt;ItemsPanelTemplate&gt;
               &lt;/ItemsPanelTemplate&gt;
       &lt;/ListBox.ItemsPanel&gt;
       &lt;/ListBox&gt;
  </code></pre>
  
  <p>Now the  <code>ItemTemplate="{StaticResource DefaultDataTemplate}"</code> is like below;</p>
  
  <pre><code>&lt;DataTemplate x:Key="DefaultDataTemplate"&gt;
              &lt;Border x:Name="ListItemBorder" 
                      Margin="0,2,0,0" 
                      VerticalAlignment="Stretch"
                      HorizontalAlignment="Stretch"
                      Background="{Binding Converter={StaticResource AnswerCellBackgroundConvertor}}"&gt;
  
  ///ITems
  
  &lt;/Border&gt;
          &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>As you can see i have set <code>DataTemplate Background</code> as default well, so i need both the style and the converter to be present.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>When i click on the item in the list box the style or the border is on top, like the image show below. how to set it as a background ?</p>
  
  <p>Image here;</p>
  
  <p><img src="https://i.stack.imgur.com/uFVD8.png" alt="enter image description here"></p>
  
  <p>How can i fix this ?</p>