WPF 控件 (十九、列表)

一、ListBox、ListView、ItemsControl

相同点：

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

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

不同点：

控件层次关系：

ItemsControl:

System.Object
　　System.Windows.Threading.DispatcherObject
　　　　System.Windows.DependencyObject
　　　　　　System.Windows.Media.Visual
　　　　　　　　System.Windows.UIElement
　　　　　　　　　　System.Windows.FrameworkElement
　　　　　　　　　　　　System.Windows.Controls.Control
　　　　　　　　　　　　　　System.Windows.Controls.ItemsControl

ListBox:

System.Object
　　System.Windows.Threading.DispatcherObject
　　　　System.Windows.DependencyObject
　　　　　　System.Windows.Media.Visual
　　　　　　　　System.Windows.UIElement
　　　　　　　　　　System.Windows.FrameworkElement
　　　　　　　　　　　　System.Windows.Controls.Control
　　　　　　　　　　　　　　System.Windows.Controls.ItemsControl
　　　　　　　　　　　　　　　　System.Windows.Controls.Primitives.Selector
　　　　　　　　　　　　　　　　　　System.Windows.Controls.ListBox

ListBox 继承于ItemsControl，增加了一个Selector对象，ItemsControl中的Item是不支持选择的。而ListBox中Item是支持选择，并且可以单选，多选。

ListView:

System.Object
　　System.Windows.Threading.DispatcherObject
　　　　System.Windows.DependencyObject
　　　　　　System.Windows.Media.Visual
　　　　　　　　System.Windows.UIElement
　　　　　　　　　　System.Windows.FrameworkElement
　　　　　　　　　　　　System.Windows.Controls.Control
　　　　　　　　　　　　　　System.Windows.Controls.ItemsControl
　　　　　　　　　　　　　　　　System.Windows.Controls.Primitives.Selector
　　　　　　　　　　　　　　　　　　System.Windows.Controls.ListBox
　　　　　　　　　　　　　　　　　　　　System.Windows.Controls.ListView

ListView继承与ListBox，增加了一个View依赖属性。

ItemsControl是不包含水平和垂直方向的滚动条的。ListBox和ListView有水平和垂直方向滚动条。

ItemControl的样式：

二、效果

三、xaml

<UserControl x:Class="lyrics.ui.Demo.List.ListUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:lyrics.ui.Demo.List"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
   
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <TextBlock Text="ListBox"/>
            <ListBox ItemsSource="{Binding NameList}"/>
        </StackPanel>
        <StackPanel Grid.Column="1">
            <TextBlock Text="ListView"/>
            <ListView ItemsSource="{Binding UserInfos}" Margin="10">
                <ListView.Resources>
                    <Style TargetType="{x:Type GridViewColumnHeader}">
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                    </Style>
                </ListView.Resources>
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="选中" DisplayMemberBinding="{Binding Check}" Width="50"/>
                        <GridViewColumn  Header="序号" DisplayMemberBinding="{Binding Index}"  Width="50"/>
                        <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"  Width="50"/>
                        <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
                    </GridView>
                </ListView.View>

            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="2">
            <TextBlock Text="ListView"/>
            <ListView ItemsSource="{Binding UserInfos}" Margin="10">
                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}">
                        <Setter Property="FontSize" Value="13"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="Background" Value="Black"/>
                        <Setter Property="BorderBrush">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                    <GradientStop Color="Gray" Offset="0.5"/>
                                    <GradientStop Color="Coral" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderThickness" Value="0,0,0,0.4"/>
                        <Setter Property="Height" Value="35"/>
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" Value="gray" />
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" Value="gray" />
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.Resources>
                    <Style TargetType="{x:Type GridViewColumnHeader}">
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                    </Style>
                </ListView.Resources>
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="选中" DisplayMemberBinding="{Binding Check}" Width="50"/>
                        <GridViewColumn  Header="序号" DisplayMemberBinding="{Binding Index}"  Width="50"/>
                        <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"  Width="50"/>
                        <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
                    </GridView>
                </ListView.View>
              
            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="3">
            <TextBlock Text="ItemsControl"/>
            <ItemsControl ItemsSource="{Binding UserInfos}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel HorizontalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Background="Transparent" BorderThickness="0" Width="130" HorizontalContentAlignment="Right">
                            <Border CornerRadius="10" Background="Gray" Width="130">
                                <StackPanel  Orientation="Horizontal" VerticalAlignment="Stretch" Width="130">
                                    <StackPanel  Margin="10">
                                        <TextBlock Text="{Binding Name}"/>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Sex}"/>
                                            <TextBlock Text="{Binding Age}" Margin="10,0"/>
                                        </StackPanel>
                                    </StackPanel>
                                    <Image Source="{Binding Image}" Width="50" Height="50" Stretch="Uniform" Margin="0,0,10,0" HorizontalAlignment="Right"/>
                                </StackPanel>
                            </Border>
                        </Button>

                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Grid>
</UserControl>

四、后台

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace lyrics.ui.Demo.List
{
    /// <summary>
    /// List.xaml 的交互逻辑
    /// </summary>
    public partial class ListUserControl : UserControl
    {
        public class UserInfo : INotifyPropertyChanged
        {

            public event PropertyChangedEventHandler PropertyChanged;


            private bool _check;

            public bool Check
            {
                get { return _check; }
                set
                {
                    _check = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
                }
            }

            private int _index;

            public int Index
            {
                get { return _index; }
                set
                {
                    _index = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
                }
            }

            private string _name;

            public string Name
            {
                get { return _name; }
                set
                {
                    _name = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
                }
            }


            private string _sex;

            public string Sex
            {
                get { return _sex; }
                set
                {
                    _sex = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
                }
            }

            private int _age;

            public int Age
            {
                get { return _age; }
                set
                {
                    _age = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
                }
            }

            private BitmapImage _img;

            public BitmapImage Image
            {
                get { return _img; }
                set
                {
                    _img = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
                }
            }

        }
        public ObservableCollection<UserInfo> UserInfos { get; set; } = new ObservableCollection<UserInfo>();
        public ObservableCollection<string> SexList { get; set; } = new ObservableCollection<string>() { "男", "女" };

        public ObservableCollection<string> NameList { get; set; } = new ObservableCollection<string>();
        public ListUserControl()
        {
            InitializeComponent();
           

            Init();
            this.DataContext = this;
        }

        private void Init()
        {
            foreach (var name in Enumerable.Range(0, 10)) {
                NameList.Add($"lr{name}");
            }
            Random random = new Random();
            var img = new BitmapImage(new Uri("../bird1.png", UriKind.Relative));
            foreach (var s in Enumerable.Range(0, 10))
            {
                UserInfos.Add(new UserInfo()
                {
                    Check = Convert.ToBoolean(random.Next(0, 2)),
                    Index = s,
                    Name = "lr" + s,
                    Sex = random.Next(0, 2) == 0 ? "男" : "女",
                    Age = random.Next(0, 80),
                    Image = img
                });
            }

            
        }
    }
}