WPF ItemsControl ListBox ListView Comparison

There are a variety of lists to choose from in WPF when listing information is displayed. This blog will be compared to the WPF ItemsControl, ListBox, ListView.

Same point:

1. These three controls are list-based controls that can be list bound (ItemsSource);

2. All three controls use Itemspresenter to present the list information;

Different points:

Control hierarchy Relationship:

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

The ListBox inherits from ItemsControl and adds an Selector object, and item in ItemsControl is not supported for selection. The item in the ListBox is supported for selection and can be single-selected and multi-selected.

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

The ListView inherits from the ListBox and adds a view dependency property.

The ItemsControl is a scroll bar that does not contain horizontal and vertical orientations. The listbox and ListView have horizontal and vertical scroll bars.

Style of 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> <controltem Plate targettype= "{x:type ItemsControl}" > <border borderbrush= "{TemplateBinding BorderBrush}" Bor derthickness= "{TemplateBinding borderthickness}" background= "{TemplateBinding Background}" padding= "{ TemplateBinding Padding} "snapstodevicepixels=" true "> <itemspresenter snapstodevicepixels=" {T            Emplatebinding snapstodevicepixels} "/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--Resource dictionary entries should be defi Ned here. --></resourcedictionary> 

The listbox and ListView styles are basically the same, except for 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.windowbrush Key}} "/> <setter property=" BorderBrush "value=" {StaticResource listborder} "/> <setter property=" BorderThickness "value=" 1 "/> <setter property=" Foreground "value=" {dynamicresource {x:static Systemcolors.con        Troltextbrushkey}} "/> <setter property=" scrollviewer.horizontalscrollbarvisibility "Value=" Auto "/> <setter property= "scrollviewer.verticalscrollbarvisibility" value= "Auto"/> <setter Property= "ScrollViewer . Cancontentscroll "value=" true "/> <setter property=" Scrollviewer.panningmode "value=" Both "/> <Set ter property= "stylus.isflicksenabled" value= "False"/> <setter property= "verticalcontentalignment" Value= "Cent Er "/> <setter property=" Template "> <Setter.Value> <controltemplate Targ Ettype= "{x:type ListBox}"> <border x:name=" Bd "borderbrush=" {TemplateBinding BorderBrush} "borderthickness=" {Templatebind                        ing borderthickness} "background=" {TemplateBinding Background} "padding=" 1 "snapstodevicepixels=" true "> <scrollviewer focusable= "false" padding= "{TemplateBinding Padding}" > <itemspre                    Senter snapstodevicepixels= "{TemplateBinding snapstodevicepixels}"/> </ScrollViewer> </Border> <ControlTemplate.Triggers> <trigger Prope Rty= "IsEnabled" value= "false" > <setter property= "Background" targetname= "Bd" value= "{Dyna                        Micresource {x:static Systemcolors.controlbrushkey}} "/> </Trigger> <trigger property= "isgrouping" value= "true" > <setter property= "scrollviewer.cancontent Scroll "value=" false "/&GT </Trigger> </ControlTemplate.Triggers> </ControlTemplate> & Lt;/setter.value> </Setter> </Style> <!--Resource dictionary entries should being defined her E.--></resourcedictionary>

How to choose to use these three controls in a project;

1. If the list information is only shown, but does not provide a selection function, you can use ItemsControl;

2. The ListView adds a View property to the listbox.

Example code:

ItemsControl vs ListBox (Selector)

    <Grid> <Grid.RowDefinitions> <rowdefinition height= "Auto"/> <rowdefi Nition height= "Auto"/> </Grid.RowDefinitions> <!--itemscontrol--> <stackpan el> <textblock text= "ItemsControl" fontsize= "/> <itemscontrol itemssource=" {Binding. } "> <ItemsControl.ItemTemplate> <DataTemplate> &lt ; grid> <ellipse width= "height=" fill= "#ebebee"/> &lt ; Stackpanel> <textblock text= "{Binding priority}" fontsize= "horizontalalignment=" C Enter "/> <textblock text=" {Binding Name} "fontsize=" "horizontalalignment=" Center "/ > </StackPanel> </Grid> </datatempl               Ate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <itemspaneltempla te> <wrappanel/> </ItemsPanelTemplate> </items                        Control.itemspanel> <ItemsControl.ItemContainerStyle> <Style> <setter property= "Control.margin" value= "5"/> </Style> </item        Scontrol.itemcontainerstyle> </ItemsControl> </StackPanel> <!--listbox--> <stackpanel grid.row= "1" > <textblock text= "ListBox" fontsize= "/> <listbox Ite" Mssource= "{Binding.}" > <ListBox.ItemTemplate> <DataTemplate> &LT;GRID&G                            T <ellipse width= "height=" fill= "#ebebee"/> <stackpaNel> <textblock text= "{Binding priority}" fontsize= "+" horizontalalignment= "Center"/                            > <textblock text= "{Binding Name}" fontsize= "horizontalalignment=" Center/>                 </StackPanel> </Grid> </DataTemplate> </ListBox.ItemTemplate> <ListBox.ItemsPanel> <itemspanelt emplate> <StackPanel/> </ItemsPanelTemplate> </                        Listbox.itemspanel> <ListBox.ItemContainerStyle> <Style> <setter property= "Control.width" value= "+"/> <setter property= "Control.margin" Va Lue= "5"/> </Style> </ListBox.ItemContainerStyle> <listb Ox.         Template>           <ControlTemplate> <scrollviewer horizontalscrollbarvisibility= "Auto" VERTICALSC rollbarvisibility= "Auto" > <ItemsPresenter/> &LT;/SCROLLVIEWER&G                    T    </ControlTemplate> </ListBox.Template> </ListBox> </StackPanel> </Grid>

C#

    public class Task    {public        string Name {get; set;}        public int priority {get; set;}    }    Observablecollection<task> _tasks = null;    Public MainWindow ()    {        InitializeComponent ();        _tasks = new Observablecollection<task> ()        {            New task () {Name = "shopping", priority = 2},            New Task () {name = "Laundry", priority = 2},            New Task () {name = "e-mail", priority = 1},            New Task () {name = "writting", P Riority = 2},            New Task () {name = ' learning ', priority = 2},            New Task () {name = ' working ', priority = 2},
   
    };        DataContext = _tasks;    }
   

Operating effect:

Use of the ListView view property

<listview itemssource= "{Binding.}" >    <ListView.View>        <GridView>            <GridView.Columns>                <gridviewcolumn header= "Task Name" displaymemberbinding= "{Binding Name}" width= "/>                <gridviewcolumn header=" task priority " Displaymemberbinding= "{Binding priority}" Width= "/>"            </GridView.Columns>        </GridView>    </ListView.View></ListView>

Operating effect:

Thank you for reading, code click here to download.

WPF ItemsControl ListBox ListView Comparison