先看效果：

我并没有找到有设置ListView分割线的属性

下面是一个比较简单的实现，如果有同学有更好的实现，欢迎留言，让我们共同进步。我的叙述不一定准确

实现的方法就是在DataTemplate里包一个Border

 1、首先自定义一个UserControl来实现布局，文件名为ItemView.xaml，代码如下

xaml代码

1 
      
       12     
       
        13         
        
         14             
         
          15                 
          16                 
          17             
         18             
         
          19                 
          20             
         21             
         33 34             
         
          38                 
          
           39                     
           40                 
          41                 
          
           42                     
           43                     
           44                     
           45                 
          46                 
          54                 
          62                 
          70             
         
        71         72     
       73 
      

 

cs代码

1 using Demo.UWP.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.IO; 5 using System.Linq; 6 using System.Runtime.InteropServices.WindowsRuntime; 7 using Windows.Foundation; 8 using Windows.Foundation.Collections; 9 using Windows.UI.Xaml;10 using Windows.UI.Xaml.Controls;11 using Windows.UI.Xaml.Controls.Primitives;12 using Windows.UI.Xaml.Data;13 using Windows.UI.Xaml.Input;14 using Windows.UI.Xaml.Media;15 using Windows.UI.Xaml.Navigation;16 17 // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=23423618 19 namespace Demo.UWP.ItemViews20 {21     public sealed partial class NewsItemView : UserControl22     {23         public NewsBean News => this.DataContext as NewsBean;24         public NewsItemView()25         {26             this.InitializeComponent();27             this.DataContextChanged += (s, e) => Bindings.Update();28         }29     }30 }

 

这里用到了x:Bind，需要知道绑定数据的类型，将DataContext转换为NewsBean对象，（=>其实就是定义属性的简写）

2、定义一个ListView

1     
     
       2         
      
        3             
       
         4                 
         5             
        6         
       7     
      8     
     

ViewModel

1 public ObservableCollection
     
       NewsList { get; set; } 2  3         public HomeViewModel() 4         { 5             NewsList = new ObservableCollection
      
        6             { 7                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2}, 8                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用，建议6-7人使用，建议6-7人使用", Price = "￥328", ItemType = 2}, 9                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},10                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},11                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},12                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},13                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},14                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},15                 new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2}16             };17 18         }
      
     

 

3、发现了一个问题，分割线没有撑满，怎么办呢？

更改ItemContainerStyle

　　

 转载请标明出处：，本文出自：【】