silverlight中Combox繫結資料以及動態繫結預設選定項的用法

雲霏霏發表於2014-06-04

在Sliverlight中，經常要用到下拉框Combox，然而Combox的資料繫結卻是一件令初學者很頭疼的事情。今天就來總結一下下拉框的使用方法：

下面寫一個簡單的例子吧。先寫一個日期的Model，程式碼如下：

   public class Date
   {
      public string DateName { get; set; }
      public string DateValue { get; set; }
      public Date()
      {
      }
      public Date(string name, string value)
      {
         this.DateName = name;
         this.DateValue = value;
      }
   }

這裡就用簡單的MVVM模式，再寫一個DateViewModel，程式碼如下：

public class DateViewModel
   {
      public List<Date> Months { get; set; }
      public string  currMonth { get; set; }

      public DateViewModel()
      {
         Months = new List<Date>();
         for (int i = 1; i <= 12; i++)
         {
            Months.Add(new Date(i+"month",i.ToString()));
         }
         currMonth = "3";
      }

   }

在類的建構函式中，初始化所有的月份，以便繫結到前臺。到這裡後臺程式碼寫完了，下面開始繫結下拉框,下面是XAML程式碼：

<UserControl x:Class="SilverlightMVVM.MainPage"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
　　xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
　　xmlns:local="clr-namespace:Silverlight.ViewModel"
　　mc:Ignorable="d"
　　d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
　　<local:DateViewModel x:Key="DateVM" />
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource DateVM}}">

　　<ComboBox ItemsSource="{Binding Months}"
　　　　　　SelectedValuePath="DateValue"
　　　　　　DisplayMemberPath="DateName"
　　　　　　SelectedValue="{Binding currMonth}"
　　　　　　Height="23"
　　　　　　Name="comboBox1"
　　　　　　Width="120" />

</Grid>
</UserControl>

注意程式碼中標紅的地方，xmlns:local="clr-namespace:Silverlight.ViewModel",這裡引入名稱空間。

然後繫結到Grid的DataContext上面。

DisplayMemberPath   就是下拉框顯示的內容

SelectedValuePath    就是下拉框的Value值

SelectedValue          預設選定的項，可根據繫結的值改變

至此，下拉框的繫結就完成了。

 

相關文章