WPF集合控件实现分隔符(ItemsControl Separator)

来源：动视网责编：小采时间：2020-11-27 22:35:50

WPF集合控件实现分隔符(ItemsControl Separator)

WPF集合控件实现分隔符(ItemsControl Separator):在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式，但是WPF的ItemsControl没有相关功能的直接实现，所以只能考虑曲线救国，经过研究，大概想到了以下两种实现方式。先写出ItemsControl的数据模板，如下： <ItemsControl

推荐度：

点击下载本文 文档为doc格式

导读WPF集合控件实现分隔符(ItemsControl Separator):在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式，但是WPF的ItemsControl没有相关功能的直接实现，所以只能考虑曲线救国，经过研究，大概想到了以下两种实现方式。先写出ItemsControl的数据模板，如下： <ItemsControl

在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式，但是WPF的ItemsControl没有相关功能的直接实现，所以只能考虑曲线救国，经过研究，大概想到了以下两种实现方式。

先写出ItemsControl的数据模板，如下：

<ItemsControl ItemsSource="{Binding Source}" BorderThickness="1" BorderBrush="Blue" VerticalAlignment="Stretch">
 <ItemsControl.ItemTemplate>
 <DataTemplate>
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <Border Name="Bd" Grid.Row="0" Height="1" Background="Red" />
 <TextBlock Grid.Row="1" Text="{Binding}" />
 </Grid>
 </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

其中名为Bd的Border就是分隔符，此时每一项的头部都可以看见分隔符，现在我们的目标是要隐藏掉第一项的分隔符，这就达到了项与项之间才有分隔符的目的。

第一种实现方式最简单，使用集合项前向绑定PreviousData，这是四种绑定方式中的一种，估计也是平时用得最少的一种，不过此时就派上用场了，代码如下：

<DataTemplate.Triggers>
 <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}"
 Value="{x:Null}">
 <Setter TargetName="Bd" Property="Visibility" Value="Collapsed" />
 </DataTrigger>
</DataTemplate.Triggers>

当某一项的前项为空时就隐藏分隔符，简单的一行代码搞定。不过这种实现方式有个缺点就是如果使用的是Insert方式向绑定的数据源的最前面添加数据则就会出现不止一个没有分隔符的项，如果是往队尾或者队中添加则不会出现这个问题。

第二种实现方式是借助ItemsControl的AlternationCount和AlternationIndex属性来为集合项标记索引号，再隐藏索引号为0的项的分隔符，代码如下：

代码如下:<ItemsControl ItemsSource="{Binding Source}" BorderThickness="1" BorderBrush="Blue"
VerticalAlignment="Stretch" AlternationCount="{Binding Source.Count}">

首先在ItemsControl上绑定AlternationCount到数据源的Count属性上，然后此时ItemsControl的AlternationIndex属性就变成的该集合数据源的索引号了，在触发器中写上逻辑即可：

<Border Name="Bd" Grid.Row="0" Height="1" Background="Red">
 <Border.Style>
 <Style TargetType="{x:Type Border}">
 <Style.Triggers>
 <DataTrigger
 Binding="{Binding Path=(ItemsControl.AlternationIndex), 
 RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}"
 Value="0">
 <Setter Property="Visibility" Value="Collapsed" />
 </DataTrigger>
 </Style.Triggers>
 </Style>
 </Border.Style>
</Border>

触发器判定当索引号为0时就隐藏Border，这种方式代码量也不大，优点是能绝对实现这个功能，无论向队首插入还是队尾插入，但是AlternationCount和AlternationIndex属性本来的含义是用来实现比如隔行变色等功能，此时这种功能被占用，所以如果你的集合要同时实现分隔符和隔行样式的功能可能需要额外加转换器，不过转换器内容也很简单，求个余数就能还原之前的功能了。

这个小功能的代码参见：https://github.com/fengrui358/WPFLabs/tree/master/WpfItemsControlSplitter

WPF集合控件实现分隔符(ItemsControl Separator)

推荐度：

点击下载本文 文档为doc格式

标签：控件分隔符 WPF

热门焦点

WPF集合控件实现分隔符(ItemsControl Separator)

WPF集合控件实现分隔符(ItemsControl Separator)

WPF集合控件实现分隔符(ItemsControl Separator)

最新推荐

猜你喜欢

热门推荐