先看效果： 我並沒有找到有設置ListView分割線的屬性 下麵是一個比較簡單的實現，如果有同學有更好的實現，歡迎留言，讓我們共同進步。我的敘述不一定准確 實現的方法就是在DataTemplate里包一個Border 1、首先自定義一個UserControl來實現佈局，文件名為ItemView.xa ...
先看效果：
我並沒有找到有設置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>View Code
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 }View Code
這裡用到了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的博客】
