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

Question

I've a problem with a WPF ListBox ( See code bellow ). I'm trying to change the background and foreground for the listBox items when the mouse is over or when the item is selected but it doesn't work and I don't know why.

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

My listBox looks like the following picture.

The border of the Item selected has not the color that I have applied using Style.

Thanks,

Answer 1

Well, unfortunately it's not so easy... You need to change default ControlTemplate of ListBoxItem . Basing on this answer I've tried to make it look as i thought you wanted it to look. The most important elements are in <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>