Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
The ListView control provides the infrastructure to display a set of data items in using a different layout or view. For example, a user may want to display data items in a table and also to sort its columns.
Note
The types referenced in this article are available in the Code reference section.
The ListView derives from ListBox. Typically, its items are members of a data collection and are represented as ListViewItem objects. A ListViewItem is a ContentControl and can contain only a single child element. However, that child element can be any visual element.
To specify a view mode for the content of a ListView control, you set the View property. One view mode that Windows Presentation Foundation (WPF) provides is GridView, which displays a collection of data items in a table that has customizable columns.
The following example shows how to define a GridView for a ListView control that displays employee information.
<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>
The following illustration shows how the data appears for the previous example.
You can create a custom view mode by defining a class that inherits from the ViewBase class. The ViewBase class provides the infrastructure you need to create a custom view. For more information about how to create a custom view, see Create a Custom View Mode for a ListView.
Use the Items and ItemsSource properties to specify items for a ListView control. The following example sets the ItemsSource property to a data collection called EmployeeInfoDataSource
.
<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">
In a GridView, GridViewColumn objects bind to specified data fields. The following example binds a GridViewColumn object to a data field by specifying a Binding for the DisplayMemberBinding property.
GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;
Dim gvc1 As New GridViewColumn()
gvc1.DisplayMemberBinding = New Binding("FirstName")
gvc1.Header = "FirstName"
gvc1.Width = 100
<GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>
You can also specify a Binding as part of a DataTemplate definition that you use to style the cells in a column. In the following example, the DataTemplate identified with a ResourceKey sets the Binding for a GridViewColumn. Note that this example doesn't define the DisplayMemberBinding because doing so takes precedence over CellTemplate.
<DataTemplate x:Key="myCellTemplateMonth">
<DockPanel>
<TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
<TextBlock.Text>
<Binding Path="Month"/>
</TextBlock.Text>
</TextBlock>
</DockPanel>
</DataTemplate>
<GridViewColumn Header="Month" Width="80"
CellTemplate="{StaticResource myCellTemplateMonth}"/>
The ListView control contains ListViewItem objects, which represent the data items that are displayed. You can use the following properties to define the content and style of data items:
On the ListView control, use the ItemTemplate, ItemTemplateSelector, and ItemContainerStyle properties.
On the ListViewItem control, use the ContentTemplate and ContentTemplateSelector properties.
To avoid alignment issues between cells in a GridView, do not use the ItemContainerStyle to set properties or add content that affects the width of an item in a ListView. For example, an alignment issue can occur when you set the Margin property in the ItemContainerStyle. To specify properties or define content that affects the width of items in a GridView, use the properties of the GridView class and its related classes, such as GridViewColumn.
For more information about how to use GridView and its supporting classes, see GridView Overview.
If you define an ItemContainerStyle for a ListView control and also define an ItemTemplate, you must include a ContentPresenter in the style in order for the ItemTemplate to work correctly.
Do not use the HorizontalContentAlignment and VerticalContentAlignment properties for ListView content displayed by a GridView. To specify the alignment of content in a column of a GridView, define a CellTemplate.
Two ListView controls cannot share the same view mode at the same time. If you try to use the same view mode with more than one ListView control, an exception occurs.
To specify a view mode that can be simultaneously used by more than one ListView, use templates or styles.
Customized views like GridView are derived from the ViewBase abstract class, which provides the tools to display data items represented as ListViewItem objects.
The following objects are referenced in this article:
EmployeeInfoDataSource
data collection. If you're using Visual Basic .NET, the Window
element is declared slightly different from what you see in the example code:
<Window x:Class="SDKSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="OnLoad"
xmlns:ds="clr-namespace:SDKSample">
<Window.Resources>
<ObjectDataProvider x:Key="EmployeeInfoDataSource" ObjectType="{x:Type ds:myEmployees}" />
</Window.Resources>
EmployeeInfo
class, which is used as the type for the EmployeeInfoDataSource
data collection.
public class EmployeeInfo
{
private string _firstName;
private string _lastName;
private string _employeeNumber;
public string FirstName
{
get {return _firstName;}
set {_firstName = value;}
}
public string LastName
{
get {return _lastName;}
set {_lastName = value;}
}
public string EmployeeNumber
{
get {return _employeeNumber;}
set {_employeeNumber = value;}
}
public EmployeeInfo(string firstname, string lastname, string empnumber)
{
_firstName = firstname;
_lastName = lastname;
_employeeNumber = empnumber;
}
}
Public Class EmployeeInfo
Private _firstName As String
Private _lastName As String
Private _employeeNumber As String
Public Property FirstName() As String
Get
Return _firstName
End Get
Set(ByVal value As String)
_firstName = value
End Set
End Property
Public Property LastName() As String
Get
Return _lastName
End Get
Set(ByVal value As String)
_lastName = value
End Set
End Property
Public Property EmployeeNumber() As String
Get
Return _employeeNumber
End Get
Set(ByVal value As String)
_employeeNumber = value
End Set
End Property
Public Sub New(ByVal firstname As String, ByVal lastname As String, ByVal empnumber As String)
_firstName = firstname
_lastName = lastname
_employeeNumber = empnumber
End Sub
End Class
.NET Desktop feedback feedback
.NET Desktop feedback is an open source project. Select a link to provide feedback:
Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.