在 WPF DataGrid 中绑定 ComboBoxColumn 的 ItemsSource

Question

我有两个简单的模型类和一个 ViewModel...

public class GridItem
{
    public string Name { get; set; }
    public int CompanyID { get; set; }
}

public class CompanyItem
{
    public int ID { get; set; }
    public string Name { get; set; }
}

public class ViewModel
{
    public ViewModel()
    {
        GridItems = new ObservableCollection<GridItem>() {
            new GridItem() { Name = "Jim", CompanyID = 1 } };

        CompanyItems = new ObservableCollection<CompanyItem>() {
            new CompanyItem() { ID = 1, Name = "Company 1" },
            new CompanyItem() { ID = 2, Name = "Company 2" } };
    }

    public ObservableCollection<GridItem> GridItems { get; set; }
    public ObservableCollection<CompanyItem> CompanyItems { get; set; }
}

...以及一个简单的窗口：

<Window x:Class="DataGridComboBoxColumnApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding GridItems}" >
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Name}" />
                <DataGridComboBoxColumn ItemsSource="{Binding CompanyItems}"
                                    DisplayMemberPath="Name"
                                    SelectedValuePath="ID"
                                    SelectedValueBinding="{Binding CompanyID}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

ViewModel 设置为 App.xaml.cs 中 MainWindow 的 DataContext ：

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        MainWindow window = new MainWindow();
        ViewModel viewModel = new ViewModel();

        window.DataContext = viewModel;
        window.Show();
    }
}

如您所见，我设置了 < DataGrid 的 code>ItemsSource 到 ViewModel 的 GridItems 集合。这部分起作用了，显示了名为“Jim”的单条网格线。

我还想将每行中 ComboBox 的 ItemsSource 设置为 ViewModel 的 CompanyItems 集合。这部分不起作用：组合框保持为空，并且在调试器输出窗口中我看到一条错误消息：

System.Windows.Data 错误：2：无法 找到管理 FrameworkElement 或 目标的 FrameworkContentElement 元素。 BindingExpression:Path=CompanyItems; 数据项=空；目标元素是 'DataGridComboBox列' （哈希码=28633162）；目标财产 是“ItemsSource”（类型“IEnumerable”）

我相信 WPF 希望 CompanyItems 是 GridItem 的属性，但事实并非如此，这就是绑定失败的原因。

我已经尝试过像这样使用 RelativeSource 和 AncestorType ：

<DataGridComboBoxColumn ItemsSource="{Binding CompanyItems, 
    RelativeSource={RelativeSource Mode=FindAncestor,
                                   AncestorType={x:Type Window}}}"
                        DisplayMemberPath="Name"
                        SelectedValuePath="ID"
                        SelectedValueBinding="{Binding CompanyID}" />

但这在调试器输出中给了我另一个错误：

System.Windows.Data 错误：4：无法 查找参考绑定源 '相对源查找祖先， AncestorType='System.Windows.Window', 祖先等级='1''。 BindingExpression:Path=CompanyItems; 数据项=空；目标元素是 'DataGridComboBox列' （哈希码=1150788）；目标属性是 “ItemsSource”（类型“IEnumerable”）

问题：如何将 DataGridComboBoxColumn 的 ItemsSource 绑定到 ViewModel 的 CompanyItems 集合？有可能吗？

提前感谢您的帮助！

Answer 1

请检查下面的 DataGridComboBoxColumn xaml 是否适合您：

<DataGridComboBoxColumn 
    SelectedValueBinding="{Binding CompanyID}" 
    DisplayMemberPath="Name" 
    SelectedValuePath="ID">

    <DataGridComboBoxColumn.ElementStyle>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.CompanyItems, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
        </Style>
    </DataGridComboBoxColumn.ElementStyle>
    <DataGridComboBoxColumn.EditingElementStyle>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.CompanyItems, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
        </Style>
    </DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>

在这里您可以找到解决您所面临问题的另一种解决方案：在 WPF 中使用组合框数据网格

Answer 2

正确的解决方案似乎是：

<Window.Resources>
    <CollectionViewSource x:Key="ItemsCVS" Source="{Binding MyItems}" />
</Window.Resources>
<!-- ... -->
<DataGrid ItemsSource="{Binding MyRecords}">
    <DataGridComboBoxColumn Header="Column With Predefined Values"
                            ItemsSource="{Binding Source={StaticResource ItemsCVS}}"
                            SelectedValueBinding="{Binding MyItemId}"
                            SelectedValuePath="Id"
                            DisplayMemberPath="StatusCode" />
</DataGrid>

上面的布局对我来说非常适合，并且应该对其他人也适用。这种设计选择也是有道理的，尽管在任何地方都没有得到很好的解释。但是，如果您有一个包含预定义值的数据列，那么这些值通常不会在运行时更改。因此，创建一个 CollectionViewSource 并初始化一次数据是有意义的。它还摆脱了较长的绑定来查找祖先并绑定到其数据上下文（这对我来说总是感觉不对）。

我将这个留给那些在这种绑定上苦苦挣扎的人，并想知道是否有更好的方法（因为这个页面显然仍然出现在搜索结果中，这就是我到达这里的方式）。

Answer 3

MSDN 上有关 ItemsSource 的文档>DataGridComboBoxColumn 表示只有静态资源、静态代码或组合框项的内联集合可以绑定到 ItemsSource：

要填充下拉列表，首先
设置 ItemsSource 属性
使用以下其中一项的组合框
选项：

