Question

I want to bind a user control (View) to a ListBoxItem. The ListBox is bound to a collection of ViewModels. I have set the ListBox’s ItemTemplate as so:

<ListBox.ItemTemplate>
     <DataTemplate>
           <View:ContactView/>     
     </DataTemplate>
 </ListBox.ItemTemplate>

But all I get are blank ListBoxItems. I can click on them, but nothing is showing visually. My ContactView code is very simply:

<Border>
    <DockPanel>
        <StackPanel DockPanel.Dock="Right" Orientation="Vertical">
            <TextBlock Text="{Binding Path=ContactFirstName, FallbackValue=FirstName}" FontWeight="Bold" Margin="5, 0, 5, 0"></TextBlock>
            <TextBlock Text="{Binding Path=ContactLastName, FallbackValue=LastName}" FontWeight="Bold" Margin="5, 0, 5, 0"></TextBlock>
            <TextBlock Text="{Binding Path=ContactNumber, FallbackValue=Number}" Margin="5, 0, 5, 0"></TextBlock>
        </StackPanel>
    </DockPanel>
</Border>

What could be wrong with this? Thanks.

Answer 1

Seem to work fine with my sample project:

Window1 XAML:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:WpfApplication7="clr-namespace:WpfApplication7"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListBox x:Name="myListbox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <WpfApplication7:ContactView/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

ContactView XAML (no code behind needed ;)):

<UserControl x:Class="WpfApplication7.ContactView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Border>
        <DockPanel>
            <StackPanel DockPanel.Dock="Right" Orientation="Vertical">
                <TextBlock Text="{Binding Path=ContactFirstName, FallbackValue=FirstName}" FontWeight="Bold" Margin="5, 0, 5, 0"></TextBlock>
                <TextBlock Text="{Binding Path=ContactLastName, FallbackValue=LastName}" FontWeight="Bold" Margin="5, 0, 5, 0"></TextBlock>
                <TextBlock Text="{Binding Path=ContactNumber, FallbackValue=Number}" Margin="5, 0, 5, 0"></TextBlock>
            </StackPanel>
        </DockPanel>
    </Border>

</UserControl>

Code behind for Window1:

public partial class Window1
{
    public Window1()
    {
        InitializeComponent();
        myListbox.ItemsSource = new[]
                                    {
                                        new Contact { ContactFirstName = "Stack", ContactLastName = "Overflow", ContactNumber = 1 },
                                        new Contact { ContactFirstName = "Stack", ContactLastName = "Overflow", ContactNumber = 2 },
                                        new Contact { ContactFirstName = "Stack", ContactLastName = "Overflow", ContactNumber = 3 },
                                    };
    }
}

public class Contact
{
    public string ContactFirstName { get; set; }
    public string ContactLastName { get; set; }
    public int ContactNumber { get; set; }
}

I think your problem lies with the items in your ItemsSource. Make sure you bind to the correct property. My Contact objects have the correct properties. Perhaps your objects in your ItemsSource have different property names? Or do those objects have a property to Contact which holds the properties you want?

If you have a Contact property in your ItemsSource objects, you can use a binding as follows on the TextBlock (notice the dot):

<TextBlock Text="{Binding Path=Contact.FirstName}" FontWeight="Bold" Margin="5, 0, 5, 0"></TextBlock>

Hope this helps a bit pin pointing where your problem lies!