WPF DataGridTemplateColumn 与 ComboBox 绑定（MVVM 模式）

Question

我对下面的 WPF DataGrid+ComboBox 方案非常感兴趣。

我有一组看起来像的类；

class Owner
{
    int ID { get; }
    string Name { get; }

    public override ToString()
    { 
        return this.Name;
    }
}

class House
{
    int ID { get; }
    Owner HouseOwner { get; set; }
}

class ViewModel
{
    ObservableCollection<Owner> Owners;
    ObservableCollection<House> Houses
}

现在我想要的结果是一个 DataGrid，它显示 House 类型的行列表，其中一列是一个 ComboBox，它允许用户更改 House 的值.HouseOwner。

在这种情况下，网格的 DataContext 是 ViewModel.Houses，而对于 ComboBox，我希望 ItemsSource 绑定到 ViewModel.Owners。

这甚至可能吗？我对此感到很兴奋......我能做的最好的事情就是正确地绑定 ItemsSource，但是 ComboBox（在 DataGridTemplateColumn 内）没有在每一行中显示 House.HouseOwner 的正确值。

注意：如果我将 ComboBox 从图片中取出并在 DataTemplate 中放置一个 TextBlock，我可以正确地看到每一行的值，但同时获得一个 ItemsSource 以及在选择中显示正确的值不是为我工作...

在后面的代码中，我将 Window 上的 DataContext 设置为 ViewModel，而在网格上，DataContext 设置为 ViewModel.Houses。除了这个组合框之外的所有东西，它都在工作......

我的违规列的 XAML 看起来像；

<DataGridTemplateColumn Header="HouseOwner">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ComboBox ItemsSource="{Binding Path=DataContext.Owners, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                        DisplayMemberPath="Name"
                        SelectedItem="{Binding HouseOwner, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                        SelectedValue="{Binding HouseOwner.ID, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Mode=OneWay}"
                        SelectedValuePath="ID" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

希望对此有所帮助...不过似乎需要一点巫毒教...

Answer 1

正如 default.kramer 所说，您需要像这样从 SelectedItem 和 SelectedValue 的绑定中删除 RelativeSource（请注意，您应该将 Mode=TwoWay 添加到绑定中以便组合框中的更改反映在您的模型中）。

<DataGridTemplateColumn Header="House Owner">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ComboBox
                ItemsSource="{Binding Path=DataContext.Owners, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                DisplayMemberPath="Name"
                SelectedItem="{Binding HouseOwner, Mode=TwoWay}"
                SelectedValue="{Binding HouseOwner.ID}"
                SelectedValuePath="ID"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

但是，与他所说的不同，您不必删除SelectedValue 的绑定。事实上，如果你删除它，它就不起作用（SelectedValue 和 SelectedValuePath 都应该在这里设置，就像你所做的那样），因为这就是允许绑定机制识别从组合框到DataGrid 的HouseOwner 属性。

SelectedValue/SelectedValuePath组合很有意思。 SelectedValuePath 告诉数据绑定 Owner 对象当前选择的 ID 属性代表它的 值，SelectedValue 告诉它该值应该绑定到 HouseOwner.ID 这是DataGrid 上的选定对象。

因此，如果您删除这些绑定，数据绑定机制将只知道“选择了什么对象”，并在 ComboBox 中的选定项与选定项上的HouseOwner 属性之间建立对应关系DataGrid，它们必须是“相同的对象引用”。这意味着，例如，以下内容将不起作用：

Owners = new ObservableCollection<Owner>
                {
                    new Owner {ID = 1, Name = "Abdou"},
                    new Owner {ID = 2, Name = "Moumen"}
                };
Houses = new ObservableCollection<House>
                {
                    new House {ID = 1, HouseOwner = new Owner {ID = 1, Name = "Abdou" }},
                    new House {ID = 2, HouseOwner = new Owner {ID = 2, Name = "Moumen"}}
                };

（请注意，Houses 集合的“HouseOwners”与 Owners 集合中的“HouseOwners”不同（新）。但是，以下会起作用：

Owners = new ObservableCollection<Owner>
                {
                    new Owner {ID = 1, Name = "Abdou"},
                    new Owner {ID = 2, Name = "Moumen"}
                };
Houses = new ObservableCollection<House>
                {
                    new House {ID = 1, HouseOwner = Owners[0]},
                    new House {ID = 2, HouseOwner = Owners[1]}
                };

