天天看點

WPF ComboBox 下拉框綁定 Binding

WPF ComboBox 下拉框綁定 Binding

XAML:

<Window.DataContext>
    <local:VMTempTest/>
</Window.DataContext>
<Grid>
    <StackPanel Margin="10,20,10,20" >
        <DockPanel x:Name="Combbox" Margin="0 10 0 0" >
            <StackPanel DockPanel.Dock="Left">
                <ComboBox Width="200"  HorizontalAlignment="Left" ItemsSource="{Binding CombboxList}" 
                          SelectedItem="{Binding CombboxItem}" DisplayMemberPath="Text" SelectedValuePath="Key" ></ComboBox>
            </StackPanel>

            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Center" Margin="20 0 0 0" DataContext="{Binding CombboxItem}" >
                <TextBlock Text="{Binding Key,StringFormat='結果:\{0\}'}" Margin="0,0,15,0" ></TextBlock>
                <TextBlock Text="{Binding Text}"></TextBlock>
            </StackPanel>

        </DockPanel>
    </StackPanel>
</Grid>      

Model:

public class ComplexInfoModel : ObservableObject
{
    private String key;
    /// <summary>
    /// Key值
    /// </summary>
    public String Key
    {
        get { return key; }
        set { key = value; RaisePropertyChanged(() => Key); }
    }

    private String text;
    /// <summary>
    /// Text值
    /// </summary>
    public String Text
    {
        get { return text; }
        set { text = value; RaisePropertyChanged(() => Text); }
    }
}      

ViewModel:

public class VMTempTest : ViewModelBase
{
    public VMTempTest()
    {
        CombboxList = new ObservableCollection<ComplexInfoModel>() {
          new ComplexInfoModel(){ Key="1",Text="蘋果" },
          new ComplexInfoModel(){ Key="2",Text="香蕉" },
          new ComplexInfoModel(){ Key="3",Text="梨" },
          new ComplexInfoModel(){ Key="4",Text="櫻桃" },
        };

        combboxItem = CombboxList[0];  // 預設選中第一個
    }


    private ComplexInfoModel combboxItem;
    /// <summary>
    /// 下拉框選中資訊
    /// </summary>
    public ComplexInfoModel CombboxItem
    {
        get { return combboxItem; }
        set { combboxItem = value; RaisePropertyChanged(() => CombboxItem); }
    }

    private ObservableCollection<ComplexInfoModel> combboxList;
    /// <summary>
    /// 下拉框清單
    /// </summary>
    public ObservableCollection<ComplexInfoModel> CombboxList
    {
        get { return combboxList; }
        set { combboxList = value; RaisePropertyChanged(() => CombboxList); }
    }
}      

說明:CombboxItem 是一個全局的屬性,作用在目前頁面的資料上下文中,結果顯示的内容指向下拉框中的選中值,達到共用一個資料的目的。

這邊有四個地方需要注意的:ItemsSource:資料源;SelectedItem:選中的項;DisplayMemberPath:綁定時顯示的所屬值;SelectedValuePath :綁定時候key的所屬值。