wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色

Posted 2020-08-19 醉梦ai天涯

         今天使用wpf技术弄一个ListView的时候，由于需求需要，需要ListView显示不同的数据模板，很自然的使用了DataTemplate方式来定义多个数据模板，并在ListView中使用ItemTemplateSelector绑定模板。添加上数据源显示后数据显示根据数据的类型不同显示了不同的数据模板，这很符合我的需求，但是当我把鼠标悬停到ListView和选中一行数据时，惊讶的发现ListView还是显示自带的背景色，简直丑哭了，不能忍，我要自定义鼠标悬停和选中的背景色。

       通过一上午的忙碌才发现，原来ListView里是由多个ListViewItem包含DataTemplate方式来显示数据的，因此我们需要先设置ListViewItem的BorderThickness和Padding大小为0，再接着DataTemplate设置为背景色。实现代码如下：

   

 1 <DataTemplate x:Key="MessageDataTemplateLeft">
 2         
 3         <Grid x:Name="messageGrid" >
 4             <Grid.Resources>
 5                 <Common:ConcatImageExtensionConverter x:Key="ConcatImageExtensionConverter"/>
 6             </Grid.Resources>
 7             <Grid.RowDefinitions>
 8                 <RowDefinition Height="auto"/>
 9             </Grid.RowDefinitions>
10             <Grid.ColumnDefinitions>
11                 <ColumnDefinition Width="auto"/>
12                 <ColumnDefinition Width="*"/>
13             </Grid.ColumnDefinitions>
14             <Grid Grid.Row="0" Grid.Column="0">
15                 <Ellipse Width="45" Height="45">
16                     <Ellipse.Fill>
17                         <ImageBrush ImageSource="{Binding Path=FromMailAccount,Converter={StaticResource ConcatImageExtensionConverter}}"></ImageBrush>
18                     </Ellipse.Fill>
19                 </Ellipse>
20             </Grid>
21             <Grid Grid.Row="0" Grid.Column="1">
22                 <Border Margin="10,0,40,0" Background="#00CD00" CornerRadius="10" HorizontalAlignment="Left">
23                     <TextBlock TextWrapping="Wrap" Text="{Binding Path=MessageContent}" Padding="10"/>
24                 </Border>
25                 <Viewbox HorizontalAlignment="Left" Margin="2,5" Height="19" VerticalAlignment="Top" Width="13.5">
26                     <Path Data="M32.4762,3.74901 C28.1542,4.60015 20.7241,2.92959 13.75,0.75 C15.5005,7.13589 28.4124,17.9116 29.5357,17.4874" Fill="#00CD00"  Stretch="Fill" Stroke="#00CD00" UseLayoutRounding="False" />
27                 </Viewbox>
28             </Grid>
29         </Grid>
30         <DataTemplate.Triggers>
31             <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="True">
32                 <Setter TargetName="messageGrid" Property="Background" >
33                     <Setter.Value>
34                         <SolidColorBrush Color="White" />
35                     </Setter.Value>
36                 </Setter>
37             </DataTrigger>
38             <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="True">
39                 <Setter TargetName="messageGrid" Property="Background" >
40                     <Setter.Value>
41                         <SolidColorBrush Color="White" />
42                     </Setter.Value>
43                 </Setter>
44             </DataTrigger>
45         </DataTemplate.Triggers>
46     </DataTemplate>
47     <DataTemplate x:Key="MessageDataTemplateRight">
48         <Grid x:Name="messageGrid">
49             <Grid.Resources>
50                 <Common:ConcatImageExtensionConverter x:Key="ConcatImageExtensionConverter"/>
51             </Grid.Resources>
52             <Grid.RowDefinitions>
53                 <RowDefinition Height="auto"/>
54             </Grid.RowDefinitions>
55             <Grid.ColumnDefinitions>
56                 <ColumnDefinition Width="*"/>
57                 <ColumnDefinition Width="auto"/>
58             </Grid.ColumnDefinitions>
59             <Grid Grid.Row="0" Grid.Column="0">
60                 <Border Margin="40,0,10,0" Background="#00CD00" CornerRadius="10" HorizontalAlignment="Right">
61                     <TextBlock TextWrapping="Wrap" Text="{Binding Path=MessageContent}" Padding="10"/>
62                 </Border>
63                 <Viewbox HorizontalAlignment="Right" Margin="2,5" Height="19" VerticalAlignment="Top" Width="13.5" RenderTransformOrigin="0.5,0.5">
64                     <Viewbox.RenderTransform>
65                         <ScaleTransform ScaleX="-1"/>
66                     </Viewbox.RenderTransform>
67                     <Path Data="M32.4762,3.74901 C28.1542,4.60015 20.7241,2.92959 13.75,0.75 C15.5005,7.13589 28.4124,17.9116 29.5357,17.4874" Fill="#00CD00"  Stretch="Fill" Stroke="#00CD00" UseLayoutRounding="False" />
68                 </Viewbox>
69             </Grid>
70             <Grid Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right">
71                 <Ellipse Width="45" Height="45">
72                     <Ellipse.Fill>
73                         <ImageBrush ImageSource="{Binding Path=FromMailAccount,Converter={StaticResource ConcatImageExtensionConverter}}"></ImageBrush>
74                     </Ellipse.Fill>
75                 </Ellipse>
76             </Grid>
77         </Grid>
78         <DataTemplate.Triggers>
79             <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="True">
80                 <Setter TargetName="messageGrid" Property="Background" >
81                     <Setter.Value>
82                         <SolidColorBrush Color="White" />
83                     </Setter.Value>
84                 </Setter>
85             </DataTrigger>
86             <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="True">
87                 <Setter TargetName="messageGrid" Property="Background" >
88                     <Setter.Value>
89                         <SolidColorBrush Color="White" />
90                     </Setter.Value>
91                 </Setter>
92             </DataTrigger>
93         </DataTemplate.Triggers>
94     </DataTemplate>

资源数据模板文件

 1 public class MessageItemDataTemplateSelector : DataTemplateSelector
 2     {
 3         public override DataTemplate SelectTemplate(object item, DependencyObject container)
 4         {
 5             var tempItem = item as ChatMessage;
 6 
 7             if (tempItem.MessageType == MessageType.Incoming)
 8             {
 9                 return App.Current.Resources["MessageDataTemplateLeft"] as DataTemplate;
10             }
11             else
12             {
13                 return App.Current.Resources["MessageDataTemplateRight"] as DataTemplate;
14             }
15         }
16     }

模板选择器代码

<Page.Resources>
        <Common:MessageItemDataTemplateSelector x:Key="MessageItemDataTemplateSelector"/>
    </Page.Resources>
    <Grid>
        <ListView x:Name="chatListView" ItemTemplateSelector="{StaticResource MessageItemDataTemplateSelector}" 
                  Background="Transparent">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="BorderThickness" Value="0"/>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Grid>

前台代码

由上面设置即可设置鼠标悬停和选择样式，我先设置为白色背景了。根据自己需求设置背景色。

同时注意：在使用数据模板样式选择器时，不能设置ItemContainerStyle的属性值，如果设置了该值，那么数据模板样式选择器会失去作用。

即在ItemContainerStyle里不能再次设置Template不然会被覆盖掉DataTemplate，导致数据没有显示。