WPF中ListView自定义选中元素样式

  在WPF中的ListView非常强大,利用各种Template可以实现许多自定义的样式与功能,今天遇到一个自定义选中样式的问题,弄了半天才找到解决方法,分享给大家。

  前台XAML代码:

 1 <ListView Grid.Row="1" Name="LV_Test" SelectionMode="Multiple" Background="{x:Null}">
 2     <ListView.Template>
 3         <ControlTemplate>
 4             <Border CornerRadius="10" BorderBrush="RoyalBlue" BorderThickness="5">
 5                 <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
 6                     <ItemsPresenter />
 7                 </ScrollViewer>
 8             </Border>
 9         </ControlTemplate>
10     </ListView.Template>
11     <ListView.ItemsPanel>
12         <ItemsPanelTemplate>
13             <WrapPanel IsItemsHost="True"/>
14         </ItemsPanelTemplate>
15     </ListView.ItemsPanel>
16     <ListView.ItemContainerStyle>
17         <Style TargetType="{x:Type ListViewItem}">
18             <Setter Property="Template">
19                 <Setter.Value>
20                     <ControlTemplate TargetType="{x:Type ListViewItem}">
21                         <Border Name="BD_Collector" CornerRadius="5" Background="DarkSeaGreen" Width="auto" Height="30" Margin="5">
22                             <Label Content="{Binding}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="13" />
23                         </Border>
24                         <ControlTemplate.Triggers>
25                             <Trigger Property="IsMouseOver" Value="True">
26                                 <Setter TargetName="BD_Collector" Property="Background" Value="YellowGreen" />
27                             </Trigger>
28                             <Trigger Property="IsSelected" Value="True">
29                                 <Setter TargetName="BD_Collector" Property="Background" Value="DarkGreen" />
30                             </Trigger>
31                         </ControlTemplate.Triggers>
32                     </ControlTemplate>
33                 </Setter.Value>
34             </Setter>
35         </Style>
36     </ListView.ItemContainerStyle>
37 </ListView>

   这里首先用到了Template模板,主要是负责最上层的显示,也就是说整个ListView的控件外观,通过此模板设置可以替换掉控件默认的外观。上面的代码定义了一个边框Boder和ScrollViewer的滚动条控件来囊括内部的数据,具体数据的内容,就由ItemsPresenter 来决定。接下来是ItemsPanel,用来设置数据展示的布局,可以为StackPanel,WrapPanel等各种方式都可以,数据内容则是对应了Template中的ItemsPresenter元素。ItemContainerStyle是实现自定义样式的最关键控件,可以自定义Style应用于为每个项生成的容器元素。我就是把数据直接通过Setter填到了这个模版里的,然后定义Trigger来响应样式改变的动作。

  好了,到了这里,我还介绍一下另一个很常用的模板,Itemtemplate,用其Datatemplate也能自定义实现数据显示的样式,可是这里需要区分的是,Itemtemplate是位于ListViewItem内部的,虽然可以实现显示样式,但是它无法获取ListViewItem本身的样式,可以认为ItemContainerStyle是更外一层的模板。

  我直接在ItemContainerStyle中定义了其Template,并设置了Controltemplate,在其中定义了数据,给需要变色的控件命名为"BD_Collector",然后通过触发器来响应选中动作。之所以把数据写在ItemContainerStyle中,而不是另外写在Itemtemplate中,是因为Setter的TargetName只能识别到当前控件内的控件,在Itemtemplate中的控件是无法用于ItemContainerStyle中的。

  对应的后台代码:

1 string id = TB_CollectorID.Text.Trim();
2 IList<int> values = new List<int>();
3 for (int i = 0; i < 100;++i )  values.Add(i);
4 LV_Test.ItemsSource = values;

  最终结果:

  如果想把这个样式应用于多个ListView,可以把ItemContainerStyle内的Style定义成资源,然后在ListView中通用ItemContainerStyle属性使用该资源即可。

  转载请注明原址:http://www.cnblogs.com/lekko/archive/2012/07/20/2600435.html 

转载于:https://www.cnblogs.com/lekko/archive/2012/07/20/2600435.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值