Tip: Stretching list items in UWP

The UWP ListView and ListBox  controls can be used to present lists of items in the user interface. By default the items are left-aligned and take up just the space they require, which is unfortunate if you want to stretch them to the full available width of the list control. How to achieve that?

By default, list items are left aligned, how to stretch them?

ListView and ListBox: ItemContainerStyle

We would expect, that the item alignment behavior is influenced by the HorizontalContentAlignment  property on the list controls. Surprisingly this property has no effect. To align the items, we have to go further and use the ItemContainerStyle .

This Style affects the behavior of the container of individual list items and targets the ListViewItem  for ListView  and ListBoxItem  for ListBox .

The HorizontalAlignment  property sets the horizontal alignment of the item container itself. This is Stretch  by default. Thanks to this the mouse can hover over the full width of the control to activate any item.

The HorizontalContentAlignment  proerty sets the alignment of the item contents. By default it is set to Left  and that is the culprit. If we set this property to Stretch , the item will stretch to cover the entire available area.

Here are the example styles you can use for ListViewItem  and ListBoxItem :

You can then use the styles with your ListView  and ListBox  controls like this:

ItemsControl

There is one more list-based control in the UWP XAML Toolbox – ItemsControl. This is arguably the simplest list control, lacking many features like built-in interactivity and scrolling.

The default item container control for ItemsControl is just a simple ContentPresenter , which luckily has its HorizontalContentAlignment  set to Stretch  by default and the items are automatically stretched.

Sample code

Sample code for this article is available on my GitHub.

Summary

Stretching the items in UWP’s list controls is a little less intuitive at first, but still not too complicated and thanks to the smart way the controls are composed offers great opportunity for customization.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*