WPF Metro Styling ListBox

Question

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.

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.

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 enter image description here

originally when using ListView, it looks like this enter image description here

adding background color in my custom ItemsTemplate make it look this enter image description here

How do I get rid of that White background and also restyle the item when hovered because it looks like this enter image description here

this my XAML for listbox so far

<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">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Margin" Value="0" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

and also if you want my custom ItemsTemplate

<DataTemplate x:Name="SubmeterItems">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="5,5,5,5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="166"/>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" VerticalAlignment="Top">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding MeterID}" FontSize="24"  FontWeight="Bold" Foreground="#FF429AA3" />
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding Fullname}" FontSize="16"  />
        </StackPanel>
        <StackPanel Grid.Column="1" VerticalAlignment="Top" Height="95">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text=" " FontSize="24"  FontWeight="Bold" Foreground="#FF429AA3" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="29*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0">
                    <TextBlock Grid.Column="0" VerticalAlignment="Top" Text="Last Reading:" FontSize="14" Margin="0,0,5,5"  />
                    <TextBlock Grid.Column="0" VerticalAlignment="Top" Text="New Reading:" FontSize="14" Margin="0,0,5,5"  />
                    <TextBlock Grid.Column="0" VerticalAlignment="Top" Text="KW/H Used:" FontSize="14" Margin="0,0,5,5"  />
                </StackPanel>
                <StackPanel Grid.Column="1">
                    <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding LastReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  />
                    <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding NewReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  />
                    <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding KwHUsed}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  />
                </StackPanel>
            </Grid>
        </StackPanel>

        <StackPanel Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding KwhUsedAmount}" FontSize="20"  FontWeight="Bold" Foreground="Red" TextAlignment="Right" Margin="0,0,5,0" />
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="+" FontSize="20" Foreground="#99FF0000" TextAlignment="Right"  Margin="0,0,5,0"/>
                <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding AdditionalCharges}" FontSize="20" Foreground="#99FF0000" TextAlignment="Right"  Margin="0,0,5,0"/>
            </StackPanel>
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding TotalAmount}" FontSize="34" FontWeight="Bold" Foreground="Green" TextAlignment="Right"  Margin="0,0,5,0" />
        </StackPanel>
    </Grid>
</DataTemplate>

I tried taking this to Blend 4 but I can't find the way to do it.

Brian S Brian S · Accepted Answer · 2012-06-25T16:47:12

It looks to me like your screenshots from above don't quite match the XAML that you've provided, however I think I can answer your questions.

For the white border around each item - From the way that the border changes to Purple when the item is selected, you can tell that it is part of the ItemContainer (because that is what gets selected). The ItemContainer will contain the Content of each ListBoxItem. The Content is rendered using the DataTemple (or ItemTemplate property). In your DataTemplate, you have a margin of 5 around the topmost grid, meaning that when the Content is rendered using that DataTemplate, there will be a margin around the outside of the content. That seems to be what you're getting with your white border around each item, so I'm pretty sure that's what is going on. Get rid of the margin in the top most grid of the DataTemplate, and the white border will be gone. If this isn't correct, please provide more complete XAML example (including the parent XAML element of the Listbox) because the xaml above, on its own, does not yield a white border when the Window background is Black.

Changing the colors/style of the ListBoxItem is pretty easy, and there are several ways to do it. The easiest way (in my opinion) is to add a trigger to the ItemContainerStyle that adjusts the background color on MouseOver. Here is a simple example, extending your existing ItemContainerStyle (triggers can be much more advanced, if you wish):

<ListBox.ItemContainerStyle>
  <Style TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Margin" Value="5" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
    </Style.Triggers>
  </Style>
</ListBox.ItemContainerStyle>

Hope that helps.

WPF Metro Styling ListBox

1 Answers