WPF 自定义ItemsControl/ListBox/ListView控件样式

扣扣技术交流群：460189483 

一、前言

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; }
}

 

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; }
        }

    }

效果图：