wpf - ListboxItems 在鼠标悬停时使用数据模板更改颜色

Question

我有一个ListBox看起来像：

<ListBox Grid.Row="1" Margin="25" ItemsSource="{x:Static constants:AppsToInstall.AllApps}" SelectionMode="Multiple" HorizontalAlignment="Center">
   <ListBox.Resources>
      <DataTemplate DataType="{x:Type models:InstallItem}">
         <Grid x:Name="Grid">
            <Border x:Name="PART_BORDER" HorizontalAlignment="Stretch">
               <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                  <CheckBox IsChecked="{Binding CanInstall}"></CheckBox>
                  <TextBlock Margin="10 0 0 0" Text="{Binding DisplayName}"></TextBlock>
               </StackPanel>
            </Border>
         </Grid>
         <DataTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
               <Setter TargetName="Grid" Property="Background" Value="{StaticResource AccentColorBrush}"></Setter>
            </Trigger>
         </DataTemplate.Triggers>
      </DataTemplate>
   </ListBox.Resources>
</ListBox>

我添加了一个数据模板，允许我绑定到传入的项目源。

ListBoxItem尽管如此，当我将鼠标悬停在它上面时，我似乎无法让它改变整体的颜色。

请看下图：

标签： wpfxaml

Answer 1

这确实是一个编辑ListBoxItem. 这种类型是托管数据模板的容器，它还定义了鼠标悬停效果。

只需使用 Visual Studio 或 Blend提取默认控件模板。两者都将提取所需的样式和资源，您可以将其放入资源字典或控件Resources中。

<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
   <Setter Property="SnapsToDevicePixels" Value="True"/>
   <Setter Property="Padding" Value="4,1"/>
   <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
   <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
   <Setter Property="Background" Value="Transparent"/>
   <Setter Property="BorderBrush" Value="Transparent"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
               <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
               <MultiTrigger>
                  <MultiTrigger.Conditions>
                     <Condition Property="IsMouseOver" Value="True"/>
                  </MultiTrigger.Conditions>
                  <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                  <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
               </MultiTrigger>
               <MultiTrigger>
                  <MultiTrigger.Conditions>
                     <Condition Property="Selector.IsSelectionActive" Value="False"/>
                     <Condition Property="IsSelected" Value="True"/>
                  </MultiTrigger.Conditions>
                  <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                  <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
               </MultiTrigger>
               <MultiTrigger>
                  <MultiTrigger.Conditions>
                     <Condition Property="Selector.IsSelectionActive" Value="True"/>
                     <Condition Property="IsSelected" Value="True"/>
                  </MultiTrigger.Conditions>
                  <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                  <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
               </MultiTrigger>
               <Trigger Property="IsEnabled" Value="False">
                  <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

你现在要做的就是用你的颜色替换SolidColorBrushfor 。Item.MouseOver.Background然后，将此样式应用ListBoxItemStyle为ItemContainerStyle您的ListBox.

<ListBox Grid.Row="1"
         Margin="25"
         ItemsSource="{x:Static constants:AppsToInstall.AllApps}" SelectionMode="Multiple"
         HorizontalAlignment="Center"
         ItemContainerStyle="{StaticResource ListBoxItemStyle}">
   <!-- ...your XAML code. -->
</ListBox>

结果看起来像这样。