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

在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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法

    本文实例讲述了WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法.分享给大家供大家参考.具体方法如下: 这里首先说明一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的很多解决方案不能满足所有的情况,是有特定条件的,比如有一篇<WPF中不规则窗体与WebBrowser控件的兼容问题解决办法>(感兴趣的朋友可以自己百度一下这篇文章).该网友的解决办法也是别出心裁的,为什么这样说呢,他的webBrowser控件的是单独放在一个Form中

  • WPF的ListView控件自定义布局用法实例

    本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 <Application x:Class="CWebsSynAssistant.App" xmlns="http

  • 在WPF中动态加载XAML中的控件实例代码

    本文实例讲述了在WPF中动态加载XAML中的控件的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using S

  • 超炫酷的WPF实现Loading控件效果

    超炫酷的WPF实现Loading控件效果

    Win8系统的Loading效果还是很不错的,网上也有人用CSS3等技术实现,研究了一下,并打算用WPF自定义一个Loading控件实现类似的效果,并可以让用户对Loading的颗粒(Particle)背景颜色进行自定义,话不多说,直接上代码: 1.用VS2012新建一个WPF的用户控件库项目WpfControlLibraryDemo,VS自动生成如下结构: 2.删除UserControl1.xaml,并新建一个Loading的CustomControl(不是UserControl),如下图所示

  • WPF中引入WindowsForms控件的方法

    本文实例讲述了WPF中引入WindowsForms控件的方法.分享给大家供大家参考,具体如下: 环境: [1]WindowsXP with SP3 [2]VS2008 with SP1 正文: Step1:在现有工程中引入Windows Forms 鼠标右键[References]->选择[Add Reference]->[.NET]标签页 加入[WindowsFormsIntegration]和[System.Windows.Forms]两项 Step2:在XAML文件里加入 [S2-1]加

  • WPF实现slide控件拖动完成后改变变量值

    WPF中使slide控件拖动完成后改变变量值这个问题一开始觉得还是挺简单的,网上也看到不少解决方案. 首先一个最简单最直接的方案就是自定义一个名为FinalValue的依赖属性.随后重载OnThumbDragCompleted函数,在Thumb控件完成拖动时改写FinalValue.代码如下 public class SliderIgnoreDelta : Slider { public int FinalValue { get { return (int)GetValue(FinalValue

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

    在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式,但是WPF的ItemsControl没有相关功能的直接实现,所以只能考虑曲线救国,经过研究,大概想到了以下两种实现方式. 先写出ItemsControl的数据模板,如下: <ItemsControl ItemsSource="{Binding Source}" BorderThickness="1" BorderBrush="Blue" VerticalAlignment=&

  • C# WPF ListView控件的实例详解

    C# WPF ListView控件的实例详解 C#的WPF作为现在微软主流的桌面程序开发平台,相比过去的MFC时代,有了非常多的不同.本人刚从MFC平台转过来,以为可以轻松上手,哪知碰到了很多问题,十分不解.不得不乖乖回去看了本书,再继续回到边左边边学的路上.在这边也推荐<深入浅出WPF>这本书,拿来上手还是极好的. 由于WPF以数据驱动UI的设计理念,很多控件用起来都与之前平台的相差很多,ListView控件算是有代表性的,这是进化的成果.关于该控件的应该,很多参考了这篇博文,如觉本人记述不

  • C# WPF 父控件通过使用可视化树找到子控件的示例代码

    在我们使用WPF设计前台界面时,经常会重写数据模板,或者把控件放到数据模板里.但是一旦将控件放到数据模板中,在后台就没有办法通过控件的名字来获取它了,更没办法对它进行操作(例如,隐藏,改变控件的某个值). 如果你是比我还白的小白,对我刚刚陈述的东西不清楚,接下来我简单说一下什么是把控件放在数据模板中,怎么样的情况没法后台通过名字来获取控件,如果读者对于数据模板这些事儿已经清楚了,或者只关心如何使用可视化树可以将这部分跳过哈. 先上代码介绍一下什么是数据模板以WPF中ListBox控件为例: <L

  • C# WPF Image控件的绑定方法

    在我们平时的开发中会经常用到Image控件,通过设置Image控件的Source属性,我们可以加载图片,设置Image的source属性时可以使用相对路径也可以使用绝对路径,一般情况下建议使用绝对路径,类似于下面的形式Source="/Demo;Component/Images/Test.jpg"其中Demo表示工程的名称,后面表示具体哪个文件夹下面的哪个图片资源,在程序中,我们甚至可以为Image控件设置X:Name属性,在后台代码中动态去改变Image的Source,但我个人认为这

  • WPF常用控件用法及介绍

    WPF常用控件用法及介绍

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"> <StackPanel> <RadioButton>one</RadioButton> <RadioButton>two</RadioButton> <RadioButton>three</RadioButton> &

  • WPF基本控件介绍

    WPF基本控件介绍

    上一章讲到了布局.这点就有点类似建筑设计.第一步是出图纸.整体的结构.而第二步就是堆砌, 建筑学里面也会有很多描述, 例如砖头,水泥.玻璃.瓷板.而在WPF中, 这一切的基础也就是控件.用于填充结构的UI控件. WPF的控件结构 各种控件类型详解 ContentControl 类 设置内容的属性为 Content, 例如 控件目录下只允许设置一次Content, 如下演示给按钮添加一个Image和一个文本显示Label, 错误如下: 正确的使用方式: <!利用我们上一章说讲到的布局容器装载在其中

  • WPF滑块控件(Slider)的自定义样式

    前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出界面如下.我们点击确定. 点击确定后,我们的页面的Resources中,增加了一系列样式代码,而滑块代码会被修改为如下样子: 可以看到,系统为我们的Slider控件增加了样式--Style="{DynamicResource SliderStyle1}" 现在我们查看样式SliderSty

  • 自定义WPF分页控件的全过程记录

    自定义WPF分页控件的全过程记录

    一.分页控件功能说明# 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点击指定的列数或者上下页按钮进行页面跳转 二.自定义分页控件使用说明# 为了实现以上功能,主要进行以下工作: 1.添加一个自定义按钮PagerButton类,声明一个依赖属性IsActive,用于记录当前页面所在页数的按钮,此时该按钮边框高亮显示,具体代码如下: public class Pager

  • 基于WPF实现控件轮廓跑马灯动画效果

    基于WPF实现控件轮廓跑马灯动画效果

    代码如下 一.创建EdgeLight.xaml代码如下. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                     xmlns:controls="c

  • WPF实现控件拖动的示例代码

    实现控件拖动的基本原理是对鼠标位置的捕获,同时根据鼠标按键的按下.释放确定控件移动的幅度和时机. 简单示例: 在Grid中有一个Button,通过鼠标事件改编Button的Margin属性,从而改变Button在Grid中的相对位置. <Grid Name="gd"> <Button Width=90 Height=30 Name="btn">button</Button> </Grid> 为Button控件绑定三个事

随机推荐