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 屬性:

• 1、靜態資源。有關更多信息，請參見 StaticResource 標記擴展。

• 2、x: 靜態代碼實體。有關更多信息，請參見 x:Static 標記擴展。

• 3、ComboBoxItem 類型的內聯集合。

　　於是，試試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>

　　

　　問題圓滿解決，其實也不難，只是不知道，沒想到而已，大家可以看看。

      好多人在評論里要DEMO，我沒有時間去一個一個發，直接就把前面例子的DEMO放這了，大家自行下載吧！

　　轉載請注明原址：http://www.cnblogs.com/lekko/archive/2012/11/23/2784789.html