This post applies to Windows Universal Apps specifically. These techniques probably won’t work with WPF or Windows 8/8.1 Apps because the XAML hierarchy and namespaces are different.
The title is certainly a mouthful, but stick with me to understand where this scenario can be useful.
Let’s say you want to re-use a ListView without copy and pasting everything about it wherever you need it. Simple enough, right? Just put it in a UserControl! Not so fast. What if you want to define the ListView’s ItemsSource from one level above the UserControl? It gets a little more complicated. This is especially true if you want to take advantage of a VisualStateManager with the ListView’s ItemTemplate.
For example, I had a UserControl which allowed users to scroll left/right on a ListView by clicking buttons left/right instead of using a scrollbar. I wanted to share this ListView in multiple places, but didn’t want to restrict the UserControl to a single ItemsSource by hard coding it in the UserControl itself. I wanted to “pass in” the ItemsSource and DataTemplate to define the layout of the items from one level above the UserControl. Additionally, I wanted the layout to change based on the width of the screen to work with phones, tablets, and wide layouts.
So here’s what I did after a few hours of struggling through wildly varying documentation across WPF, Windows 8/8.1, and Windows Universal Apps.
Creating the DataTemplate UserControl
We first need to define the lowest level of the chain to determine what and how the data will be displayed in each data bound ListViewItem. We put the XAML in a separate UserControl so that we can also attach a VisualStateManager to the ListViewItem and have it re-organize appropriately on different layout sizes.
This UserControl will then be referenced one level up in the DataTemplate of the main UserControl which contains the ListView and the left/right Buttons.
<StackPanel Name="StackPanelMain" VerticalAlignment="Top">