WPF ListBox data templating/styling
Introduction
Each control, TextBlock, TextBox, ListBox etc. have their own default template associated with it. Using styles, controls can be modify from their default template associated. WPF enables you to change the look and feel of the controls and this can be achieved by using templates. This article with both C# and Visual Basic projects will show how to utilize templating and styling to display a collection of items in a ListBox were each task displayed on a row with description of a property and the value for a property coupled with a ContentControl to display three out of four properties which may be edited then on tabbing out of a TextBox display the changed value in the current selected item in the ListBox.
 |
Citation With Windows Presentation Foundation (WPF), you can customize an existing control's visual structure and behavior with your own reusable template. Templates can be applied globally to your application, windows and pages, or directly to controls. Most scenarios that require you to create a new control can be covered by instead creating a new template for an existing control. |
|
Application wide styling There are two project provided, one Visual Basic, one C#. In both projects the main window has a StackPanel within a Grid and gets styling from App.xaml for C#, Application.xaml for Visual Basic. TextBox controls have application wide styling in the same file. |
Project overview
Provide a display of task in a ListBox which may be edited in TextBox controls followed by updating the current row in the ListBox. As the focus is on data templating and styling data presented is mocked data while in reality the data may come from a comma delimited file or a database, no matter were the data comes from does not affect styling or binding of data.
Data templates dictate how bound data is mapped to one or more control. A data template can be used in two places:
- As value of ContentTemplate property for a ContentControl (e.g. a Label)
- As value of ItemTemplate property for an ItemsControl (e.g. a ListBox)
Data classes representing a Task
A Task is comprised of a name, description, task type and priority.
For Task type an enum is used.
C#
public enum TaskType
{
Home,
Work
}
VB.NET
Public Enum TaskType
Home
Work
End Enum
The following class represents a Task which implementings INotifyPropertyChanged so that when a property is changed in TextBox controls within the ContentControl the ListBox source reflects changes through an ObservableCollection<TaskItem>.
C#
using System.ComponentModel;
using System.Runtime.CompilerServices;
using JetBrains.Annotations;
namespace WpfAppExample1.Classes
{
public class TaskItem : INotifyPropertyChanged
{
private string _description;
private string _taskName;
private int _priority;
public string TaskName
{
get => _taskName;
set
{
if (value == _taskName) return;
_taskName = value;
OnPropertyChanged();
}
}
public string Description
{
get => _description;
set
{
if (value == _description) return;
_description = value;
OnPropertyChanged();
}
}
public TaskType TaskType { get; set; }
public int Priority
{
get => _priority;
set
{
if (value == _priority) return;
_priority = value;
OnPropertyChanged();
}
}
public override string ToString() => TaskName;
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
VB.NET
Imports System.ComponentModel
Imports System.Runtime.CompilerServices
Imports JetBrains.Annotations
Namespace Classes
Public Class TaskItem
Implements INotifyPropertyChanged
Private _description As String
Private _taskName As String
Private _priority As Integer
Public Property TaskName() As String
Get
Return _taskName
End Get
Set(ByVal value As String)
If value = _taskName Then
Return
End If
_taskName = value
OnPropertyChanged()
End Set
End Property
Public Property Description() As String
Get
Return _description
End Get
Set(ByVal value As String)
If value = _description Then
Return
End If
_description = value
OnPropertyChanged()
End Set
End Property
Public Property TaskType() As TaskType
Public Property Priority() As Integer
Get
Return _priority
End Get
Set(ByVal value As Integer)
If value = _priority Then
Return
End If
_priority = value
OnPropertyChanged()
End Set
End Property
Public Overrides Function ToString() As String
Return TaskName
End Function
Public Event PropertyChanged As PropertyChangedEventHandler _
Implements INotifyPropertyChanged.PropertyChanged
<NotifyPropertyChangedInvocator>
Protected Overridable Sub OnPropertyChanged(<CallerMemberName>
Optional ByVal propertyName As String = Nothing)
PropertyChangedEvent?.Invoke(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
End Namespace
Mocked data class using ObservableCollection<TaskItem> which is instantiated as a public variable in the window containing the ListBox.
C#
using System.ComponentModel;
using System.Runtime.CompilerServices;
using JetBrains.Annotations;
namespace WpfAppExample1.Classes
{
public class TaskItem : INotifyPropertyChanged
{
private string _description;
private string _taskName;
private int _priority;
public string TaskName
{
get => _taskName;
set
{
if (value == _taskName) return;
_taskName = value;
OnPropertyChanged();
}
}
public string Description
{
get => _description;
set
{
if (value == _description) return;
_description = value;
OnPropertyChanged();
}
}
public TaskType TaskType { get; set; }
public int Priority
{
get => _priority;
set
{
if (value == _priority) return;
_priority = value;
OnPropertyChanged();
}
}
public override string ToString() => TaskName;
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
VB.NET
Imports System.Collections.ObjectModel
Namespace Classes
Public Class Tasks
Public Function List() As ObservableCollection(Of TaskItem)
Return New ObservableCollection(Of TaskItem)() From {
New TaskItem() With {
.Priority = 2,
.TaskType = TaskType.Work,
.TaskName = "Unit test data operations",
.Description = "Delegate to junior developer"
},
New TaskItem() With {
.Priority = 1,
.TaskType = TaskType.Work,
.TaskName = "Prototype dashboard",
.Description = "Put together dashboard prototype"
},
New TaskItem() With {
.Priority = 1,
.TaskType = TaskType.Home,
.TaskName = "Cook dinner",
.Description = "Ah, get a pizza"
},
New TaskItem() With {
.Priority = 3,
.TaskType = TaskType.Work,
.TaskName = "Single signon discussion",
.Description = "Discuss options"
}
}
End Function
End Class
End Namespace
In the main window constructor mocked data is assigned to an ObservableCollection.
C#
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using WpfAppExample1.Classes;
namespace WpfAppExample1
{
/// <summary>
/// Interaction logic for ListWindow1.xaml
/// </summary>
public partial class ListWindow1 : Window
{
public ObservableCollection<TaskItem> TaskItemsList { get; set; }
public ListWindow1()
{
InitializeComponent();
var taskOperations = new Tasks();
TaskItemsList = taskOperations.List();
DataContext = this;
}
/// <summary>
/// Ensure only int values are entered.
/// A robust alternate is using Data Annotations
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void NumberValidation(object sender, TextCompositionEventArgs e)
{
var regex = new Regex("[^0-9]+");
e.Handled = regex.IsMatch(e.Text);
}
}
}
VB.NET
Imports System.Collections.ObjectModel
Imports System.Text.RegularExpressions
Imports WpfAppExample2.Classes
Class MainWindow
Public Property TaskItemsList() As ObservableCollection(Of TaskItem)
Public Sub New()
InitializeComponent()
Dim taskOperations = New Tasks()
TaskItemsList = taskOperations.List()
DataContext = Me
End Sub
''' <summary>
''' Ensure only int values are entered.
''' A robust alternate is using Data Annotations
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub NumberValidation(sender As Object, e As TextCompositionEventArgs)
Dim regex = New Regex("[^0-9]+")
e.Handled = regex.IsMatch(e.Text)
End Sub
End Class
XAML Code
The following data template defines grid rows/columns to present data where the type for each row is of type TaskItem (C#) (VB).
<DataTemplate x:Key="ListBoxTaskTemplate" DataType="classes:TaskItem">
<Border Name="border" BorderBrush="LightGray" BorderThickness="1" Padding="2" Margin="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
</Grid>
</Border>
</DataTemplate>
In the ListBox, IsSynchronizedWithCurrentItem = true will keep the current SelectedItem synchronized with the current item in the Items property, in this case a TaskItem.
<ListBox x:Name="TaskListBox" HorizontalAlignment="Left" Height="262" Margin="29,14,0,0"
VerticalAlignment="Top" Width="417" HorizontalContentAlignment="Stretch"
IsSynchronizedWithCurrentItem="True"
ItemTemplate="{StaticResource ListBoxTaskTemplate}"
ItemsSource="{Binding TaskItemsList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
Then the following sets the data template for the ListBox to use.
ItemTemplate="{StaticResource ListBoxTaskTemplate}"
Followed by the actual binding to the ObservableCollection from code behind. Note Mode=TwoWay as this permits editing from TextBox controls in tangent with UpdateSourceTrigger=PropertyChanged which ties into INotifiyPropertyChanged Interface implemented in the class Taskitem.
ItemsSource="{Binding TaskItemsList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
The following style trigger will paint each item in the ListBox based off the TaskType. An alternative is to not have both task types in the ListBox, instead filter on the list based off the TaskType.
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding TaskType}" Value="Home">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding TaskType}" Value="Work">
<Setter Property="Background" Value="White" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
The following constructs a data template for TextBlock and TextBox controls bound to the currently selected TaskItem in the ListBox. For the property Priority WPF automatically handles non-numeric values, leave the TextBox and the border will turn red, this does not tell much to the uneducated user so in PreviewTextInput regular expressions are used to allow only numerics.
<DataTemplate x:Key="CurrentDetailsTemplate" DataType="classes:TaskItem">
<Border
Background="#DCE7F5" BorderBrush="Silver"
CornerRadius="4,4,4,4" Width="Auto" Height="100" Margin="32,20,30,20" BorderThickness=".85" Padding="8">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="28*"/>
<RowDefinition Height="28*"/>
<RowDefinition Height="28*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="61*"/>
<ColumnDefinition Width="130*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" Text="Name:" Padding="0,0,10,0"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding TaskName}" Margin="0,0,0,4"/>
<TextBlock HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0" Text="Description:" Padding="0,0,10,0"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Description}" Margin="0,0,0,3"/>
<TextBlock HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0" Text="Priority:" Padding="0,0,10,0"/>
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Priority}" Margin="0,3,0,0" PreviewTextInput="NumberValidation" />
</Grid>
</Border>
</DataTemplate>
This is following by the following to paint the controls above.
<ContentControl Content="{Binding TaskItemsList}" ContentTemplate="{StaticResource CurrentDetailsTemplate}"/>
Polishing up
Presenting a window should have an active control, in this case the ListBox should be focused and ready to use. The following markup provides this along with code behind.
Code behind
C#
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace WpfAppExample1.Classes
{
/// <summary>
/// attached behavior for selecting first control in a window
/// </summary>
public static class FocusBehavior
{
public static readonly DependencyProperty GiveInitialFocusProperty =
DependencyProperty.RegisterAttached("GiveInitialFocus",typeof(bool),typeof(FocusBehavior),
new PropertyMetadata(false, OnFocusFirstPropertyChanged));
public static bool GetGiveInitialFocus(Control control) => (bool)control.GetValue(GiveInitialFocusProperty);
public static void SetGiveInitialFocus(Control control, bool value) => control.SetValue(GiveInitialFocusProperty, value);
private static void OnFocusFirstPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
if (!(sender is Control control) || !(args.NewValue is bool))
{
return;
}
if ((bool)args.NewValue)
{
control.Loaded += OnControlLoaded;
}
else
{
control.Loaded -= OnControlLoaded;
}
}
private static void OnControlLoaded(object sender, RoutedEventArgs e) =>
((Control)sender).MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
}
}
VB.NET
Namespace Classes
''' <summary>
''' attached behavior for selecting first control in a window
''' </summary>
Public NotInheritable Class FocusBehavior
Private Sub New()
End Sub
Public Shared ReadOnly GiveInitialFocusProperty As DependencyProperty =
DependencyProperty.RegisterAttached("GiveInitialFocus",
GetType(Boolean), GetType(FocusBehavior),
New PropertyMetadata(False, AddressOf OnFocusFirstPropertyChanged))
Public Shared Function GetGiveInitialFocus(ByVal control As Control) As Boolean
Return DirectCast(control.GetValue(GiveInitialFocusProperty), Boolean)
End Function
Public Shared Sub SetGiveInitialFocus(ByVal control As Control, ByVal value As Boolean)
control.SetValue(GiveInitialFocusProperty, value)
End Sub
Private Shared Sub OnFocusFirstPropertyChanged(ByVal sender As DependencyObject,
ByVal args As DependencyPropertyChangedEventArgs)
Dim tempVar As Boolean = TypeOf sender Is Control
Dim control As Control = If(tempVar, CType(sender, Control), Nothing)
If Not (tempVar) OrElse Not (TypeOf args.NewValue Is Boolean) Then
Return
End If
If DirectCast(args.NewValue, Boolean) Then
AddHandler control.Loaded, AddressOf OnControlLoaded
Else
RemoveHandler control.Loaded, AddressOf OnControlLoaded
End If
End Sub
Private Shared Sub OnControlLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
DirectCast(sender, Control).MoveFocus(New TraversalRequest(FocusNavigationDirection.Next))
End Sub
End Class
End Namespace
Summary
Code, both xaml and code behind has been presented to template/style a ListBox in sync with TextBox controls which can be used in project which require displaying specific information with the ability to edit. Not part of the article is reading data from a data source and save back to a data source, the foundation is here to add this logic as a developer sees fit from file streams to Entity Framework Core.
See also
WPF: Tips - Bind to Current item of Collection
WPF Data, Item and Control Templates - Minimum Code, Maximum Awesomeness
Different ways to dynamically select DataTemplate for WPF ListView
Moving from WinForms to WPF
WPF Control Templates