需求:下拉框选项带若干个勾选功能
技巧:使用单向绑定级联CheckBox的IsChecked属性,现实自动关联勾选,也可以自主取消。达到勾选主键的CheckBox后自动关联子CheckBox选项,这样可以避免重复添加勾选操作,用于子选项默认继承主选项的需求,不勾选子选项为低频操作,提供良好用户体验。
实现步骤:
- 构建ComBox模板 DataTemplate包含两个CheckBox控件,SelectedParam为主选项,IsParamChart为子选项,默认继承主选项IsChecked属性。使用行为监听IsParamChart的勾选和取消勾选事件,DropDownClosed用于统计勾选项数量等其他业务需求。
<ComboBox x:Name="ParamsComboBox" Width="80" Margin="5,0,10,0" DropDownClosed="ParamsComboBox_DropDownClosed" IsEditable="True" ItemsSource="{Binding ParamsComboBoxItems}" ScrollViewer.VerticalScrollBarVisibility="Hidden"> <ComboBox.ItemTemplate> <DataTemplate DataType="{x:Type local:ParamModel}"> <StackPanel Orientation="Horizontal"> <CheckBox x:Name="SelectedParam" Margin="5,0" IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> <TextBlock x:Name="ParamName" Text="{Binding Name}" /> <CheckBox x:Name="IsParamChart" Margin="5,0" IsChecked="{Binding ElementName=SelectedParam, Path=IsChecked, Mode=OneWay}"> <i:Interaction.Triggers> <i:EventTrigger EventName="Unchecked"> <i:InvokeCommandAction Command="{Binding DataContext.UnCheckedChangedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}" CommandParameter="{Binding}" /> </i:EventTrigger> <i:EventTrigger EventName="Checked"> <i:InvokeCommandAction Command="{Binding DataContext.CheckedChangedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}" CommandParameter="{Binding}" /> </i:EventTrigger> </i:Interaction.Triggers> </CheckBox> <TextBlock Text="显示曲线" /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox>
-
后台代码
private ObservableCollection<ParamModel> paramsComboBoxItems; public ObservableCollection<ParamModel> ParamsComboBoxItems { get { return paramsComboBoxItems; } set { paramsComboBoxItems = value; RaisePropertyChanged(); } } private ObservableCollection<ParamModel> paramDiaplayItems; public ObservableCollection<ParamModel> ParamDiaplayItems { get { return paramDiaplayItems; } set { paramDiaplayItems = value; RaisePropertyChanged(); } } public DelegateCommand<object> UnCheckedChangedCommand { get; set; } public DelegateCommand<object> CheckedChangedCommand { get; set; } public AnalyzedDataViewModel() { UnCheckedChangedCommand = new DelegateCommand<object>(OnUnCheckedChanged); CheckedChangedCommand = new DelegateCommand<object>(OnCheckedChanged); ParamsComboBoxItems = new ObservableCollection<ParamModel>(); ParamDiaplayItems = new ObservableCollection<ParamModel>(); for (int i = 0; i < 20; i++) { ParamsComboBoxItems.Add(new ParamModel { Name = "测试" + i.ToString(), }); } } private void OnUnCheckedChanged(object obj) { ParamModel paramModel = (ParamModel)obj; if (paramModel != null) { paramModel.IsCharted = false; ParamDiaplayItems.Remove(paramModel); } } private void OnCheckedChanged(object obj) { ParamModel paramModel= (ParamModel)obj; if (paramModel != null) { paramModel.IsCharted = true; ParamDiaplayItems.Add(paramModel); var count = ParamDiaplayItems.Count(item => item.IsChecked); if (count > 5) { MessageBox.Show("最多支持选择5个参数"); ParamDiaplayItems.Remove(paramModel); return; } } }