1. 程式人生 > >關於mvvm的ComboBox繫結SelectedValue值不正確問題

關於mvvm的ComboBox繫結SelectedValue值不正確問題

我的自定義下拉物件

    public class ComboBoxModel
    {
        //基礎屬性
        public int SelectedIndex { get; set; }
        public string SelectedValue { get; set; }

        //附加屬性
        public string ImagePath { get; set; }
        public bool IsSelected { get; set; }

        //碼錶屬性
        public int Id { get; set; }
        public int SortNumber { get; set; }
        public int NodeKey { get; set; }
        public string NodeCode { get; set; }
        public string NodeName { get; set; }

        //建構函式
        public ComboBoxModel()
        {
            SelectedIndex = 0;
            SelectedValue = null;
        }
        public ComboBoxModel(int index, string value)
        {
            SelectedIndex = index;
            SelectedValue = value;
        }

    }
在viewModel中的繫結引數
        public ObservableCollection<ComboBoxModel> CardType { get; set; }
        public ComboBoxModel CardTypeSelected { get; set; }

前端頁面

<ComboBox Grid.Row="3" Grid.Column="4" 
	VerticalAlignment="Center"  VerticalContentAlignment="Center" 
	ItemsSource="{Binding DataContent.CardType}"
	DisplayMemberPath="SelectedValue" 
	SelectedValuePath="SelectedValue"
	SelectedIndex="{Binding DataContent.CardTypeSelected.SelectedIndex,Mode=TwoWay}"
	SelectedValue="{Binding DataContent.CardTypeSelected.SelectedValue,Mode=TwoWay}"
/>


我的ItemsSource繫結的是一個ComboBoxModel型別的物件列表,就是要告訴頁面我的下拉選單裡每個選項是什麼內容

ItemsSource="{Binding DataContent.CardType}"

這裡ObservableCollection<ComboBoxModel>和List<ComboBoxModel>意義相同,但是在MVVM裡前者可與頁面繫結互動,所以儘量用前者

在這個物件列表中的每一個選項本身是一個ComboBoxModel型別,且有兩個屬性:

SelectedIndex

SelectedValue

所以我需要明確告訴前端頁面我顯示的路徑是哪裡,選中引數的儲存路徑又是哪裡

DisplayMemberPath="SelectedValue" //顯示成員的路徑

SelectedValuePath="SelectedValue"//選中引數的路徑

所以在指定這兩項後,前端下拉選單才能正確的顯示ItemsSource的內容

如果不設定這兩個路徑,前端頁面就不知道這個自定義ComboBoxModel物件究竟要顯示什麼,很大可能性你得到的一個結果就是一長串ComboBoxModel的型別描述字串

然後就可以繫結具體的接收SelectedIndex和SelectedValue的引數了,例如:

SelectedIndex="{Binding DataContent.CardTypeSelected.SelectedIndex,Mode=TwoWay}"
SelectedValue="{Binding DataContent.CardTypeSelected.SelectedValue,Mode=TwoWay}"

因為設定了TwoWay,所以若你的上下文DataContent實現雙工介面的情況下就可以在後端更新前端資料了

public class ShowDialogEmployeeModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnChangedProperties(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    }

上面程式碼是DataContent的雙工介面舉例