UWP ListView添加分割线
先看效果:
我并没有找到有设置ListView分割线的属性
下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步。我的叙述不一定准确
实现的方法就是在DataTemplate里包一个Border
1、首先自定义一个UserControl来实现布局,文件名为ItemView.xaml,代码如下
xaml代码
1 <UserControl
2 x:Class="Demo.UWP.ItemViews.NewsItemView"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:local="using:Demo.UWP.ItemViews"
8 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9 d:DesignHeight="300"
10 d:DesignWidth="400"
11 mc:Ignorable="d">
12 <Border BorderBrush="#e3e3e3" BorderThickness="0,0.5,0,0">
13 <Grid>
14 <Grid.ColumnDefinitions>
15 <ColumnDefinition Width="Auto" />
16 <ColumnDefinition Width="*" />
17 </Grid.ColumnDefinitions>
18 <Grid.RowDefinitions>
19 <RowDefinition Height="Auto" />
20 </Grid.RowDefinitions>
21 <controls:ImageEx
22 Grid.Column="0"
23 Width="88"
24 Height="66"
25 Margin="10"
26 HorizontalAlignment="Center"
27 VerticalAlignment="Center"
28 IsCacheEnabled="True"
29 PlaceholderSource="{x:Bind News.PlaceholderSource}"
30 PlaceholderStretch="UniformToFill"
31 Source="{x:Bind News.ImgUrl}"
32 Stretch="UniformToFill" />
33
34 <Grid
35 Grid.Row="0"
36 Grid.Column="1"
37 Margin="0,0,10,5">
38 <Grid.ColumnDefinitions>
39 <ColumnDefinition Width="*" />
40 </Grid.ColumnDefinitions>
41 <Grid.RowDefinitions>
42 <RowDefinition Height="Auto" />
43 <RowDefinition Height="Auto" />
44 <RowDefinition Height="Auto" />
45 </Grid.RowDefinitions>
46 <TextBlock
47 Grid.Row="0"
48 Grid.Column="0"
49 Margin="0,5,0,0"
50 FontSize="14"
51 Foreground="Black"
52 Text="{x:Bind News.Title}"
53 TextWrapping="Wrap" />
54 <TextBlock
55 Grid.Row="1"
56 Grid.Column="0"
57 Margin="0,0,0,0"
58 FontSize="12"
59 Foreground="LightGray"
60 Text="{x:Bind News.SubTitle}"
61 TextWrapping="Wrap" />
62 <TextBlock
63 Grid.Row="2"
64 Grid.Column="0"
65 Margin="0,0,0,0"
66 FontSize="12"
67 Foreground="Red"
68 Text="{x:Bind News.Price}"
69 TextWrapping="Wrap" />
70 </Grid>
71 </Grid>
72 </Border>
73 </UserControl>
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=234236
18
19 namespace Demo.UWP.ItemViews
20 {
21 public sealed partial class NewsItemView : UserControl
22 {
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 <Page.Resources>
2 <ResourceDictionary>
3 <DataTemplate x:Key="NewsTemplate">
4 <local:NewsItemView />
5 </DataTemplate>
6 </ResourceDictionary>
7 </Page.Resources>
8 <ListView
9 IsItemClickEnabled="True"
10 ItemContainerStyle="{StaticResource ListViewItemStyle1}"
11 ItemTemplate="{StaticResource NewsTemplate}"
12 ItemsSource="{x:Bind NewsList}"
13 SelectionMode="None" />
ViewModel
1 public ObservableCollection<ItemData> NewsList { get; set; }
2
3 public HomeViewModel()
4 {
5 NewsList = new ObservableCollection<ItemData>
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
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem"
<!--去除默认边距-->
<Setter Property="Padding" Value="0" />
<!--让宽度撑满-->
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
转载请标明出处:http://www.cnblogs.com/xiaocaidev/p/6995743.html,本文出自:【xiaocaidev的博客】
UWP ListView添加分割线的更多相关文章
- UWP ListView添加不同样式
先看效果: 使用ListView的ItemTemplateSelector <ListView IsItemClickEnabled="True" ItemContainer ...
- 仿喜马拉雅实现ListView添加头布局和脚布局
ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...
- Android listview自定义分割线宽度
代码很简单防止以后忘记 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:an ...
- android listview去掉分割线
1:android listview去掉分割线 1>设置android:divider="@null" 2>android:divider="#0000000 ...
- ListView添加项目带序列
ListView添加项目带序列 function AddSelItems(listview1:TListView;ListView2:TListView):Boolean;var s: st ...
- 为ListView添加头和脚
转自:https://software.intel.com/zh-cn/blogs/2014/12/15/android-listview-addheaderview-addfooterview ...
- 【转】三十三、Android给ListView设置分割线Divider样式
原文网址:http://www.cnblogs.com/linjiqin/archive/2011/11/12/2246349.html 给ListView设置分割线,只需设置如下两个属性: andr ...
- Android给ListView设置分割线Divider样式
给ListView设置分割线,只需设置如下两个属性: android:divider="#000" //设置分割线显示颜色 android:dividerHeight=" ...
- 自定义listView添加滑动删除功能
今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...
随机推荐
- 如何用OCR文字识别软件将PDF转换成Excel
最近老板老是让小编处理PDF文件,这OCR识别软件咱也不懂,也不敢问,只能一字一字的码在Excel上,但是这波操作效率不高,还没完成任务,老板又发了一堆PDF文件需要处理,怎么办呢? 跟朋友说了这事后 ...
- 下载器Folx专业版有没有iTunes整合功能
对于使用Mac系统的用户来说,相信对iTunes都不陌生.Folx专业版提供的iTunes整合功能,能将下载的音频.电影等文件自动同步到iTunes. 该功能将会有助于用户的音频.视频整合,对于喜欢听 ...
- css3系列之伪类选择器
Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:n ...
- P6823 「EZEC-4」zrmpaul Loves Array
发现进行一次排序后先前的操作都无效了,所以只需做最后一次排序后的操作.翻转操作打个翻转标记,互换操作根据翻转标记即可. 时间复杂度 \(O\left(n+m\right)\). code: #incl ...
- kafka 副本机制和容错处理 -2
文章来源于本人的印象笔记,如出现格式问题可访问该链接查看原文 原创声明:作者:Arnold.zhao 博客园地址:https://www.cnblogs.com/zh94 副本机制 Kafka的副本机 ...
- 基于CefSharp开发(四)浏览器文件下载
一.CefSharp文件下载分析 查看ChromiumWebBrowser类发现cef数据下载处理在IDownloadHandler中进行,但并未找到相应的实现类,故我们需要自己实现DownloadH ...
- 对于Web开发最棒的22个Visual Studio Code插件
翻译 原文作者:James Quick 原文地址:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for- ...
- 记一次MySQL出现Waiting for table metadata lock的原因、排查过程与解决方法
任务背景:将sql文件通过shell直接导入到mysql中执行(还原) bug表现:导入后java项目卡死 过程: 1.网上乱搜一通,无意间看到一篇文章,这篇文章说明了如何开启mysql的genera ...
- 第15.35节 PyQt编程实战:结合QDial实现的QStackedWidget堆叠窗口程序例子
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.案例说明 本案例是老猿在学习QStackedWidget中的一个测试案例,该案例使用QStack ...
- flask中migrate和scipt进行连用
近期态度消极了,并且还忙着学php,所以可能flask框架的进度不会像之前那么快了.但是还是要保证跟之前高的质量滴.