Introduction to ListView Control in WPF

Introduction

I am talking about the control named ListView control. A ListView control is a window that displays a collection of items. It's derived from the ListBox control. It's an important control in WPF. The ListView control provides the ability to add various controls in it like Buttons, Textboxes, Items etc. In a ListView we can work on various controls. In a WPF application of C# we write code in the XAML language. The ListView provides the infrastructure to display a set of data items in various layouts or views. Its items are members of a data collection and represented as ListViewItem objects. But in console applications we write the code in the C# language, not another language. XAML is not too difficult; it's easy to write the code for it. When we create a ListView in WPF its easy to add or drag and drop from the toolbox.

ListView tag in XAML

<ListView>

Items

</ListView>

When we add a ListView control from the tool box it will look like this and the code will be added in XAML.

<ListView Height="224" HorizontalAlignment="Left" Name="listView1" VerticalAlignment="Top" Width="193" >
</ListView>

Code to add the items in ListView control

<ListView Height="224" HorizontalAlignment="Left" Name="listView1" VerticalAlignment="Top" Width="193" >
<ListViewItem Content="MCN solution"></ListViewItem>
<ListViewItem Content="Google"></ListViewItem>
<ListViewItem Content="IBM"></ListViewItem>
<ListViewItem Content="Wipro"></ListViewItem>
<ListViewItem Content="Syntel"></ListViewItem>
</ListView>

After this code the output will look like this. When we add the items in the list view control we use the ListViewItem property.

ListView control items background - we can give the background color to the items by the help of brushes property; there are background and foreground properties by which we can also change the background and foreground colors of items. When we set the background color of the items, the ListView control will look like this:

Code to add bgcolor

<ListViewItem Content="MCN solution" Background="#FF60DE28"></ListViewItem>
<ListViewItem Content="Google" Background="#FFF5A06B"></ListViewItem>
<ListViewItem Content="IBM" Background="#FF45B8EB"></ListViewItem>
<ListViewItem Content="Wipro" Background="#FFD75DE2"></ListViewItem>
<ListViewItem Content="Syntel" Background="#FFEBF5B3"></ListViewItem>

ListView control items Foreground and fonts - we can give the background color to the items by the help of the brushes property. There is a foreground property by which we can set the foreground color of items. When we change the foreground color of items it will look like this in ListView control:

Code to add foreground and fonts

<ListViewItem Content="MCN solution" Background="#FF60DE28" Foreground="#FF209AE5" DataContext="{Binding}" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>
<ListViewItem Content="Google" Background="#FFF5A06B" Foreground="#FF58E21A" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>
<ListViewItem Content="IBM" Background="#FF45B8EB" Foreground="#FFD0EC76" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>
<ListViewItem Content="Wipro" Background="#FFD75DE2" Foreground="#FF83E8E8" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>
<ListViewItem Content="Syntel" Background="#FFEBF5B3" Foreground="#FF1172E2" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>

Properties of ListView: There are some very useful properties of the ListView control.

View: Sets and gets an object that describes how the data is designed and organized in a list view control.

Background: sets or gets a brush that defines the background of a control.

Foreground:  sets or gets a brush that defines the foreground color.

Items: sets or gets the collection used to create the content of the itemscontrol.

Visibility: sets or gets the user interface visibility of this element.

Template: sets or gets the control template.

Style- sets or gets the style used by this element when it's rendered.

These are the common properties which are used when we create a ListView control.

How to create a ListView control which implements a GridView:

<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource\}}">

<ListView.View>

 <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">

<GridViewColumn DisplayMemberBinding= "{Binding Path=FirstName}" Header="First Name" Width="100"/>

<GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Width="100">
<GridViewColumnHeader>Last Name<GridViewColumnHeader.ContextMenu>

<ContextMenu  MenuItem.Click="LastNameCM_Click"  Name="LastNameCM">

<MenuItem Header="Ascending" />

<MenuItem Header="Descending" />

</ContextMenu>

</GridViewColumnHeader.ContextMenu>

</GridViewColumnHeader>

</GridViewColumn>

<GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Header="Employee No." Width="100"/>

</GridView>

</ListView.View>

</ListView>