一、前言

ItemsControl、ListBox、ListView这三种控件在WPF中都可作为列表信息展示控件。我们可以通过修改这三个控件的样式来展示我们的列表信息。

既然都是展示列表信息的控件，那他们有什么相同点和不同点呢。

同：

　　1、这三个控件都是列表型控件，可以进行列表绑定（ItemsSource）；

　　2、这三个控件均使用ItemsPresenter来展示列表信息；

异：

　　1、ListBox继承于ItemsControl，比ItemsControl一个Selector对象；

　　2、ListView继承于ListBox，比ListBox多一个View属性。

也就是说ItemsControl不支持列表项选择功能，ListBox支持单选、多选。ListView能以不同的视图形式展示列表信息。

下面我们通过例子来展现：

1.1、ItemsControl实现的图片选择预览控件

控件的效果如下：

下面贴上代码：

上面ItemsControl设置了ItemsPanel，由于我们的列表展示是横向的，所以设置StackPanel，并将Orientation设置为Horizontal。

里面有两个事件，添加图片UpLoadCaptrue_Click和移除图片ReMoveCaptrue_Click。代码如下：

public MainWindow(){      InitializeComponent();      this.itemsControl.ItemsSource = Capture;}public ObservableCollection
     
       Capture = new ObservableCollection
      
       ();/// 
       
/// 上传截图/// 
/// 
       /// 
       private void UpLoadCaptrue_Click(object sender, MouseButtonEventArgs e){      OpenFileDialog logoSelected = new OpenFileDialog();      logoSelected.Filter = "图片|*.jpg;*.png;*.bmp;*.gif";      if (logoSelected.ShowDialog() ==true)      {           Capture.Add(logoSelected.FileName);      }}/// 
       
/// 移除截图/// 
/// 
       /// 
       private void ReMoveCaptrue_Click(object sender, MouseButtonEventArgs e){      Capture.Remove(((Image)sender).DataContext.ToString());}
      
     

 控件中用到的素材：

 

1.2、基于ListBox实现用户列表展示

下面的实例一般用于通讯软件用户列表展示。主要是通过修改ListBoxItem的样式来实现。

先看下实现的效果：

大体思路：先定义ListBoxStyle，定义ListBox的Style是为了实现去掉列表项的间隙，默认的ListBox里面有Padding值。我们把Padding改为0；然后定义ListBoxItem项的Style样式，因为我们是通过绑定数据的方式呈现，因此对于需要动态显示的值我们把它放到一个类中。

public List
     
       UserList { get; set; } public class UserInfo{         public Brush UserBackground { get; set; }         public string Header { get; set; }         public string Name { get; set; }         public string Info { get; set; }         public int Count { get; set; }}
     

ListBoxItem样式代码如下：

ListBox样式代码如下：

后台C#代码初始化数据，及设定数据源：

UserList = new List
     
      ()            {                new UserInfo(){                    UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9f4c")),                    Header="群",                    Name="DESKTOP-0N",                    Info="我要像风一样自由!",                    Count=3                },                new UserInfo(){                     UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9f4c")),                    Header="张",                    Name="张三丰",                    Info="我要像风一样自由!",                    Count=5                },                new UserInfo(){                     UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#9d9d9d")),                    Header="鬼",                    Name="鬼见愁",                    Info="我要像风一样自由!",                    Count=2                },            };            this.UserInfoList.ItemsSource = UserList;
     

1.3、ListBoxView列表信息展示

ListBoxView信息展示有点像DataGrid控件，以下为ListBoxView基本样式代码：

引用示例：

后台代码需要给ListBoxView绑定数据：

public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();            ListViewDataList = new List
     
      ();            for (int i = 0; i < 10; i++)            {                ListViewDataList.Add(new ListViewData()                {                    Num = i,                    Name = "No_" + i.ToString(),                    Template="Temlate:"+i.ToString()                });            }            this.ListView.ItemsSource = ListViewDataList;        }        public List
      
        ListViewDataList { get; set; }        public class ListViewData        {            public int Num { get; set; }            public string Name { get; set; }            public string Template { get; set; }        }    }
      
     

 效果图：

 

所有代码已经上传到github：