码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2016-11-15 17:06:08      阅读:1806      评论:0      收藏:0      [点我收藏+]

标签:round   path   emc   类型   背景色   自己   val   rri   style   

         今天使用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,导致数据没有显示。

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

标签:round   path   emc   类型   背景色   自己   val   rri   style   

原文地址:http://www.cnblogs.com/zuimengaitianya/p/6066180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!