Elements are not shown with ItemsPanelTemplate

Question

I just try to understand the concept of the ItemsPanelTemplate. For this i built a small sample solution.

I have a UserControl "MyListView" with the following Code.

MyListView.xaml:

<UserControl x:Class="WpfApplication2.MyListView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <Style  TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Border BorderBrush="Black" BorderThickness="1" Margin="0" Padding="0" Width="100" Background="Gray">
                            <TextBlock Text="Text" HorizontalAlignment="Center"  />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<ListView ItemsSource="{Binding Path=TreeItemChildren}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">

            </StackPanel>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>
</UserControl>

In MyListView.cs I added a DependencyProperty to bind the data to that should be displayed:

public partial class MyListView : UserControl
{
    public MyListView()
    {
        this.TreeItemChildren = new ObservableCollection<string>();
        this.TreeItemChildren.Add("Text0");
        this.TreeItemChildren.Add("Text1");
        this.TreeItemChildren.Add("Text2");

        InitializeComponent();
    }

    public ObservableCollection<string> TreeItemChildren
    {
        get { return (ObservableCollection<string>)GetValue(TreeItemChildrenProperty); }
        set { SetValue(TreeItemChildrenProperty, value); }
    }

    // Using a DependencyProperty as the backing store for TreeItemChildren.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TreeItemChildrenProperty =
        DependencyProperty.Register("TreeItemChildren", typeof(ObservableCollection<string>), typeof(MainWindow), new UIPropertyMetadata(null));
}

When I now try to use this UserControl in my MainWindow, there is no data to be displayed. What is the reason for that?

Answer 1

You have not bound any ListBoxItem properties in the control template, the Content is not displayed for that reason.

Usually you would replace this:

<TextBlock Text="Text" HorizontalAlignment="Center"  />

with:

<ContentPresenter HorizontalAlignment="Center"/>

(If the templated control is a ContentControl the ContentPresenter binds to the Content related properties automatically)

Also the ListView.ItemsSource binds to a property on the DataContext (which isn't set and should not be set since it interferes with bindings on the instances of the control), change it to somehow target the UserControl (e.g. use ElementName or RelativeSource).

(There should be binding errors caused by the ItemsSource binding, learn how to debug them)