WPF ItemsControl ListBox ListView比较

最新推荐文章于 2024-08-14 08:40:54 发布

狂奔之林

最新推荐文章于 2024-08-14 08:40:54 发布

阅读量2.1k

点赞数

分类专栏： WPF 控件

原文链接：https://www.cnblogs.com/yang-fei/p/4720596.html

版权

WPF 控件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在进行列表信息展示时，WPF中提供多种列表可供选择。这篇博客将对WPF ItemsControl, ListBox, ListView进行比较。

相同点：

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

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

不同点：

控件层次关系：

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:

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

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

ItemControl的样式：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="ItemsControlDefaultStyle" TargetType="{x:Type ItemsControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ItemsControl}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"

Padding="{TemplateBinding Padding}" SnapsToDevicePixels=“true”>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!– Resource dictionary entries should be defined here. –>
</ResourceDictionary>

ListBox和ListView的样式基本一样，除了TargetType外，

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="ListBorder" Color="#828790"/>
    <Style x:Key="ListBoxDefaultStyle" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1"

SnapsToDevicePixels=“true”>
<ScrollViewer Focusable=“false” Padding="{TemplateBinding Padding}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=“IsEnabled” Value=“false”>
<Setter Property=“Background” TargetName=“Bd” Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<Trigger Property=“IsGrouping” Value=“true”>
<Setter Property=“ScrollViewer.CanContentScroll” Value=“false”/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!– Resource dictionary entries should be defined here. –>
</ResourceDictionary>

在项目中如何选择使用这三个控件；

1. 如果列表信息只做展示，但不提供选择功能，可以使用ItemsControl；

2. ListView比ListBox增加了一个View属性。

示例代码：

ItemsControl vs ListBox (Selector)

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">ItemsControl</span><span style="color: #008000;">--&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock </span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="ItemsControl"</span><span style="color: #ff0000;"> FontSize</span><span style="color: #0000ff;">="18"</span><span style="color: #0000ff;">/&gt;</span>

        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsControl </span><span style="color: #ff0000;">ItemsSource</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{Binding .}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsControl.ItemTemplate</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Ellipse </span><span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="110"</span><span style="color: #ff0000;"> Height</span><span style="color: #0000ff;">="55"</span><span style="color: #ff0000;"> Fill</span><span style="color: #0000ff;">="#ebebee"</span><span style="color: #0000ff;">/&gt;</span>

                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>
                            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock </span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{Binding Priority}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> FontSize</span><span style="color: #0000ff;">="16"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">/&gt;</span>
                            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock </span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{Binding Name}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> FontSize</span><span style="color: #0000ff;">="16"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">/&gt;</span>
                        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ItemsControl.ItemTemplate</span><span style="color: #0000ff;">&gt;</span>

            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsControl.ItemsPanel</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsPanelTemplate</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">WrapPanel </span><span style="color: #0000ff;">/&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ItemsPanelTemplate</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ItemsControl.ItemsPanel</span><span style="color: #0000ff;">&gt;</span>

            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsControl.ItemContainerStyle</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Style</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Control.Margin"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="5"</span><span style="color: #0000ff;">/&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Style</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ItemsControl.ItemContainerStyle</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ItemsControl</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>

    <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">ListBox</span><span style="color: #008000;">--&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">StackPanel </span><span style="color: #ff0000;">Grid.Row</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock </span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="ListBox"</span><span style="color: #ff0000;"> FontSize</span><span style="color: #0000ff;">="18"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox </span><span style="color: #ff0000;">ItemsSource</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{Binding .}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox.ItemTemplate</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Ellipse </span><span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="110"</span><span style="color: #ff0000;"> Height</span><span style="color: #0000ff;">="55"</span><span style="color: #ff0000;"> Fill</span><span style="color: #0000ff;">="#ebebee"</span><span style="color: #0000ff;">/&gt;</span>

                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>
                            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock </span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{Binding Priority}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> FontSize</span><span style="color: #0000ff;">="16"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">/&gt;</span>
                            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock </span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{Binding Name}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> FontSize</span><span style="color: #0000ff;">="16"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">/&gt;</span>
                        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox.ItemTemplate</span><span style="color: #0000ff;">&gt;</span>

            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox.ItemsPanel</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsPanelTemplate</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">/&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ItemsPanelTemplate</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox.ItemsPanel</span><span style="color: #0000ff;">&gt;</span>

            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox.ItemContainerStyle</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Style</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Control.Width"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="120"</span><span style="color: #0000ff;">/&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Control.Margin"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="5"</span><span style="color: #0000ff;">/&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Style</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox.ItemContainerStyle</span><span style="color: #0000ff;">&gt;</span>

            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox.Template</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ScrollViewer </span><span style="color: #ff0000;">HorizontalScrollBarVisibility</span><span style="color: #0000ff;">="Auto"</span><span style="color: #ff0000;"> VerticalScrollBarVisibility</span><span style="color: #0000ff;">="Auto"</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ItemsPresenter</span><span style="color: #0000ff;">/&gt;</span>
                    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ScrollViewer</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox.Template</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span></pre>

    public class Task
    {
        public string Name { get; set; }
    public int Priority { get; set; }
}

ObservableCollection</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Task</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"> _tasks = null;
public MainWindow()
{
    InitializeComponent();

    _tasks = new ObservableCollection</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Task</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">()
    {
        new Task() { Name = "Shopping",Priority = 2 },
        new Task() { Name = "Laundry",Priority = 2 },
        new Task() { Name = "Email",Priority = 1 },
        new Task() { Name = "Writting",Priority = 2 },
        new Task() { Name = "Learning",Priority = 2 },
        new Task() { Name = "Working",Priority = 2 },
    };

    DataContext = _tasks;
}</span></pre>

运行效果：

ListView View属性的使用

<ListView ItemsSource="{Binding .}">
    <ListView.View>
        <GridView>
            <GridView.Columns>
                <GridViewColumn Header="Task Name" DisplayMemberBinding="{Binding Name}" Width="100"/>
                <GridViewColumn Header="Task Priority" DisplayMemberBinding="{Binding Priority}" Width="100"/>
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>

运行效果：