wpf ListView DataTemplate方式的鼠標懸停和選中更改背景色

本文轉載自查看原文 2016-11-15 16:13 1475 DataTemplate/ wpf/ 背景色

今天使用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，導致數據沒有顯示。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用鼠標監聽器，使鼠標懸停在JTable某行時背景色改變 WP/UWP設置ListView、ListBox選中、鼠標懸停背景/樣式 Bootstrap3基礎 table-bordered/hover 表格加外邊框和鼠標懸停對應行的背景色加深 Android美工坊--listview更改選中時item背景色 ListView單擊、選中、時改變Item背景色 wpf后台更改Textblock背景顏色&當鼠標懸停於控件時修改鼠標樣式&去掉Windows窗體外邊框方法鼠標懸停，背景顏色變化問題 Android ListView的item背景色設置 vue項目-更改el-tree根據主題色變化，變更選中節點的顏色和背景色 WPF ListBox 子控件選中時設置背景色和邊框自定義樣式