列表框選定的項目背景顏色

Question

試圖使列表框中的選項卡控件。如果listboxitems只是文本，那麼很容易看到選中哪個選項卡，但只要我將圖像/路徑添加爲listboxitem的內容，就不會再將它顯示爲單擊時被選中。下面的唯一項目顯示何時被選中是「Hello World」項目。我只想讓選項卡的背景在選中時更改顏色。

<ListBox> 
<ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBoxItem> 
      <Canvas Width="53.3333" Height="53.3333"> 
       <Path Width="4.22434" Height="4.224" Stretch="Fill" Fill="#FF000000" Data="..."/>    
      </Canvas> 
     </ListBoxItem> 
     <ListBoxItem> 
      <ListBoxItem.Content> 
       <Canvas Width="46.6667" Height="45.3333"> 
        <Path Width="46.3232" Height="43.9357" 
          Canvas.Left="0.51729" 
          Canvas.Top="1.06295" 
          Stretch="Fill" 
          Fill="#FF000000" 
          Data="..." 
       </Canvas> 
      </ListBoxItem.Content> 
     </ListBoxItem> 
     <ListBoxItem Content="Hello World"> 
     </ListBoxItem> 
    </ListBox> 

Answer 1

我剛剛爲我的一個應用程序使用ListView做了這個。它應該與ListBox類似，但你可能想使用ListView，因爲它們是相似的，我知道它的工作原理。您需要修改樣式以設置SelectedBackground和SelectedPointerOverBackground顏色。我將它們設置爲下面樣式的藍色。

 <Style x:Key="ListViewItemTabStyle" TargetType="ListViewItem"> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
      <Setter Property="FontSize" Value="30" /> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="TabNavigation" Value="Local"/> 
      <Setter Property="IsHoldingEnabled" Value="True"/> 
      <Setter Property="Margin" Value="0,0,0,0"/> 
      <Setter Property="HorizontalContentAlignment" Value="Left"/> 
      <Setter Property="VerticalContentAlignment" Value="Center"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListViewItem"> 
        <ListViewItemPresenter 
        ContentTransitions="{TemplateBinding ContentTransitions}" 
        Padding="{TemplateBinding Padding}" 
        SelectionCheckMarkVisualEnabled="False" 
        CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
        CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
        CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
        DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
        PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
        SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" 
        SelectedBackground="Blue" 
        SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" 
        SelectedPointerOverBackground="Blue" 
        SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
        PointerOverBackgroundMargin="1" 
        ContentMargin="4" /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

然後設置樣式爲您的ListView這樣的：

<ListView ItemContainerStyle="{StaticResource ResourceKey=ListViewItemTabStyle}" Background="Gray" SelectedIndex="0"> 
    <ListViewItem Content="Item1"/> 
    <ListViewItem Content="Item2"/> 
    <ListViewItem Content="Item3"/> 
</ListView>