How to bind a WPF CustomControl to a ListBox

Question

I am trying to build a very simple Contact browser. I have a Collection of Contact objects that displayed in a ListBox control which shows the FullName of the Contact and to the right I have a customControl called BasicContactCard. This is the XAML for the ContacWindow that displays the ListBox:

<DockPanel Width="auto" Height="auto" Margin="8 8 8 8">
    <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige">
        <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/>
    </Border>
    <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="0.125*" />
        </Grid.RowDefinitions>
        <local:BasicContactCard Margin="8 8 8 8" />
        <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" />
    </Grid>
</DockPanel>

and this is the XAML for the CustomControl:

 <DockPanel Width="auto  " Height="auto" Margin="8,8,8,8">
    <Grid Width="auto" Height="auto" DockPanel.Dock="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <TextBlock x:Name="companyField" Grid.Row="0" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Company"/>
        <TextBlock x:Name="contactField" Grid.Row="1" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Contact"/>
        <TextBlock x:Name="phoneField" Grid.Row="2" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Phone"/>
        <TextBlock x:Name="emailField" Grid.Row="3" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="email"/>
    </Grid>
</DockPanel>

The problem I have is how do I bind the individual elements of the CustomControl to the object behind the SelectedItem in the ListBox?

Answer 1

I think using a DataTemplate for the ItemTemplates of the ListBox is the better choice. There is no need for using a CustomControl. The DataTemplate defines the look of every item in your list.

Answer 2

You can use the SelectedItem property of the ListBox as your DataContext (is not a DataSource but is something "similar" if you will) for the user control.

Let's assume you have this object:

public class Contact
{
    public string Name { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }
}

Then this your new XAML:

    <DockPanel Width="auto" Height="auto" Margin="8 8 8 8">
        <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige">
            <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/>
        </Border>
        <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="0.125*" />
            </Grid.RowDefinitions>
            <local:BasicContactCard Margin="8 8 8 8" />
            <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" />
        </Grid>
    </DockPanel>

    <DockPanel Width="auto  " Height="auto" Margin="8,8,8,8" DataContext="{Binding ElementName='contactList', Path=SelectedItem}">
        <Grid Width="auto" Height="auto" DockPanel.Dock="Top">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="companyField" Grid.Row="0" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Company }"/>
            <TextBlock x:Name="contactField" Grid.Row="1" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Contact }"/>
            <TextBlock x:Name="phoneField" Grid.Row="2" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Phone }"/>
            <TextBlock x:Name="emailField" Grid.Row="3" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Email }"/>
        </Grid>
    </DockPanel>

The key part is this:

    <DockPanel Width="auto  " Height="auto" Margin="8,8,8,8" DataContext="{Binding ElementName='contactList', Path=SelectedItem}">

Of course, take a look how to obtain the values for the TextBlock:

Text="{Binding Company }"/>

There you are setting the DataContext of the DockPanel from the selected Item of the 'contactList' ListBox.

I did not test it, but I think you have an idea of you the two things relate. Good Luck.

Answer 3

Well I figured it out in the end and it was much simper than I thought! Doh!

Basically I set the DataContext for the Grid object in the ContactWindow to the ListBox so that any object inside that Grid would inherit the DataContext.

<DockPanel Width="auto" Height="auto" Margin="8 8 8 8">
    <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige">
        <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/>
    </Border>
    <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" ItemsSource="{Binding}" DisplayMemberPath="FullName" />
    <Grid DataContext="{Binding ElementName=contactList, Path=SelectedItem}">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="0.125*" />
        </Grid.RowDefinitions>
        <local:BasicContactCard Margin="8 8 8 8" />
        <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" />
    </Grid>
</DockPanel>

Hopefully this might help someone else in the same boat as I was during their learning.