title: WPF Metro Styling ListBox
body: <p>I'm having a problem styling my ListBox selection background.
  I used ListView originally, it was less problematic with styling but moving this to Silverlight app, I found out that it doesn't have ListView so I just used ListBox.</p>
  
  <p>I want my app to be easily ported in Silverlight and also in Windows Phone so I used ListBox and now am having a trouble with the style.</p>
  
  <p>My Metro app has Dark theme and I have custom ListBoxItem but am not sure why when I clicked on it, it looks like this
  <img src="https://i.stack.imgur.com/tH12B.jpg" alt="enter image description here"></p>
  
  <p>originally when using ListView, it looks like this
  <img src="https://i.stack.imgur.com/Mwo45.jpg" alt="enter image description here"></p>
  
  <p>adding background color in my custom ItemsTemplate make it look this
  <img src="https://i.stack.imgur.com/HpHUZ.jpg" alt="enter image description here"></p>
  
  <p>How do I get rid of that White background and also restyle the item when hovered because it looks like this
  <img src="https://i.stack.imgur.com/H0Roq.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/AZjQe.jpg" alt="enter image description here"></p>
  
  <p>this my XAML for listbox so far</p>
  
  <pre><code>&lt;ListBox Grid.Row="3" Name="lvSubmeters" VerticalAlignment="Top" HorizontalAlignment="Stretch" SelectedItem="{Binding Path=SelectedListViewItem, Mode=TwoWay}" SelectedIndex="{Binding Path=SelectedListViewIndex, Mode=TwoWay}"  ItemTemplate="{StaticResource SubmeterItems}" ItemsSource="{Binding Path=Store.AllItems}" Background="{x:Null}" Foreground="White"&gt;
      &lt;ListBox.ItemContainerStyle&gt;
          &lt;Style TargetType="ListBoxItem"&gt;
              &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
              &lt;Setter Property="Background" Value="Transparent" /&gt;
              &lt;Setter Property="Foreground" Value="White" /&gt;
              &lt;Setter Property="Margin" Value="0" /&gt;
          &lt;/Style&gt;
      &lt;/ListBox.ItemContainerStyle&gt;
  &lt;/ListBox&gt;
  </code></pre>
  
  <p>and also if you want my custom ItemsTemplate</p>
  
  <pre><code>&lt;DataTemplate x:Name="SubmeterItems"&gt;
      &lt;Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="5,5,5,5"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="166"/&gt;
              &lt;ColumnDefinition Width="100*"/&gt;
              &lt;ColumnDefinition Width="200"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;StackPanel Grid.Column="0" VerticalAlignment="Top"&gt;
              &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding MeterID}" FontSize="24"  FontWeight="Bold" Foreground="#FF429AA3" /&gt;
              &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding Fullname}" FontSize="16"  /&gt;
          &lt;/StackPanel&gt;
          &lt;StackPanel Grid.Column="1" VerticalAlignment="Top" Height="95"&gt;
              &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text=" " FontSize="24"  FontWeight="Bold" Foreground="#FF429AA3" /&gt;
              &lt;Grid&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="100"/&gt;
                      &lt;ColumnDefinition Width="29*"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;StackPanel Grid.Column="0"&gt;
                      &lt;TextBlock Grid.Column="0" VerticalAlignment="Top" Text="Last Reading:" FontSize="14" Margin="0,0,5,5"  /&gt;
                      &lt;TextBlock Grid.Column="0" VerticalAlignment="Top" Text="New Reading:" FontSize="14" Margin="0,0,5,5"  /&gt;
                      &lt;TextBlock Grid.Column="0" VerticalAlignment="Top" Text="KW/H Used:" FontSize="14" Margin="0,0,5,5"  /&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel Grid.Column="1"&gt;
                      &lt;TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding LastReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  /&gt;
                      &lt;TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding NewReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  /&gt;
                      &lt;TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding KwHUsed}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  /&gt;
                  &lt;/StackPanel&gt;
              &lt;/Grid&gt;
          &lt;/StackPanel&gt;
  
          &lt;StackPanel Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black"&gt;
              &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding KwhUsedAmount}" FontSize="20"  FontWeight="Bold" Foreground="Red" TextAlignment="Right" Margin="0,0,5,0" /&gt;
              &lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Right"&gt;
                  &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="+" FontSize="20" Foreground="#99FF0000" TextAlignment="Right"  Margin="0,0,5,0"/&gt;
                  &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding AdditionalCharges}" FontSize="20" Foreground="#99FF0000" TextAlignment="Right"  Margin="0,0,5,0"/&gt;
              &lt;/StackPanel&gt;
              &lt;TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding TotalAmount}" FontSize="34" FontWeight="Bold" Foreground="Green" TextAlignment="Right"  Margin="0,0,5,0" /&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>I tried taking this to Blend 4 but I can't find the way to do it.</p>