ansaurus

Question

How to bind a WPF CustomControl to a ListBox

Answer 1

A:

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.

DHN 2010-05-21 22:46:07

Thanks for the pointer DHN. I had been wondering if I was making it more complex than needed but since everything so far with WPF has been an uphill struggle for me compared to WinForms I thought that this was the way forward! I will go off and look at DataTemplates now.However, if we do use custom controls how would be bind the textblock.text properties to the ListBox.SelectedItem? This is now more from a point of wanting to learn than anything else, or is it just a badly designed learning project I have made and real-world implementations would not be in this scenario?

VivyG 2010-05-21 23:15:17

I haven't done it yet, but I guess the CustomControl defines a DependencyProperty like 'ItemSource' or 'DataContext', so the data can be bound from the caller. So, it's on the control how the data is interpreted.

DHN 2010-06-01 10:29:32

Answer 2

A:

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.

Markust 2010-05-21 23:21:06

Answer 3

A:

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.

VivyG 2010-06-16 08:27:52

I'll give Markust the credit here since he pointed me off in the correct direction initially but it took quite a while for it to sink into my rather befuddled brain!

VivyG 2010-06-17 18:02:48

ansaurus

tags:

views:

answers:

How to bind a WPF CustomControl to a ListBox

related questions