• 静态资源。有关详细信息，请参阅静态资源标记
  扩展名。
• x：静态代码实体。有关详细信息，请参阅 x:静态标记
  扩展名。
• ComboBoxItem 类型的内联集合。

如果我理解正确的话，则不可能绑定到 DataContext 的属性。

事实上：当我在 ViewModel 中将 CompanyItems 设为 static 属性时……

public static ObservableCollection<CompanyItem> CompanyItems { get; set; }

将 ViewModel 所在的命名空间添加到窗口中……

xmlns:vm="clr-namespace:DataGridComboBoxColumnApp"

并且将绑定更改为 ...

<DataGridComboBoxColumn
    ItemsSource="{Binding Source={x:Static vm:ViewModel.CompanyItems}}" 
    DisplayMemberPath="Name"
    SelectedValuePath="ID"
    SelectedValueBinding="{Binding CompanyID}" />

... 然后就可以了。但是将 ItemsSource 作为静态属性有时可能没问题，但这并不总是我想要的。

Answer 4

我意识到这个问题已经存在一年多了，但我只是在处理类似问题时偶然发现了它，并认为我会分享另一个潜在的解决方案，以防它可能对未来的旅行者（或我自己，当我后来忘记这一点并发现自己时）有帮助在 StackOverflow 上翻来覆去，一边尖叫一边把最近的物体扔到我的桌子上）。

就我而言，我能够通过使用 DataGridTemplateColumn 而不是 DataGridComboBoxColumn 来获得我想要的效果，如以下代码片段所示。 [警告：我正在使用 .NET 4.0，我所阅读的内容让我相信 DataGrid 已经做了很多改进，所以如果使用早期版本，YMMV]

<DataGridTemplateColumn Header="Identifier_TEMPLATED">
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox IsEditable="False" 
                Text="{Binding ComponentIdentifier,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                ItemsSource="{Binding Path=ApplicableIdentifiers, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ComponentIdentifier}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Answer 5

RookieRick 是对的，使用 DataGridTemplateColumn 而不是 DataGridComboBoxColumn 可以提供更简单的 XAML。

此外，通过将 CompanyItem 列表直接从 GridItem 访问，您可以摆脱 RelativeSource。

恕我直言，这为您提供了一个非常干净的解决方案。

XAML：

<DataGrid AutoGenerateColumns="False" ItemsSource="{Binding GridItems}" >
    <DataGrid.Resources>
        <DataTemplate x:Key="CompanyDisplayTemplate" DataType="vm:GridItem">
            <TextBlock Text="{Binding Company}" />
        </DataTemplate>
        <DataTemplate x:Key="CompanyEditingTemplate" DataType="vm:GridItem">
            <ComboBox SelectedItem="{Binding Company}" ItemsSource="{Binding CompanyList}" />
        </DataTemplate>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Name}" />
        <DataGridTemplateColumn CellTemplate="{StaticResource CompanyDisplayTemplate}"
                                CellEditingTemplate="{StaticResource CompanyEditingTemplate}" />
    </DataGrid.Columns>
</DataGrid>

视图模型：

public class GridItem
{
    public string Name { get; set; }
    public CompanyItem Company { get; set; }
    public IEnumerable<CompanyItem> CompanyList { get; set; }
}

public class CompanyItem
{
    public int ID { get; set; }
    public string Name { get; set; }

    public override string ToString() { return Name; }
}

public class ViewModel
{
    readonly ObservableCollection<CompanyItem> companies;

    public ViewModel()
    {
        companies = new ObservableCollection<CompanyItem>{
            new CompanyItem { ID = 1, Name = "Company 1" },
            new CompanyItem { ID = 2, Name = "Company 2" }
        };

        GridItems = new ObservableCollection<GridItem> {
            new GridItem { Name = "Jim", Company = companies[0], CompanyList = companies}
        };
    }

    public ObservableCollection<GridItem> GridItems { get; set; }
}

Answer 6

您的 ComboBox 正在尝试绑定到 GridItem[x].CompanyItems，但它不存在。

您的RelativeBinding很接近，但是它需要绑定到DataContext.CompanyItems，因为Window.CompanyItems不存在

Answer 7

我使用的最简单的方法是将文本块和组合框绑定到同一属性，并且该属性应该支持notifyPropertyChanged。

我使用relativeresource绑定到父视图数据上下文，这是用户控件，以在绑定中提升数据网格级别，因为在这种情况下，数据网格将在您在datagrid.itemsource中使用的对象中搜索

<DataGridTemplateColumn Header="your_columnName">
     <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
             <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.SelectedUnit.Name, Mode=TwoWay}" />
           </DataTemplate>
     </DataGridTemplateColumn.CellTemplate>
     <DataGridTemplateColumn.CellEditingTemplate>
           <DataTemplate>
            <ComboBox DisplayMemberPath="Name"
                      IsEditable="True"
                      ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.UnitLookupCollection}"
                       SelectedItem="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.SelectedUnit, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      SelectedValue="{Binding UnitId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      SelectedValuePath="Id" />
            </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

Answer 8

这对我有用：

<DataGridTemplateColumn Width="*" Header="Block Names">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ComboBox
                VerticalContentAlignment="Center"
                ItemsSource="{Binding DataContext.LayerNames,
                RelativeSource={RelativeSource Findancestor,
                AncestorType={x:Type Window}}}"
                SelectedItem="{Binding LayerName, Mode=TwoWay,
                UpdateSourceTrigger=PropertyChanged}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>