Extend default ItemContainerStyle of the WPF ListBox (alternating background, highlight selected row)

Dạo này mình đụng lung tung thứ. Lâu ngày ngó vào WPF, chỉnh cái style cho ListBox. Ngồi kiếm lại cái default style của ListBox. Mình không phải dân design cũng ko có xài MS Blend. Cứ thử và sai thôi :D.

Xem thêm ở đây
https://wpf.2000things.com/2014/10/23/1186-default-itemcontainerstyle-for-a-listbox/

<Style x:Key="lbDefaultItemContainerStyle" 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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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>

Colors

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#A826A0DA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>

Dựa vào style và mấy color này điều chỉnh thêm cho alternative row, scale font khi focus ...

<Style x:Key="FocusVisual">
 <Setter Property="Control.Template">
  <Setter.Value>
   <ControlTemplate>
    <Rectangle Margin="2" SnapsToDevicePixels="true" 
     Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" 
     StrokeThickness="1" StrokeDashArray="1 2"/>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>
<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"/>

<Style x:Key="AlternatingListViewItemStyle" TargetType="{x:Type ListViewItem}">
 <Setter Property="SnapsToDevicePixels" Value="True"/>
 <Setter Property="Padding" Value="4"/>
 <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}"/>
 <Style.Triggers>
  <Trigger Property="ItemsControl.AlternationIndex" Value="0">
   <Setter Property="Background" Value="#FFD9F2BF"/>
  </Trigger>
  <Trigger Property="ItemsControl.AlternationIndex" Value="1">
   <Setter Property="Background" Value="White"/>
  </Trigger>
  <MultiTrigger>
   <MultiTrigger.Conditions>
    <Condition Property="IsSelected" Value="True"/>
    <Condition Property="ItemsControl.AlternationIndex" Value="0"/>
   </MultiTrigger.Conditions>
   <Setter Property="Background" Value="LightGreen"/>
  </MultiTrigger>
  <MultiTrigger>
   <MultiTrigger.Conditions>
    <Condition Property="IsSelected" Value="True"/>
    <Condition Property="ItemsControl.AlternationIndex" Value="1"/>
   </MultiTrigger.Conditions>
   <Setter Property="Background" Value="{StaticResource Item.SelectedActive.Background}"/>
   <Setter Property="BorderBrush" Value="{StaticResource Item.SelectedActive.Border}"/>
  </MultiTrigger>
  <Trigger Property="IsMouseOver" Value="True">
   <Setter Property="LayoutTransform">
    <Setter.Value>
     <ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
    </Setter.Value>
   </Setter>
   <Setter Property="FontWeight" Value="SemiBold"/>                        
   <Setter Property="Background" Value="{StaticResource Item.MouseOver.Background}"/>
   <Setter Property="BorderBrush" Value="{StaticResource Item.MouseOver.Border}"/>
  </Trigger>
 </Style.Triggers>
</Style>