2

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

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

我的 Metro 应用程序有深色主题，我有自定义 ListBoxItem，但不知道为什么当我点击它时，它看起来像这样 在此处输入图像描述

原来使用ListView的时候是这样的 在此处输入图像描述

在我的自定义 ItemsTemplate 中添加背景颜色使其看起来像这样 在此处输入图像描述

如何摆脱白色背景并在悬停时重新设置项目的样式，因为它看起来像这样 在此处输入图像描述 在此处输入图像描述

到目前为止，这是我的列表框的 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，但我找不到办法。

4

1 回答 1

1

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

  1. 对于每个项目周围的白色边框 - 从选择项目时边框变为紫色的方式，您可以看出它是 ItemContainer 的一部分（因为这是被选中的内容）。ItemContainer 将包含每个 ListBoxItem 的内容。使用 DataTemple（或 ItemTemplate 属性）呈现内容。在您的 DataTemplate 中，最上面的网格周围有 5 个边距，这意味着当使用该 DataTemplate 呈现内容时，内容的外部将有一个边距。这似乎是你在每个项目周围的白色边框所得到的，所以我很确定这就是发生的事情。去掉 DataTemplate 最顶部网格中的边距，白色边框将消失。如果这不正确，

  2. 更改 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>

希望有帮助。

于 2012-06-25T16:47:12.857 回答