DataGrid中的WPF组合框
[英]WPF combobox in DataGrid
问题描述
This is an example exhibiting the behaviour I'm having trouble with. 
这是一个展示我遇到问题的示例。 I have a datagrid which is bound to an observable collection of records in a viewmodel. 我有一个数据网格，它绑定到一个视图模型中可观察的记录集合。 In the datagrid I have a DataGridTemplateColumn holding a combobox which is populated from a list in the viewmodel. 在数据网格中，我有一个DataGridTemplateColumn，其中包含一个组合框，该组合框是从viewmodel中的列表填充的。 The datagrid also contains text columns. 该数据网格还包含文本列。 There are some textboxes at the bottom of the window to show the record contents. 窗口底部有一些文本框显示记录内容。
<Window x:Class="Customer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Customer"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:SelectedRowConverter x:Key="selectedRowConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<DataGrid x:Name="dgCustomers" AutoGenerateColumns="False"
ItemsSource="{Binding customers}" SelectedItem="{Binding SelectedRow,
Converter={StaticResource selectedRowConverter}, Mode=TwoWay}"
CanUserAddRows="True" Grid.Row="0" >
<DataGrid.Columns>
<DataGridTemplateColumn Width="Auto" Header="Country">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox x:Name="cmbCountry" ItemsSource="{Binding DataContext.countries,
RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
DisplayMemberPath="name" SelectedValuePath="name" Margin="5"
SelectedItem="{Binding DataContext.SelectedCountry,
RelativeSource={RelativeSource AncestorType={x:Type Window}}, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}" SelectionChanged="cmbCountry_SelectionChanged" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Name" Binding="{Binding name}" Width="1*"/>
<DataGridTextColumn Header="Phone" Binding="{Binding phone}" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
<Grid x:Name="grdDisplay" DataContext="{Binding ElementName=dgCustomers}" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="2" Content="Country:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Label Grid.Column="4" Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<BulletDecorator Grid.Column="0">
<BulletDecorator.Bullet>
<Label Content="Name:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtId" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.name}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="1">
<BulletDecorator.Bullet>
<Label Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtCode" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.countryCode}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="2">
<BulletDecorator.Bullet>
<Label Content="Phone:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtPhone" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.phone}" Margin="5,5,5,5"/>
</BulletDecorator>
</Grid>
</Grid>
</Window>
Initially there are no records so the datagrid is empty and shows just one line containing the combobox. 最初没有记录，因此datagrid为空，仅显示包含组合框的一行。 If the user enters data into the text columns first then a record is added to the collection and the combobox value can be added to the record. 如果用户首先在文本列中输入数据，则将记录添加到集合中，并将组合框值添加到记录中。 However, if the user selects the combobox value first, then the value disappears when another column is selected. 但是，如果用户首先选择组合框值，则在选择另一列时该值将消失。 How do I get the combobox data added to the record if it is selected first? 如果首先选择组合框数据，如何将其添加到记录中？
Codebehind: 代码背后：
public partial class MainWindow : Window
{
public GridModel gridModel { get; set; }
public MainWindow()
{
InitializeComponent();
gridModel = new GridModel();
//dgCustomers.DataContext = gridModel;
this.DataContext = gridModel;
}
private void cmbCountry_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBox c = sender as ComboBox;
Debug.Print("ComboBox selection changed, index is " + c.SelectedIndex + ", selected item is " + c.SelectedItem);
}
}
The Record class: 记录类：
public class Record : ViewModelBase
{
private string _name;
public string name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("name");
}
}
private string _phone;
public string phone
{
get { return _phone; }
set
{
_phone = value;
OnPropertyChanged("phone");
}
}
private int _countryCode;
public int countryCode
{
get { return _countryCode; }
set
{
_countryCode = value;
OnPropertyChanged("countryCode");
}
}
}
Country class: 国家/地区类别：
public class Country : ViewModelBase
{
private string _name;
public string name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("name");
}
}
private int _id;
public int id
{
get { return _id; }
set
{
_id = value;
OnPropertyChanged("id");
}
}
private int _code;
public int code
{
get { return _code; }
set
{
_code = value;
OnPropertyChanged("code");
}
}
public override string ToString()
{
return _name;
}
}
GridModel: GridModel：
public class GridModel : ViewModelBase
{
public ObservableCollection<Record> customers { get; set; }
public List<Country> countries { get; set; }
public GridModel()
{
customers = new ObservableCollection<Record>();
countries = new List<Country> { new Country { id = 1, name = "England", code = 44 }, new Country { id = 2, name = "Germany", code = 49 },
new Country { id = 3, name = "US", code = 1}, new Country { id = 4, name = "Canada", code = 11 }};
}
private Country _selectedCountry;
public Country SelectedCountry
{
get
{
return _selectedCountry;
}
set
{
_selectedCountry = value;
_selectedRow.countryCode = _selectedCountry.code;
OnPropertyChanged("SelectedRow");
}
}
private Record _selectedRow;
public Record SelectedRow
{
get
{
return _selectedRow;
}
set
{
_selectedRow = value;
Debug.Print("Datagrid selection changed");
OnPropertyChanged("SelectedRow");
}
}
}
Converters: 转换器：
class Converters
{
}
public class SelectedRowConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is Record)
return value;
return new Customer.Record();
}
}
ViewModelBase: ViewModelBase：
public class ViewModelBase : INotifyPropertyChanged
{
public ViewModelBase()
{
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
Thanks for helping! 感谢您的帮助！
EDIT Thanks for the help Mark, I'm running the code you provided in your answer below, but I'm still not getting a country code in the text box at the bottom of the window. 编辑感谢您的帮助，马克，我正在运行您在下面的答案中提供的代码，但是在窗口底部的文本框中仍未获得国家代码。 I'm getting these errors: 我收到这些错误：
System.Windows.Data Error: 23 : Cannot convert '{NewItemPlaceholder}' from type 'NamedObject' to type 'CustomersFreezable.RecordViewModel' for 'en-US' culture with default conversions;
System.Windows.Data Error: 7 : ConvertBack cannot convert value '{NewItemPlaceholder}' (type 'NamedObject').
System.Windows.Data Error: 40 : BindingExpression path error: 'countryCode' property not found on 'object' ''RecordViewModel' (HashCode=47081572)'.
System.Windows.Data Error: 23 : Cannot convert '{NewItemPlaceholder}' from type 'NamedObject' to type 'CustomersFreezable.RecordViewModel' for 'en-US' culture with default conversions;
System.Windows.Data Error: 7 : ConvertBack cannot convert value '{NewItemPlaceholder}' (type 'NamedObject').
System.Windows.Data Error: 40 : BindingExpression path error: 'countryCode' property not found on 'object' ''RecordViewModel' (HashCode=47081572)'.
I've tried to address the BindingExpression path error by altering the static resource: 我试图通过更改静态资源来解决BindingExpression路径错误：
<local:BindingProxy x:Key="CountryProxy" Data="{Binding}" />
and therefore the ItemsSource of the DataGrid: 因此是DataGrid的ItemsSource：
ItemsSource="{Binding Source={StaticResource ResourceKey=CountryProxy}, Path=Data.countries}" DisplayMemberPath="name"
and the binding of the textbox: 以及文本框的绑定：
<TextBox x:Name="txtCode" Text="{Binding Path=record.countryCode}" Margin="5,5,5,5"/>
That gets rid of the Error 40 but still I'm not seeing anything in the textbox. 那摆脱了错误40，但仍然没有在文本框中看到任何内容。 Can you tell me what's wrong? 你能告诉我怎么了吗？
1 个解决方案
解决方案1
4 已采纳 2015-10-06 22:48:26
Forgive me for being honest but there are many things wrong with this code. 原谅我的诚实，但是这段代码有很多问题。
First of all there are some serious deviations from MVVM. 首先，与MVVM存在一些严重偏差。 MVVM is a layered architecture...first there's the model, then the view model on top, then the view on top of that. MVVM是一个分层的体系结构...首先是模型，然后是视图模型，然后是视图。 Converters are technically part of the view but if anything they are on the other side of the view than the view models. 从技术上讲，转换器是视图的一部分，但如果有的话，它们也位于视图模型的另一侧。 What you're doing is using a converter to generate new records in what effectively should be your model: 您正在做的是使用转换器来生成新记录，该记录实际上应该是您的模型：
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is Record)
return value;
return new Customer.Record(); <<<<<<<< this here
}
Any time you have converters working directly with non-view classes it's a good indication that your view model isn't doing its job properly, and it almost always leads to broken bindings and buggy behavior. 每当您的转换器直接与非视图类一起使用时，就可以很好地表明您的视图模型无法正常工作，并且几乎总是会导致绑定断开和错误行为。
Another problem is that your Record class looks like it was intended to be the model, namely because it has an integer code for the country instead of a reference to an instance of the Country class. 另一个问题是，您的Record类看起来像是要用作模型的，即因为它具有用于国家/地区的整数代码，而不是对Country类的实例的引用。 Yet this class is being derived from ViewModelBase and does property change notification. 但是，此类是从ViewModelBase派生的，并且进行属性更改通知。 Furthermore the one field that is of type Country (ie SelectedCountry in your GridModel) is being bound to by all your records, so changing the country code for one changes them all! 此外，所有记录都绑定到国家（即GridModel中的SelectedCountry）类型的一个字段，因此更改一个国家的代码将全部更改！
To answer your specific question though, the problem was that DataGrid doesn't create a new record until it detects that one of the fields has been edited. 但是，要回答您的特定问题，问题在于DataGrid在检测到其中一个字段已被编辑之前不会创建新记录。 In this case your binding to the SelectedRow wasn't in the record itself, so the record wasn't being created and the value wasn't being propagated through. 在这种情况下，您与SelectedRow的绑定不在记录本身中，因此不会创建记录，也不会传播值。
Here's a fixed version that adheres to MVVM a bit better and fixes the binding issues: 这是一个固定版本，可更好地遵循MVVM并解决了绑定问题：
// record model
public class Record
{
public string name {get; set;}
public string phone { get; set; }
public int countryCode {get; set;}
}
// record view model
public class RecordViewModel : ViewModelBase
{
private Record record = new Record();
public string name
{
get { return record.name; }
set
{
record.name = value;
RaisePropertyChanged("name");
}
}
public string phone
{
get { return record.phone; }
set
{
record.phone = value;
RaisePropertyChanged("phone");
}
}
private Country _country;
public Country country
{
get { return _country; }
set
{
_country = value;
record.countryCode = value.code;
RaisePropertyChanged("country");
}
}
}
public class Country : ViewModelBase
{
private string _name;
public string name
{
get { return _name; }
set
{
_name = value;
RaisePropertyChanged("name");
}
}
private int _id;
public int id
{
get { return _id; }
set
{
_id = value;
RaisePropertyChanged("id");
}
}
private int _code;
public int code
{
get { return _code; }
set
{
_code = value;
RaisePropertyChanged("code");
}
}
public override string ToString()
{
return _name;
}
}
public class GridModel : ViewModelBase
{
public ObservableCollection<RecordViewModel> customers { get; set; }
public List<Country> countries { get; set; }
public GridModel()
{
customers = new ObservableCollection<RecordViewModel>();
countries = new List<Country> { new Country { id = 1, name = "England", code = 44 }, new Country { id = 2, name = "Germany", code = 49 },
new Country { id = 3, name = "US", code = 1}, new Country { id = 4, name = "Canada", code = 11 }};
}
private RecordViewModel _selectedRow;
public RecordViewModel SelectedRow
{
get
{
return _selectedRow;
}
set
{
_selectedRow = value;
Debug.Print("Datagrid selection changed");
RaisePropertyChanged("SelectedRow");
}
}
}
// this is needed for when you need to bind something that isn't part of the visual tree (i.e. your combobox dropdowns)
// see http://www.thomaslevesque.com/2011/03/21/wpf-how-to-bind-to-data-when-the-datacontext-is-not-inherited/ for details
public class BindingProxy : Freezable
{
#region Overrides of Freezable
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
#endregion
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
// Using a DependencyProperty as the backing store for Data. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
And the XAML: 和XAML：
<Window.Resources>
<local:BindingProxy x:Key="CountryProxy" Data="{Binding Path=countries}" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<DataGrid x:Name="dgCustomers" AutoGenerateColumns="False"
ItemsSource="{Binding customers}" SelectedItem="{Binding SelectedRow, Mode=TwoWay}"
CanUserAddRows="True" Grid.Row="0" >
<DataGrid.Columns>
<DataGridComboBoxColumn Header="Country"
ItemsSource="{Binding Source={StaticResource ResourceKey=CountryProxy}, Path=Data}" DisplayMemberPath="name"
SelectedItemBinding="{Binding country, UpdateSourceTrigger=PropertyChanged}" />
<DataGridTextColumn Header="Name" Binding="{Binding name, UpdateSourceTrigger=PropertyChanged}" Width="1*" />
<DataGridTextColumn Header="Phone" Binding="{Binding phone, UpdateSourceTrigger=PropertyChanged}" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
<Grid x:Name="grdDisplay" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="2" Content="Country:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Label Grid.Column="4" Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<BulletDecorator Grid.Column="0">
<BulletDecorator.Bullet>
<Label Content="Name:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtId" Text="{Binding Path=SelectedRow.name}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="1">
<BulletDecorator.Bullet>
<Label Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtCode" Text="{Binding Path=SelectedRow.country.code}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="2">
<BulletDecorator.Bullet>
<Label Content="Phone:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtPhone" Text="{Binding Path=SelectedRow.phone}" Margin="5,5,5,5"/>
</BulletDecorator>
</Grid>
</Grid>
Forget the converter, you don't need it. 忘记转换器，您不需要它。 The one problem this code does introduce is that you now need to click on the combo box twice: first to select the row and then again to edit it. 此代码确实引起的一个问题是，您现在需要单击组合框两次：首先选择该行，然后再次对其进行编辑。 But there are plenty of places around the net showing how to fix that so I'll leave it to you. 但是网上有很多地方显示如何解决此问题，所以我留给您。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.