自定义FloatingLabelComboBox绑定异常及控件联动设置咨询

问题说明 #

开发自定义FloatingLabelComboBox控件，实现两个控件联动：一个选择学生，另一个显示对应学生的血型列表。遇到两个问题：

1. Q1：FloatingLabelComboBox无法将选中项绑定同步到后台ViewModel
2. Q2：第二个ComboBox无法与第一个ComboBox的选中项联动更新血型列表

Q1 问题原因与修复 #

核心问题 #

自定义控件模板中，内部ComboBox的SelectedItem使用了TemplateBinding，而TemplateBinding默认是单向绑定，无法将UI的选中值同步回ViewModel的绑定属性。此外，StudentModel中StudentId的属性变更通知存在错误。

修复步骤 #

1. 修改控件模板中的绑定方式
   将内部ComboBox的SelectedItem绑定替换为RelativeSource绑定，明确设置双向模式：

<ComboBox x:Name="comboBox" 
          ItemsSource="{TemplateBinding ItemsSource}"
          SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem, Mode=TwoWay}"
          DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
          <!-- 其他属性保持不变 -->
/>

2. 修正StudentModel的属性变更通知
   StudentId属性的OnPropertyChanged参数错误，应传入属性名而非私有字段名：

private int _studentId;
public int StudentId
{
    get => _studentId;
    set
    {
        if (value == _studentId) return;
        _studentId = value;
        OnPropertyChanged(nameof(StudentId)); // 修复参数
    }
}

Q2 联动功能修复 #

核心问题 #

第一个控件的双向绑定未生效（已在Q1中修复），导致SelectedStudent无法更新，进而第二个控件的ItemsSource="{Binding SelectedStudent.BloodGroup}"无法触发更新。

修复验证 #

完成Q1的修复后，第二个控件的ItemsSource绑定会自动跟随SelectedStudent的变化更新血型列表。ViewModel中SelectedStudent的属性变更通知已正确实现，无需额外修改。

可选优化 #

ViewModel中的BloodGroups属性未被使用，可移除简化代码：

// 移除未使用的属性
// public ObservableCollection<string> BloodGroups { get; private set; }

// 修改SelectedStudent的setter
public StudentModel SelectedStudent
{
    get { return _selectedStudent; }
    set
    {
        _selectedStudent = value;
        OnPropertyChanged(); // 仅保留属性变更通知即可
    }
}

完整修正后的关键代码 #

自定义控件模板（ResourceDictionary） #

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:local="clr-namespace:FloatingLabelComboBox"
    xmlns:custom="clr-namespace:FloatingLabelComboBox.CustomControls">
    
    <Style TargetType="{x:Type custom:FloatingLabelComboBox }">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type  custom:FloatingLabelComboBox }">
                    <StackPanel FlowDirection="LeftToRight">
                        <TextBlock Text="{TemplateBinding LabelText}"
                                   Foreground="{TemplateBinding LabelForeground}"
                                   FontSize="{TemplateBinding LabelFontSize}"
                                   VerticalAlignment="Stretch"
                                   Margin="-5 0 0 0" />

                        <ComboBox x:Name="comboBox" 
                                 ItemsSource="{TemplateBinding ItemsSource}"
                                 SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem, Mode=TwoWay}"
                                 DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
                                 materialdesign:HintAssist.IsFloating="False"
                                 materialdesign:ColorZoneAssist.Mode="Dark"
                                 materialdesign:HintAssist.HintOpacity="0.10"
                                 materialdesign:HintAssist.FontFamily="Century Gothic"
                                 Foreground="{TemplateBinding Foreground}" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

修正后的StudentModel #

public class StudentModel : INotifyPropertyChanged
{
    private int _studentId;
    public int StudentId
    {
        get => _studentId;
        set
        {
            if (value == _studentId) return;
            _studentId = value;
            OnPropertyChanged(nameof(StudentId));
        }
    }

    private string _studentName;
    public string StudentName
    {
        get => _studentName;
        set
        {
            _studentName = value;
            OnPropertyChanged();
        }
    }

    private ObservableCollection<string> _bloodgroup;
    public ObservableCollection<string> BloodGroup
    {
        get => _bloodgroup;
        set
        {
            _bloodgroup = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

简化后的ViewModel #

public class ViewModel : INotifyPropertyChanged
{
    public ViewModel()
    {
        this.Students = new ObservableCollection<StudentModel>()
        { 
            new StudentModel(){ StudentName = "Jane", BloodGroup = new ObservableCollection<string>() { "A", "B", "AB", "O"  }},
            new StudentModel(){ StudentName = "Jone",  BloodGroup = new ObservableCollection<string>()  { "A", "B", "AB", "O" }},
            new StudentModel(){ StudentName = "Tina", BloodGroup = new ObservableCollection<string>() {"A", "B", "AB", "O"}}
        };

        this.SelectedStudent = Students.FirstOrDefault();
    }

    public ObservableCollection<StudentModel> Students { get; private set; }

    private StudentModel _selectedStudent;
    public StudentModel SelectedStudent
    {
        get { return _selectedStudent; }
        set
        {
            _selectedStudent = value;
            OnPropertyChanged();
        }
    }

    private string _selectedBloodGroup ;
    public string SelectedBloodGroup
    {
        get { return _selectedBloodGroup; }
        set
        {
            _selectedBloodGroup = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

内容的提问来源于stack exchange，提问作者wpf