UWP ListView添加分割线

先看效果：

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

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

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

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

xaml代码

<UserControl
    x:Class="Demo.UWP.ItemViews.NewsItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Demo.UWP.ItemViews"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">
    <Border BorderBrush="#e3e3e3" BorderThickness="0,0.5,0,0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <controls:ImageEx
                Grid.Column="0"
                Width="88"
                Height="66"
                Margin="10"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                IsCacheEnabled="True"
                PlaceholderSource="{x:Bind News.PlaceholderSource}"
                PlaceholderStretch="UniformToFill"
                Source="{x:Bind News.ImgUrl}"
                Stretch="UniformToFill" />

            <Grid
                Grid.Row="0"
                Grid.Column="1"
                Margin="0,0,10,5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock
                    Grid.Row="0"
                    Grid.Column="0"
                    Margin="0,5,0,0"
                    FontSize="14"
                    Foreground="Black"
                    Text="{x:Bind News.Title}"
                    TextWrapping="Wrap" />
                <TextBlock
                    Grid.Row="1"
                    Grid.Column="0"
                    Margin="0,0,0,0"
                    FontSize="12"
                    Foreground="LightGray"
                    Text="{x:Bind News.SubTitle}"
                    TextWrapping="Wrap" />
                <TextBlock
                    Grid.Row="2"
                    Grid.Column="0"
                    Margin="0,0,0,0"
                    FontSize="12"
                    Foreground="Red"
                    Text="{x:Bind News.Price}"
                    TextWrapping="Wrap" />
            </Grid>
        </Grid>
    </Border>
</UserControl>

 

cs代码

using Demo.UWP.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace Demo.UWP.ItemViews
{
    public sealed partial class NewsItemView : UserControl
    {
        public NewsBean News => this.DataContext as NewsBean;
        public NewsItemView()
        {
            this.InitializeComponent();
            this.DataContextChanged += (s, e) => Bindings.Update();
        }
    }
}

 

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

2、定义一个ListView

    <Page.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="NewsTemplate">
                <local:NewsItemView />
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>
    <ListView
        IsItemClickEnabled="True"
        ItemContainerStyle="{StaticResource ListViewItemStyle1}"
        ItemTemplate="{StaticResource NewsTemplate}"
        ItemsSource="{x:Bind NewsList}"
        SelectionMode="None" />

ViewModel

public ObservableCollection<ItemData> NewsList { get; set; }

        public HomeViewModel()
        {
            NewsList = new ObservableCollection<ItemData>
            {
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用，建议6-7人使用，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2},
                new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C，建议6-7人使用", Price = "￥328", ItemType = 2}
            };

        }

 

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的博客】