将数据绑定到多列datagrid-combobox wpf

Question

我在网上找到了this tutorial，这正是我想要做的，但本教程没有解释如何将数据从后面的代码加载到组合框中。知道如何实现吗？

基本上我想要一个数据网格中的多列组合框，当用户选择一个项目时，它只显示一个值而不是两个。

<DataGrid x:Name="DGOrders" Margin="30" AutoGenerateColumns="False" >
<DataGrid.Columns>
    <DataGridTextColumn Binding="{Binding OrderID}" Header="Order ID" />
    <DataGridTemplateColumn Header="User" Width="200">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <ComboBox SelectedValue="{Binding UserID}" SelectedValuePath="UserID" DisplayMemberPath="CompanyName" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" >
                    <ComboBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ComboBoxItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Margin="5" Grid.Column="0" Text="{Binding UserID}"/>
                                            <TextBlock Margin="5" Grid.Column="1" Text="{Binding CompanyName}"/>
                                            <TextBlock Margin="5" Grid.Column="2" Text="{Binding UserName}"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ComboBox.ItemContainerStyle>
                </ComboBox>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

Answer 1

我不确定你只显示一个值而不是两个值是什么意思，但我希望在我向你展示如何正确绑定 DataGrid 中的属性后自行解释一下，首先你需要确保您的模型看起来像这样：

public class Order
{
    public string OrderId { get; set; }
    public string SelectedUserId { get; set; }
}

public class User
{
    public string UserId { get; set; }
    public string CompanyName { get; set; }
    public string UserName { get; set; }
}

然后在后面的代码中创建两个集合来保存用户列表和订单列表，分别代表DataContext 和ComboBox 和DataGrid：

  private ObservableCollection<Order> _ordersCollection = new ObservableCollection<Order>()
    {
        new Order()
        {
            OrderId = "1",
            SelectedUserId = "2"
        } ,new Order()
        {
            OrderId = "2",
            SelectedUserId = "3"
        }
    };

    public ObservableCollection<Order> OrdersCollection
    {
        get
        {
            return _ordersCollection;
        }

        set
        {
            if (_ordersCollection == value)
            {
                return;
            }

            _ordersCollection = value;
            OnPropertyChanged();
        }
    }


    private ObservableCollection<User> _usersCollection = new ObservableCollection<User>()
    {
        new User()
        {
            UserId = "1",
            UserName = "Name1",
            CompanyName = "Company1"
        } ,new User()
        {
            UserId = "2",
            UserName = "Name2",
            CompanyName = "Company2"
        } ,new User()
        {
            UserId = "3",
            UserName = "Name3",
            CompanyName = "Company3"
        }
    };


    public ObservableCollection<User> UsersCollection
    {
        get
        {
            return _usersCollection;
        }

        set
        {
            if (_usersCollection == value)
            {
                return;
            }

            _usersCollection = value;
            OnPropertyChanged();
        }
    }

您可以考虑实现INotifyPropertyChanged 接口，以便每次更新集合时都会通知 UI。

现在在 UI 中，确保您的主窗口的 DataContext 使用此设置为代码隐藏

DataContext="{Binding RelativeSource={RelativeSource Self}}"

然后正确绑定属性：

<Grid>
    <DataGrid x:Name="DGOrders" Margin="30" AutoGenerateColumns="False" ItemsSource="{Binding OrdersCollection}">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding OrderId}" Header="Order ID" />
            <DataGridTemplateColumn Header="User" Width="200" >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ComboBox SelectedValue="{Binding SelectedUserId}" SelectedValuePath="UserId" DisplayMemberPath="CompanyName" HorizontalContentAlignment="Stretch" ItemsSource="{Binding DataContext.UsersCollection,ElementName=DGOrders}" >
                            <ComboBox.ItemContainerStyle>
                                <Style TargetType="{x:Type ComboBoxItem}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <TextBlock Margin="5" Grid.Column="0" Text="{Binding UserId}"/>
                                                    <TextBlock Margin="5" Grid.Column="1" Text="{Binding CompanyName}"/>
                                                    <TextBlock Margin="5" Grid.Column="2" Text="{Binding UserName}"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ComboBox.ItemContainerStyle>
                        </ComboBox>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
        </DataGrid>
</Grid>

你最终会得到这样的东西