Code-Behind

構造ComboBoxItem類

ComboBox一般有兩個內容，一個是值Value，一個是顯示的Text，所有構造一個類，具有這兩個屬性

    public class ComboBoxItem
    {
        public string Value { get; set; }
        public string Text { get; set; }
        public ComboBoxItem(string Value, string Text)
        {
            this.Value = Value;
            this
 
.Text = Text;
        }
    }

MVVM相關

設定兩個屬性 ComboBoxItems和ComboBoxSelectedItem，分別存放ComboBox的Items集合和選定項

private ObservableCollection<ComboBoxItem> _ComboBoxItems = new ObservableCollection<ComboBoxItem>();
public ObservableCollection<ComboBoxItem> ComboBoxItems { get { return
 
 _ComboBoxItems; } set { Set(ref _ComboBoxItems, value); } }

private ComboBoxItem _ComboBoxSelectedItem = null;
public ComboBoxItem ComboBoxSelectedItem { get { return _ComboBoxSelectedItem; } set { Set(ref _ComboBoxSelectedItem, value); } }

這裡需要用到相關的幫助方法,實現屬性通知

public event PropertyChangedEventHandler PropertyChanged;

private
 
 void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
   if (Equals(storage, value))
   {
      return;
   }
   storage = value;
   OnPropertyChanged(propertyName);
}

private void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

同樣，頁面也要實現INotifyPropertyChanged繼承

 public sealed partial class MainPage : Page, INotifyPropertyChanged

雙向繫結

為了實現雙向繫結，需要配備一個轉換器Converter，因為在XAML中，SelectedItem是個object型別，而程式碼中的SelectedItem是個自定義ComboBoxItem型別，所以要有個轉換，讓介面上的變化傳遞到程式碼上的ComboBoxSelectedItem屬性上,這個轉換器是繼承自IValueConverter介面，實現兩個方法即可，這兩個方法就是告訴頁面和程式碼之間的轉換規則。

public class ComboBoxItemConvert:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value as ComboBoxItem;
    }
}

至此後臺程式碼部分都結束。

XAML

引入轉換器

因為定義了轉換器，轉換器的類和頁面的類不一樣，要通過頁面資源的方式引入進來

<Page
   ...
    xmlns:local="using:RaspberryPi3bPlatform.Views"
   ...>
    <Page.Resources>
        <local:ComboBoxItemConvert x:Key="ComboBoxItemConvert"/>
    </Page.Resources>

ComboBox

引入轉換器後，使用x:Bind這個UWP提供的繫結方法進行繫結即可

<ComboBox 
   ItemsSource="{x:Bind ComboBoxItems}" 
   SelectedItem="{x:Bind ComboBoxSelectedItem,Mode=TwoWay,Converter={StaticResource ComboBoxItemConvert}}}"
   SelectedValuePath="Value"
   DisplayMemberPath="Text"/>

測試程式碼

可以在後臺程式碼裡面直接設定ComboBoxSelectedItem的值，但要注意，設定的值一定要是在ComboBoxItems中的元素，這樣View才能做對比

public UdpServerPage()
{
  InitializeComponent();
  ComboBoxItems.Add(new ComboBoxItem("Value0", "Text0"));
  ComboBoxItems.Add(new ComboBoxItem("Value1", "Text1"));
  ComboBoxItems.Add(new ComboBoxItem("Value2", "Text2"));
  ComboBoxItems.Add(new ComboBoxItem("Value3", "Text3"));
  ComboBoxItems.Add(new ComboBoxItem("Value4", "Text4"));
  ComboBoxSelectedItem = ComboBoxItems.FirstOrDefault(f => f.Text == "Text1");
}

頁面選定項改動，可以通過下個斷點來檢視

public void Watch()
{
   var item = this.ComboBoxSelectedItem;
   this.ComboBoxSelectedItem = ComboBoxItems.FirstOrDefault(f => f.Text == "Text3");
}

變通方法

寫了Convert感覺程式碼亂亂的，還要新增頁面資源，為了避免這個出現，可以直接用string型別繫結到ComboBox的SelectedValue或SelectedText上，這樣就免了寫Convert這個東西了。