WPF Metro样式列表框

我在设置列表框选择背景的样式时遇到问题。 我最初使用的是ListView，它的样式问题较少，但将其移动到Silverlight应用程序，我发现它没有ListView，所以我只使用了ListBox

我希望我的应用程序可以很容易地移植到Silverlight和Windows Phone中，所以我使用了ListBox，现在在风格上遇到了问题

我的Metro应用程序有黑色主题，我有自定义的ListBoxItem，但不确定为什么我点击它时，它看起来像这样

最初使用ListView时，它是这样的

在我的自定义项目模板中添加背景色使其看起来像

我如何摆脱白色背景，并在项目悬停时重新设置样式，因为它看起来像这样

到目前为止，这是我的listbox的XAML

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

如果你想要我的自定义项目模板

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

---

我试着用这个来混合4，但我找不到方法。

在我看来，上面的屏幕截图与您提供的XAML不太匹配，但是我想我可以回答您的问题

对于每个项目周围的白色边框-从选中项目时边框变为紫色的方式，可以看出它是ItemContainer的一部分（因为这就是选中的内容）。ItemContainer将包含每个ListBoxItem的内容。内容是使用DataTemple（或ItemTemplate属性）呈现的。在DataTemplate中，最上面的网格周围有5个边距，这意味着当使用该DataTemplate呈现内容时，内容的外部将有一个边距。这似乎就是你在每件物品周围的白色边框所得到的，所以我很确定这就是正在发生的事情。去掉DataTemplate最顶部网格中的边距，白色边框将消失。如果这不正确，请提供更完整的XAML示例（包括Listbox的父XAML元素），因为当窗口背景为黑色时，上面的XAML本身不会生成白色边框

更改ListBoxItem的颜色/样式非常简单，有几种方法可以做到这一点。最简单的方法（在我看来）是在ItemContainerStyle中添加一个触发器来调整鼠标上方的背景色。下面是一个简单的示例，扩展现有的ItemContainerStyle（如果愿意，触发器可以更高级）：

希望有帮助

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