Question

I am learning to use listBox in WPF with dataTemplate using the examples from MSDN, I can render a listBox bound to an ObservableCollection as a source and by overriding the ToString method.

However, I need to render an image and some texblocks for every item. Here’s my XAML:

<Grid x:Class="MyAddin.WPFControls"
             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:c="clr-namespace:MyAddin"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Background="Transparent"
             HorizontalAlignment="Stretch" Width="auto"
             Height="215" VerticalAlignment="Stretch" ShowGridLines="False">
    <Grid.Resources>
        <c:People x:Key="MyFriends"/>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock HorizontalAlignment="Left" 
               IsManipulationEnabled="True" 
               Height="20" Width="300">Activity Feed</TextBlock>
    <ListBox Grid.Row="1" Name="listBox1" IsSynchronizedWithCurrentItem="True" 
             BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Auto"
             VerticalContentAlignment="Stretch" Margin="0,0,0,5" Background="Transparent">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Margin="5" BorderBrush="Black" BorderThickness="1">
                        <Image Source="{Binding Path=Avatar}" Stretch="Fill" Width="50" Height="50" />
                    </Border>
                    <StackPanel Grid.Column="1" Margin="5">
                        <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
                            <TextBlock Text="{Binding Path=Firstname }" />
                        </StackPanel>
                        <TextBlock Text="{Binding Path=Comment}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

My Collection class is as following:

public class People : ObservableCollection<Person>
{ }        

public class Person
{
    private string firstName;
    private string comment;
    private Bitmap avatar;

    public Person(string first, string comment, Bitmap avatar)
    {
        this.firstName = first;
        this.comment = comment;
        this.avatar = avatar;
    }

    public string FirstName
    {
        get { return firstName; }
        set { firstName = value; }
    }

    public string Comment
    {
        get { return comment; }
        set { comment = value; }
    }

    public Bitmap Avatar
    {
        get { return avatar;}
        set { avatar = value; }
    }

    public override string ToString()
    {
        return firstName.ToString();
    }
}

Once my addin is loaded, I am downloading my data and setting the itemsSource.

People p = new People();
p.Add(new Person("Willa", "Some Comment", myAvatar));
p.Add(new Person("Isak", "Some Comment", myAvatar));
p.Add(new Person("Victor", "Some Comment", myAvatar));

this.wpfControl.listBox1.ItemsSource = p;

The problem I am facing is that the items are being rendered as empty rows whereas If I remove the dataTemplate, the items are rendered fine with their firstName.

Answer 1

Don’t see anything wrong with the bindings themselves, but your avatar type seems off, WPF expects ImageSource (i do not know if there is any implicit convertion between Bitmap and ImageSource, check for binding errors to find out).