如何将 WPF 自定义控件绑定到列表框

Question

我正在尝试构建一个非常简单的联系人浏览器。我有一个显示在 ListBox 控件中的联系人对象集合，该控件显示联系人的全名，在右侧我有一个名为 BasicContactCard 的 customControl。这是显示 ListBox 的 ContacWindow 的 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>

这是 CustomControl 的 XAML：

 <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>

我遇到的问题是如何将 CustomControl 的各个元素绑定到 ListBox 中 SelectedItem 后面的对象？

Answer 1

您可以将 ListBox 的 SelectedItem 属性用作用户控件的 DataContext（不是 DataSource，而是“类似”的东西）。

假设你有这个对象：

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

然后这是你的新 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>

关键部分是这样的：

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

当然，看看如何获​​取TextBlock的值：

Text="{绑定公司}"/>

您正在从“contactList”列表框的选定项设置 DockPanel 的 DataContext。

我没有对其进行测试，但我认为您对这两件事的关系有所了解。 祝你好运。

Answer 2

我认为将DataTemplate 用于ItemTemplates 的ListBox 是更好的选择。无需使用 CustomControl。 DataTemplate 定义列表中每个项目的外观。

Answer 3

嗯，我最终想通了，它比我想象的要简单得多！呵呵！

基本上，我将 ContactWindow 中 Grid 对象的 DataContext 设置为 ListBox，这样 Grid 内的任何对象都将继承 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>

希望这可以帮助与我在同一条船上学习的其他人。