WPF使用DataGridComboBoxColumn完成绑定

 在使用DataGrid的时候,有时候需要使某些列为ComboBox,这时自然想到使用DataGridComboBoxColumn,但是如果使用的是ItemsSource数据绑定后台的对象,就会发现,这根本就不能用。

  首先,看有问题的代码:

后台代码:

using System.Windows;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace WPFTest
{
    /// <summary>
    /// 数据项
    /// </summary>
    public class DataItem
    {
        public int Value { get; set; }
        public DataItem(int val) { Value = val; }
    }
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 选中数据
            SelectedList.Add(new DataItem(1)); SelectedList.Add(new DataItem(2));
            // 可选数据
            SelectionList.Add(1); SelectionList.Add(2); SelectionList.Add(3);
        }

        /// <summary>
        /// 选中的数据列表
        /// </summary>
        public ObservableCollection<DataItem> SelectedList
        {
            get { return _selectedList; }
            set { _selectedList = value; }
        }
        private ObservableCollection<DataItem> _selectedList = new ObservableCollection<DataItem>();

        /// <summary>
        /// 可供选择的数据列表
        /// </summary>        
        public ObservableCollection<int> SelectionList
        {
            get { return _selectionList; }
            set { _selectionList = value; }
        }
        private ObservableCollection<int> _selectionList = new ObservableCollection<int>();

        // 显示选中的
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            TBX_Selected.Text = "";
            foreach (var item in SelectedList)
                TBX_Selected.Text += item.Value.ToString(" --->0<--- ");
        }

    }
}

前台为:

<Window x:Class="WPFTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPFTest" Name="this" Height="350" Width="525">
    <StackPanel>
        <DataGrid ItemsSource="{Binding Path=SelectedList,ElementName=this}" AutoGenerateColumns="False">
            <DataGrid.Columns>                
                <DataGridTextColumn Header="文本模式" Binding="{Binding Path=Value}" />                
                <DataGridComboBoxColumn Header="ComboBox模式"
                                        SelectedValueBinding="{Binding Path=Value}"
                                        ItemsSource="{Binding Path=SelectionList,ElementName=this}" />                
            </DataGrid.Columns>
        </DataGrid>
        <Button Content="观察选中的数据" Click="Button_Click" Margin="10"/>
        <TextBox Name="TBX_Selected" />
    </StackPanel>
</Window>

  在这里通过把Window控件的Name设置为this,然后在绑定的时候指定ElementName=this及Path属性来关联到后台数据源。为了测试是否有效,我还定义了一个TextBox来显示SelectedList中的数据的值。首先,可以肯定的是,用DataGridTextColumn一点问题也没有,数据可以正常地显示和更新,但是使用DataGridComboBoxColumn时问题就出现了,数据不能显示,就像什么都没有绑定上去一样:

  我在网上找了下资料,都与MSDN上的例子相似,DataGridComboBoxColumn对数据源有下面的要求:

 使用下列选项之一,若要填充下拉列表,首先设置 ComboBox 的 ItemsSource 属性:

  于是,试试DataGridTemplateColumn来做ComboBox:  

 <DataGridTemplateColumn Header="Template模式">
     <DataGridTemplateColumn.CellTemplate>
         <DataTemplate>
             <ComboBox SelectedValue="{Binding Path=Value}" ItemsSource="{Binding Path=SelectionList,ElementName=this}" />    
         </DataTemplate>
     </DataGridTemplateColumn.CellTemplate>
 </DataGridTemplateColumn>

  运行发现,显示是正常了,但是不论我怎么改,SelectedList中的数据都不带改变,我尝试设置了ComboBox的各项属性,也没有成功。但是非常奇怪的地方是,如果在选择后,去点了上面的DataGridComboBoxColumn ,数据就能正常正同步过去:

  我想这可能是DataGridComboBoxColumn在选择后会触发一个事件,完成同步工作。

  好了,这样还是不行,我去了stackoverflow上找资料,问题终于得到了解决。基本上原因是这样的:DataGrid的列并没有数据上下文,所以DataGridTemplateColumn中的ComoBox从未添加到“Visual Tree(可视化树)”中。只要Grid绘制了单元,并且得到了数据上下文后,就能正常地使用ItemsSource属性来完成绑定了。修正后的代码:

 <DataGridComboBoxColumn Header="ComboBox模式(修正)">
     <DataGridComboBoxColumn.EditingElementStyle>
         <Style TargetType="ComboBox">
             <Setter Property="ItemsSource" Value="{Binding Path=SelectionList,ElementName=this}" />
             <Setter Property="SelectedValue" Value="{Binding Path=Value}" />
         </Style>
     </DataGridComboBoxColumn.EditingElementStyle>
 </DataGridComboBoxColumn>

  这样,数据能够正常地同步了,但是如果不点中对应单元格,ComboBox就不会显示出来,只有点中了才显示,继续参考资料,问题原因是上面只设置了EditingElementStyle(编辑时样式),所以在选中编辑时就会出现ComboBox,要想一直显示,还得设置ElementStyle,使它和EditingElementStyle一样就行了:

<DataGridComboBoxColumn.ElementStyle>
    <Style TargetType="ComboBox">
        <Setter Property="ItemsSource" Value="{Binding Path=SelectionList,ElementName=this}" />
        <Setter Property="SelectedValue" Value="{Binding Path=Value}" />
    </Style>
</DataGridComboBoxColumn.ElementStyle>

  

  问题圆满解决,其实也不难,只是不知道,没想到而已,大家可以看看。

  转载请注明原址:http://www.cnblogs.com/lekko/archive/2012/11/23/2784789.html

原文地址:https://www.cnblogs.com/xcsn/p/4387740.html