UserControls aren't displayed properly in ListBox when added from Code-behind (C#, WPF)

Question

I got a simple UserControl that is basically just a Grid with 6 Columns and a bunch of TextBlocks.

XAML:

<UserControl x:Class="MyApplication.TimeAccountItem"
             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" 
             xmlns:local="clr-namespace:MyApplication"
             mc:Ignorable="d">
    <UserControl.Resources>
        <local:TimeSpanConverter x:Key="TimeSpanConverter"/>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Margin" Value="10,5"/>
            <Setter Property="TextAlignment" Value="Center"/>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" x:Name="tb_Id" Text="{Binding User, FallbackValue=0}"/>
        <TextBlock Grid.Column="1" x:Name="tb_Employee" Text="{Binding Alias, FallbackValue=Employee}"/>
        <TextBlock Grid.Column="2" x:Name="tb_Updated" Text="{Binding Updated, StringFormat=dd.MM.yyy, FallbackValue=00.00.0000}"/>
        <TextBlock Grid.Column="3" x:Name="tb_Total" Text="{Binding Total, Converter={StaticResource TimeSpanConverter}, FallbackValue=00:00 h}"/>
        <TextBlock Grid.Column="4" x:Name="tb_Claimed" Text="{Binding Claimed, Converter={StaticResource TimeSpanConverter}, FallbackValue=00:00 h}"/>
        <TextBlock Grid.Column="5" x:Name="tb_Remaining" Text="{Binding Remaining, Converter={StaticResource TimeSpanConverter}, FallbackValue=00:00 h}"/>
    </Grid>
</UserControl>

CS:

public partial class TimeAccountItem : UserControl
{
    public TimeAccount content { get; set; }

    public OvertimeListBoxItem(TimeAccount timeAccount)
    {
        content = timeAccount;
        this.DataContext = content;  
    }

    public OvertimeListBoxItem()
    {
        InitializeComponent();
    }
}

On my MainWindow I got a ListBox where I want to "output" those UserControls.

When I do this in XAML everything works fine.

<ListBox Height="400" Margin="10,0" HorizontalContentAlignment="Stretch" BorderThickness="0" Name="listbox">
    <local:TimeAccountItem/>
    <local:TimeAccountItem/>
    <local:TimeAccountItem/>
    <local:TimeAccountItem/>
    <local:TimeAccountItem/>
</ListBox>

However not from Code-behind

foreach (TimeAccount ta in timeAccountList)
{
    listbox.Items.Add(new TimeAccountItem(ta));
}

I hovered one of the Items to show what happens. Already gave my UserControl a fixed Height instead of Auto but this didn't help either.

What am I doing wrong here?

Thanks in advance!

Answer 1

The UserControl constructor with TimeAccount argument is missing an InitializeComponent call:

public TimeAccountItem(TimeAccount timeAccount)
{
    DataContext = timeAccount;  
    InitializeComponent();
}

---

You should however not be doing this at all.

Instead, declare an appropriate ItemTemplate:

<ListBox ...>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:TimeAccountItem/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Then remove the explicit DataContext assignment from the UserControl

public partial class TimeAccountItem : UserControl
{
    public TimeAccountItem()
    {
        InitializeComponent();
    }
}

and assign a collection of data items instead of UI elements to the ListBox's ItemsSource property:

listbox.ItemSource = timeAccountList;