It is fun experience trying to customize the look and behaviour of the standard listview included in WPF (see the figure below).
Creating a UI for the listview must be quite straight forward to most of the developers. So would jump directly into code:
In this article, we will learn how to create a Customize ListView as shown in the image above. More Important is to understand the XAML file. Read to know more about it step-by-step and after reading this article, you will be able to create and use a customize listview like this. Source code is also available for download at the end of the page.
Setup the Project
Setting up the project is all done in same way as mentioned in previous blog on Circular Loader.
Creating UI
Creating a UI for the listview must be quite straight forward to most of the developers. So would jump directly into code:
<ListView x:Name="lvCustomiseListView" ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="Server Name" DisplayMemberBinding="{Binding ServerName}"/>
<GridViewColumn Header="Server Status" DisplayMemberBinding="{Binding ServerStatus}"/>
<GridViewColumn Header="Network Status" DisplayMemberBinding="{Binding NetworkStatus}"/>
GridView>
ListView.View>
ListView>
With the above code following will be the output(shown in figure below).
This was not the output intended; so we need to customize or change some part of the code in XAML file. How do we achieve the output? For this you should be clear with the concept of DataTemplate.
What is DataTemplate and Where it is Used?
DataTemplate is used whenever you want to modify the default template of any WPF control in our case it’s a WPF ListView control. WPF ListView can contain 'N' number of columns and each column can have defined their own datatemplate or in simple terms the representation format (Ultimately it’s all about Presentation!!!).
How to use DataTemplate
DataTemplate can be defined in the resource section of window if the datatemplate isto be used over multiple listview or it can be defined as a part of listview column. To keep code simpler and for easily readable I have made all three datatemplates as a part of window resources ( for our customize ListView).
Structure of DataTemplate
How does the datatemplate looks like? Below is the sample code:
<DataTemplate x:Key="hpLinkServerName">
<TextBlock>
<Hyperlink>
<Run Text="{Binding ServerName}"/>
Hyperlink>
TextBlock>
DataTemplate>
DataTemplate if defined as part of window resources will require unique key to identify the resource. Note- Key should be unique within the same window only, can be same across windows. Datatemplate can contain multiple controls but should follow the rules of WPF controls.
DataTemplate Xaml Code
<Window.Resources>
<DataTemplate x:Key="hpLinkServerName">
<TextBlock>
<Hyperlink>
<Run Text="{Binding ServerName}"/>
Hyperlink>
TextBlock>
DataTemplate>
<DataTemplate x:Key="ServerStatus">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ServerStatus}" VerticalAlignment="Center"/>
<Image Source="Resources\Check.png" Height="25" Width="25" Margin="5,0,0,0"/>
StackPanel>
DataTemplate>
<DataTemplate x:Key="NetworkStatus">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding NetworkStatus}" VerticalAlignment="Center"/>
<Image Source="Resources\Cancel.png" Height="25" Width="25" Margin="5,0,0,0"/>
StackPanel>
DataTemplate>
Window.Resources>
Here is the code for customising the listview based on the datatemplates we created above for each of the column-
<ListView x:Name="lvCustomiseListView" ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="Server Name" CellTemplate="{StaticResource hpLinkServerName}"/>
<GridViewColumn Header="Server Status" CellTemplate="{StaticResource ServerStatus}"/>
<GridViewColumn Header="Network Status" CellTemplate="{StaticResource NetworkStatus}"/>
GridView>
ListView.View>
ListView>
See it in Action
Run the application to get the desired output:
Download Source Code
Do you need the source code of the project for your reference? Yes, you can download it from here:
