WPF 列表框。样式无法正常工作

Question

我的 WPF 列表框有问题（请参见下面的代码）。当鼠标悬停或选择项目时，我正在尝试更改列表框项目的背景和前景，但它不起作用，我不知道为什么。

<ListBox x:Name="ListBoxSnapshots" ItemsSource="{Binding DevicesImageList}" SelectedIndex="{Binding WebcamSelected}" BorderThickness="0" SelectionMode="Single" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" SelectionChanged="ListBoxSnapshots_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#FFBCBCBC"/>
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Background" Value="#FFD3D3D3"/>
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#FFD3D3D3"/>
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
            <Trigger Property="IsSelected" Value="false">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
    <DataTemplate>
        <Border BorderThickness="2" BorderBrush="DarkGray">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Path=theImage}" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="142" Height="80"/>
                <Canvas Width="142" Height="80" Margin="-142,0,0,0">
                    <Image Source="/MyApp;component/Images/snapshot-whitetriangle.png" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                    <Label FontSize="8" Content="{Binding Path=theImageIndex}" Foreground="DarkGray" FontWeight="DemiBold" Canvas.Top="61" Canvas.Left="110" HorizontalAlignment="Center" VerticalAlignment="Top" Width="34" Height="24" VerticalContentAlignment="Top" HorizontalContentAlignment="Right" />
                </Canvas>
            </StackPanel>
        </Border>
    </DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

我的列表框如下图所示。

所选项目的边框不是我使用样式应用的颜色。

谢谢，

Answer 1

好吧，不幸的是，这并不容易……您需要更改默认的 ControlTemplate 或 ListBoxItem。基于this answer，我试图让它看起来像我认为你想要的那样。最重要的元素在<Setter Property="Template"> setter 中。

<Style TargetType="{x:Type ListBoxItem}">
  <Setter Property="SnapsToDevicePixels" Value="True" />
  <Setter Property="Padding" Value="4,1" />
  <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment,
                  RelativeSource={RelativeSource FindAncestor,
                                                 AncestorLevel=1,
                                                 AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment,
                  RelativeSource={RelativeSource FindAncestor,
                                                 AncestorLevel=1,
                                                 AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="Background"
      Value="Transparent" />
  <Setter Property="BorderBrush"
      Value="Transparent" />
  <Setter Property="BorderThickness"
      Value="1" />
  <Setter Property="FocusVisualStyle">
    <Setter.Value>
      <Style>
        <Setter Property="Control.Template">
          <Setter.Value>
            <ControlTemplate>
              <Rectangle Margin="2"
                  SnapsToDevicePixels="True"
                  Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                  StrokeDashArray="1 2"
                  StrokeThickness="1" />
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListBoxItem}">
        <Border x:Name="Bd"
            Background="White"
            BorderBrush="DarkGray"
            BorderThickness="{TemplateBinding BorderThickness}"
            Padding="{TemplateBinding Padding}"
            SnapsToDevicePixels="True">
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
              Content="{TemplateBinding Content}"
              ContentStringFormat="{TemplateBinding ContentStringFormat}"
              ContentTemplate="{TemplateBinding ContentTemplate}"
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
        </Border>
        <ControlTemplate.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsMouseOver"
                  Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                Property="Background"
             Value="#FFBCBCBC" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Selector.IsSelectionActive"
                  Value="False" />
              <Condition Property="IsSelected"
                  Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                Property="Background"
                Value="#FFD3D3D3" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Selector.IsSelectionActive"
                  Value="True" />
              <Condition Property="IsSelected"
                  Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                Property="Background"
                Value="#FFD3D3D3" />
          </MultiTrigger>
          <Trigger Property="IsEnabled"
              Value="False">
            <Setter TargetName="Bd"
                Property="TextElement.Foreground"
                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>