希望这会有所帮助:)

更新： 在第二种情况下，您可以通过覆盖 Owner 类上的 Equals 来获得相同的结果，而无需相同的引用（当然，因为它首先用于比较对象）。 （感谢@RJ Lohan 在下面的 cmets 中注意到这一点）

Answer 2

感谢大家的帮助 - 我终于弄清楚了为什么我无法选择 ComboBox 项目 - 这是由于我在使用 DataGridComboBoxColumn时附加到单元格样式的鼠标预览事件处理程序>.

为那个打了自己一巴掌，感谢其他人的帮助。

另外，作为注释；这对我有用的唯一方法是额外的；

IsSynchronizedWithCurrentItem="False"

添加到 ComboBox，否则由于某种原因它们都显示相同的值。

另外，我认为我的绑定中似乎不需要 SelectedValue/SelectedValuePath 属性，因为我在绑定的 Owner 类型中覆盖了 Equals。 p>

最后，我必须明确设置；

Mode=TwoWay，UpdateSourceTrigger=PropertyChanged

在绑定中，以便在 ComboBox 更改时将值写回绑定的项目。

因此，绑定的最终（工作）XAML 如下所示；

    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ComboBox 
                ItemsSource="{Binding Path=DataContext.Owners,  
                RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                IsSynchronizedWithCurrentItem="False"
                SelectedItem="{Binding HouseOwner, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>

干杯！

rJ

Answer 3

这绝对是可能的，并且使用AncestorType 绑定ItemsSource 是正确的。但我认为我看到了一些错误。

首先，您的ItemsSource 应该绑定到DataContext.Owners，而不是DataContext.Houses，对吗？您希望视图模型的所有者集合显示在下拉列表中。所以首先，更改ItemsSource 并取出与Selection 相关的东西，如下所示：

<ComboBox ItemsSource="{Binding Path=DataContext.Owners, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
          DisplayMemberPath="Name" />

现在测试一下，确保ItemsSource 工作正常。在这部分工作之前，不要尝试乱搞选择。

关于选择，我认为您应该只绑定SelectedItem - 而不是SelectedValue。对于此绑定，您不需要 RelativeSource 绑定 - DataContext 将是单个 House，因此您可以直接绑定其 HouseOwner。我的猜测是这样的：

<ComboBox ItemsSource="{Binding Path=DataContext.Owners, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
          DisplayMemberPath="Name"
          SelectedItem="{Binding HouseOwner}" />

最后，对于调试绑定，您可以see the Visual Studio Output window 或升级到像Snoop 或WPF Inspector 这样的工具。如果您打算做很多 WPF，我建议您尽早开始使用 Snoop。

Answer 4

基于 AbdouMoumen 建议的完整示例。还删除了 SelectedValue 和 SelectedValuePath。

//---------
//CLASS STRUCTURES.    
//---------
//One grid row per house.    
public class House
{
    public string name { get; set; }
    public Owner ownerObj { get; set; }
}

//Owner is a combobox choice.  Each house is assigned an owner.    
public class Owner
{
    public int id { get; set; }
    public string name { get; set; }
}

//---------
//FOR XAML BINDING.    
//---------
//Records for datagrid.  
public ObservableCollection<House> houses { get; set; }

//List of owners.  Each house record gets an owner object assigned.    
public ObservableCollection<Owner> owners { get; set; }

//---------
//INSIDE “AFTER CONTROL LOADED” METHOD.  
//---------
//Populate list of owners.  For combobox choices.  
owners = new ObservableCollection<Owner>
{
    new Owner {id = 1, name = "owner 1"},
    new Owner {id = 2, name = "owner 2"}
};

//Populate list of houses.  Again, each house is a datagrid record.  
houses = new ObservableCollection<House>
{
    new House {name = "house 1", ownerObj = owners[0]},
    new House {name = "house 2", ownerObj = owners[1]}
};


<DataGrid ItemsSource="{Binding Path=houses, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" >
    <DataGrid.Columns>
        <DataGridTextColumn Header="name" Binding="{Binding name}" />
        <DataGridTextColumn Header="owner (as value)" Binding="{Binding ownerObj.name}"/>

        <DataGridTemplateColumn Header="owner (as combobox)" >
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox
                            ItemsSource="{Binding Path=owners, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                            DisplayMemberPath="name"
                            SelectedItem="{Binding ownerObj, Mode=TwoWay}"
                            />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>

</DataGrid>