WPF

WPF ListBox ItemTemplate

Jose Leon
Author

ItemTemplates in WPF ListBoxes allows you to present information to users in a way that makes more sense for them without having to do a lot of programming. For example, let's say you have information that you'd like to present about some web search results. The objects holding the information look like this:

List results = new List();            results.Add(new SearchResult() { SiteTitle = "SkyXoft", SiteDescription = "Provide useful software to customers", SiteUrl = "http://www.skyxoft.com" });            results.Add(new SearchResult() { SiteTitle = "LicenseSpot", SiteDescription = ".NET licenisng in the cloud", SiteUrl = "http://www.licensespot.com" });            results.Add(new SearchResult() { SiteTitle = "Expiration Reminder", SiteDescription = "Keep your expirations in one place", SiteUrl = "http://www.expirationreminder.net" });

Displaying this information in a listbox without any formatting will look like the image below:

As you can see, it just even have the object names. If we want, we could add a ToString method to the object so we can get some more meaningful information but this is not what we want to achieve. We want to give it some styling using WPF controls.

ListBox and the ItemTemplate

For giving it some styling, we can use the ItemTemplate element of the ListBox and inside it declare a DataTemplate that will hold the information for displaying the results. In this case, we want to paint the items in the list like the results from web search. For this, we're using the following XAML markup:

And also the following C# code:

namespace WpfApplication9{    ///     /// Interaction logic for MainWindow.xaml    ///     public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();            List results = new List();            results.Add(new SearchResult() { SiteTitle = "SkyXoft", SiteDescription = "Provide useful software to customers", SiteUrl = "http://www.skyxoft.com" });            results.Add(new SearchResult() { SiteTitle = "LicenseSpot", SiteDescription = ".NET licenisng in the cloud", SiteUrl = "http://www.licensespot.com" });            results.Add(new SearchResult() { SiteTitle = "Expiration Reminder", SiteDescription = "Keep your expirations in one place", SiteUrl = "http://www.expirationreminder.net" });            SearchResultsListBox.ItemsSource = results;        }    }    public class SearchResult    {        public string SiteTitle { get; set; }        public string SiteDescription { get; set; }        public string SiteUrl { get; set; }    }}

As you can see, now we have the results in a nicely formatted way. In the code, we're just declaring the ItemTemplate element and inside it we're adding a StackPanel and then adding TextBlock objects that will render information in the interface. We then just use some basic WPF properties to change the colors and fonts.

features

All posts

  • licensing
  • analytics

Easy .NET Protection

Purchase template