WPF 修改 ItemContainerStyle 滑鼠移動到未選中項效果和選中項背景
摘要：
本文告訴大家如何通過修改 ItemContainerStyle 讓 ListView 或 ListBox 的選擇效果如滑鼠移動到未選中項的效果或選擇項的背景
先寫一些簡單的程式碼用於介面的繫結
public partial class MainWindow : Window
{...
本文告訴大家如何通過修改 ItemContainerStyle 讓 ListView 或 ListBox 的選擇效果如滑鼠移動到未選中項的效果或選擇項的背景
先寫一些簡單的程式碼用於介面的繫結
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
Items = new List<Item> { new Item(1), new Item(2), new Item(3) };
}
public List<Item> Items { get; set; }
}
public class Item
{
public Item(int id)
{
Id = id;
}
public int Id { get; set; }
public string Text { get => $"This is Item number {Id}"; }
}
在介面放一個 ListView 預設在滑鼠移動到沒有被選擇的項的時候會出現背景
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate DataType="local:Item">
<StackPanel>
<TextBlock Text="{Binding Id}" />
<TextBlock Text="{Binding Text}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
通過寫樣式在 ItemContainerStyle 可以讓 ListView 的在滑鼠移動到未選擇項的特效的顏色修改
<!-- set SelectedBackgroundColor to Transparent when you do not need the background in selected items --> <Color x:Key="SelectedBackgroundColor">#00FFFFFF</Color> <Color x:Key="SelectedUnfocusedColor">#FFB2A3A2</Color> <!-- set the MouseOverColor to Transparent when you do not need the effect in the unselected items --> <Color x:Key="MouseOverColor" >#00FFFFFF</Color> <Style x:Key="ListViewItemStyle" TargetType="ListViewItem"> <Setter Property="SnapsToDevicePixels" Value="true" /> <Setter Property="OverridesDefaultStyle" Value="true" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver" > <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background). (SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled" /> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected" /> <VisualState x:Name="Selected"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background). (SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" /> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedUnfocused"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background). (SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" /> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
可以直接使用上面的程式碼，如果想要讓使用者看不到滑鼠移動到未選中項的特效可以設定 MouseOverColor 為透明，通過設定 SelectedBackgroundColor 可以讓選中項的背景修改
因為顏色在 WPF 使用 #AARRBBGG 表示，如上面程式碼設定了 #00FFFFFF 就是透明，因為第一個 Alpha 為 0 也就是透明
在 ListView 使用剛才寫的樣式，執行程式碼可以看到下面圖片
<ListView ItemsSource="{Binding Items}"
ItemContainerStyle="{StaticResource ListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate DataType="local:Item">
<StackPanel>
<TextBlock Text="{Binding Id}" />
<TextBlock Text="{Binding Text}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ofollow,noindex" target="_blank">https://stackoverflow.com/a/53557393/6116637