How to have a user control as a ListBoxItem

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

Your ContactView is not 'inheriting' the data context of the ItemTemplate. Or, rather, the ContactView itself is, but the "inner" controls are separate. Try:

<View:ContactView DataContext="{Binding Path=.}" />

Path=. is a special construct meaning "the current element." You can even shorten it to just {Binding} I think.

If you check the output window, you should have a bunch of errors saying how no object was provided for those TextBlock bindings.

Answer 2

Did you set the ItemSource property?

ItemsSource="{Binding}"

Answer 3

Use Binding Like

<View:NameofControl DataContext="{Binding }" />

Answer 4

When do your ViewModels set their properties? It could be that the Binding reads all values as null (before data is set) - and then receives no notification when data is actually set.

Answer 5

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"&gt;
    <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!