Question

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

我希望我的应用程序可以轻松移植到Silverlight和Windows Phone中，因此我使用了ListBox，现在我遇到了样式问题。

我的Metro应用程序有Dark主题，我有自定义ListBoxItem但我不确定为什么当我点击它时，它看起来像这样 enter image description here

最初使用ListView时，它看起来像这样 enter image description here

在我的自定义ItemsTemplate中添加背景颜色使它看起来像这样 enter image description here

如何摆脱那个白色背景，并在悬停时重新放置物品，因为它看起来像这样 enter image description here

这是我目前为止列出框的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>

以及如果你想要我的自定义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>

我尝试将其用于Blend 4，但我找不到这样做的方法。

Answer 1

在我看来，您上面的截图与您提供的XAML不完全匹配，但我想我可以回答您的问题。

对于每个项目周围的白色边框 - 从选择项目时边框更改为紫色的方式，您可以看出它是ItemContainer的一部分（因为这是选中的内容）。 ItemContainer将包含每个ListBoxItem的内容。使用DataTemple（或ItemTemplate属性）呈现内容。在DataTemplate中，最顶层网格周围的边距为5，这意味着当使用该DataTemplate呈现内容时，内容外部会有一个边距。这似乎是你在每个项目周围的白色边框得到的，所以我很确定这是发生了什么。摆脱DataTemplate最顶部网格中的边距，白色边框将消失。如果这不正确，请提供更完整的XAML示例（包括列表框的父XAML元素），因为当窗口背景为黑色时，上面的xaml本身不会产生白色边框。
< / LI>

更改ListBoxItem的颜色/样式非常简单，有几种方法可以实现。最简单的方法（在我看来）是为ItemContainerStyle添加一个触发器，用于调整MouseOver上的背景颜色。这是一个简单的例子，扩展你现有的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>

希望有所帮助。

WPF Metro Styling ListBox

1 个答案: