DataGrid 中的 WPF 组合框

Question

DataGrid 中的 WPF 组合框

Tim*_*ler -1 c# wpf datagrid combobox mvvm

这是一个展示我遇到问题的行为的示例。我有一个数据网格，它绑定到视图模型中的可观察记录集合。在数据网格中，我有一个 DataGridTemplateColumn 包含一个组合框，该组合框是从视图模型中的列表填充的。数据网格还包含文本列。窗口底部有一些文本框来显示记录内容。

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

Run Code Online (Sandbox Code Playgroud)

最初没有记录，所以数据网格是空的，只显示包含组合框的一行。如果用户首先在文本列中输入数据，则将向集合中添加一条记录，并且可以将组合框值添加到该记录中。但是，如果用户首先选择组合框值，则在选择另一列时该值会消失。如果首先选择组合框数据，如何将组合框数据添加到记录中？

代码隐藏：

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);
    }
}

Run Code Online (Sandbox Code Playgroud)

记录类：

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");
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

国家级：

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

Run Code Online (Sandbox Code Playgroud)

网格模型：

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");
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

转换器：

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();
    }
}

Run Code Online (Sandbox Code Playgroud)

视图模型库：

public class ViewModelBase : INotifyPropertyChanged
{
    public ViewModelBase()
    {

    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

感谢您的帮助！

编辑感谢马克的帮助，我正在运行您在下面的答案中提供的代码，但我仍然没有在窗口底部的文本框中获得国家/地区代码。我收到这些错误：

System.Windows.Data 错误：23：无法将 '{NewItemPlaceholder}' 从类型 'NamedObject' 转换为类型 'CustomersFreezable.RecordViewModel' 的“en-US”区域性和默认转换；考虑使用 Binding 的 Converter 属性。NotSupportedException:'System.NotSupportedException: TypeConverter 无法从 MS.Internal.NamedObject 转换。在 System.ComponentModel.TypeConverter.GetConvertFromException(Object value) 在 System.ComponentModel.TypeConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value) 在 MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfo 文化，布尔值 isForward)'

System.Windows.Data 错误：7：ConvertBack 无法转换值“{NewItemPlaceholder}”（类型“NamedObject”）。BindingExpression:Path=SelectedRow; DataItem='GridModel' (HashCode=62992796); 目标元素是 'DataGrid' (Name='dgCustomers'); 目标属性是“SelectedItem”（类型“Object”）NotSupportedException:“System.NotSupportedException：TypeConverter 无法从 MS.Internal.NamedObject 转换。在 MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfoculture, Boolean isForward) at MS.Internal.Data.ObjectTargetConverter.ConvertBack(Object o, Type type, Object parameter, CultureInfo culture) at System.Windows.Data.BindingExpression.ConvertBackHelper(IValueConverter 转换器，对象值，类型源类型，对象参数，

System.Windows.Data 错误：40：BindingExpression 路径错误：在“object”“RecordViewModel”（HashCode=47081572）上找不到“countryCode”属性。BindingExpression:Path=SelectedItem.countryCode; DataItem='DataGrid' (Name='dgCustomers'); 目标元素是 'TextBox' (Name='txtCode'); 目标属性是“文本”（类型“字符串”）

System.Windows.Data 错误：23：无法将 '{NewItemPlaceholder}' 从类型 'NamedObject' 转换为类型 'CustomersFreezable.RecordViewModel' 的“en-US”区域性和默认转换；考虑使用 Binding 的 Converter 属性。NotSupportedException:'System.NotSupportedException: TypeConverter 无法从 MS.Internal.NamedObject 转换。在 System.ComponentModel.TypeConverter.GetConvertFromException(Object value) 在 System.ComponentModel.TypeConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value) 在 MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfo 文化，布尔值 isForward)'

System.Windows.Data 错误：7：ConvertBack 无法转换值“{NewItemPlaceholder}”（类型“NamedObject”）。BindingExpression:Path=SelectedRow; DataItem='GridModel' (HashCode=62992796); 目标元素是 'DataGrid' (Name='dgCustomers'); 目标属性是“SelectedItem”（类型“Object”）NotSupportedException:“System.NotSupportedException：TypeConverter 无法从 MS.Internal.NamedObject 转换。在 MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfoculture, Boolean isForward) at MS.Internal.Data.ObjectTargetConverter.ConvertBack(Object o, Type type, Object parameter, CultureInfo culture) at System.Windows.Data.BindingExpression.ConvertBackHelper(IValueConverter 转换器，对象值，类型源类型，对象参数，

System.Windows.Data 错误：40：BindingExpression 路径错误：在“object”“RecordViewModel”（HashCode=47081572）上找不到“countryCode”属性。BindingExpression:Path=SelectedItem.countryCode; DataItem='DataGrid' (Name='dgCustomers'); 目标元素是 'TextBox' (Name='txtCode'); 目标属性是“文本”（类型“字符串”）

我试图通过改变静态资源来解决 BindingExpression 路径错误：

<local:BindingProxy x:Key="CountryProxy" Data="{Binding}" />

Run Code Online (Sandbox Code Playgroud)

因此是 DataGrid 的 ItemsSource：

ItemsSource="{Binding Source={StaticResource ResourceKey=CountryProxy}, Path=Data.countries}" DisplayMemberPath="name"

Run Code Online (Sandbox Code Playgroud)

和文本框的绑定：

<TextBox x:Name="txtCode" Text="{Binding Path=record.countryCode}" Margin="5,5,5,5"/>

Run Code Online (Sandbox Code Playgroud)

这摆脱了错误 40，但我仍然没有在文本框中看到任何内容。你能告诉我有什么问题吗？

Answer 1

Mar*_*man 5

恕我直言，但这段代码有很多问题。

首先，与 MVVM 存在一些严重的偏差。MVVM 是一种分层架构……首先是模型，然后是视图模型，然后是视图。转换器在技术上是视图的一部分，但如果有的话，它们位于视图的另一侧而不是视图模型。您正在做的是使用转换器在有效的模型中生成新记录：

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
    if (value is Record)
        return value;
    return new Customer.Record(); <<<<<<<< this here
}

Run Code Online (Sandbox Code Playgroud)

任何时候你的转换器直接使用非视图类，这都是一个很好的迹象，表明你的视图模型没有正确地完成它的工作，它几乎总是导致绑定中断和错误行为。

另一个问题是您的 Record 类看起来像是打算成为模型，即因为它具有国家的整数代码而不是对 Country 类实例的引用。然而，这个类是从 ViewModelBase 派生的，并进行属性更改通知。此外，Country 类型的一个字段（即您的 GridModel 中的 SelectedCountry）被您的所有记录绑定，因此更改一个的国家/地区代码会将它们全部更改！

不过，要回答您的具体问题，问题在于 DataGrid 在检测到其中一个字段已被编辑之前不会创建新记录。在这种情况下，您对 SelectedRow 的绑定不在记录本身中，因此不会创建记录并且不会传播该值。

这是一个更符合 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));
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

忘记转换器，你不需要它。此代码确实引入的一个问题是您现在需要单击组合框两次：首先选择该行，然后再次对其进行编辑。但是网上有很多地方展示了如何解决这个问题，所以我把它留给你。

归档时间：	10 年，4 月前
查看次数：	1102 次
最近记录：	9 年，1 月前