UserControl的datagrid数据行中两个下拉框实现两级联动第二个下拉框的数据会跟随第一个下拉框所选中的数据进行改变但是每行数据的选择不影响其他行以WVVM模式实现请给出详细代码
以下是一个使用WPF的MVVM模式实现UserControl的DataGrid数据行中两个下拉框实现两级联动的示例代码:
首先,创建一个名为MainViewModel的ViewModel类,该类包含两个ObservableCollection属性,用于绑定第一个和第二个下拉框的数据源。
public class MainViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection<string> _firstComboBoxItems;
public ObservableCollection<string> FirstComboBoxItems
{
get { return _firstComboBoxItems; }
set
{
_firstComboBoxItems = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(FirstComboBoxItems)));
}
}
private ObservableCollection<string> _secondComboBoxItems;
public ObservableCollection<string> SecondComboBoxItems
{
get { return _secondComboBoxItems; }
set
{
_secondComboBoxItems = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SecondComboBoxItems)));
}
}
public MainViewModel()
{
// 初始化第一个下拉框的数据源
FirstComboBoxItems = new ObservableCollection<string>()
{
"Option 1",
"Option 2",
"Option 3"
};
}
public void UpdateSecondComboBoxItems(string selectedFirstItem)
{
// 根据第一个下拉框的选择更新第二个下拉框的数据源
if (selectedFirstItem == "Option 1")
{
SecondComboBoxItems = new ObservableCollection<string>()
{
"Option A",
"Option B",
"Option C"
};
}
else if (selectedFirstItem == "Option 2")
{
SecondComboBoxItems = new ObservableCollection<string>()
{
"Option X",
"Option Y",
"Option Z"
};
}
else if (selectedFirstItem == "Option 3")
{
SecondComboBoxItems = new ObservableCollection<string>()
{
"Option M",
"Option N",
"Option O"
};
}
}
}
然后,在UserControl中使用DataGrid来展示数据,同时在每行中添加两个ComboBox,并绑定到MainViewModel中的对应属性上。
<UserControl x:Class="YourNamespace.YourUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourNamespace"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<UserControl.Resources>
<local:MainViewModel x:Key="ViewModel" />
</UserControl.Resources>
<Grid>
<DataGrid ItemsSource="{Binding YourDataItems}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="First ComboBox">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding DataContext.FirstComboBoxItems, Source={StaticResource ViewModel}}"
SelectedItem="{Binding FirstSelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionChanged="FirstComboBox_SelectionChanged" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Second ComboBox">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding DataContext.SecondComboBoxItems, Source={StaticResource ViewModel}}"
SelectedItem="{Binding SecondSelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</UserControl>
在UserControl的代码-behind中,处理第一个下拉框的SelectionChanged事件,并在事件处理程序中调用MainViewModel的UpdateSecondComboBoxItems方法来更新第二个下拉框的数据源。
public partial class YourUserControl : UserControl
{
public YourUserControl()
{
InitializeComponent();
}
private void FirstComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var viewModel = (MainViewModel)Resources["ViewModel"];
var selectedFirstItem = (string)((ComboBox)sender).SelectedItem;
viewModel.UpdateSecondComboBoxItems(selectedFirstItem);
}
}
最后,将UserControl添加到MainWindow中进行展示。
<Window x:Class="YourNamespace.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourNamespace"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:YourUserControl />
</Grid>
</Window>
以上代码实现了一个使用MVVM模式的UserControl,其中的DataGrid数据行中的两个下拉框实现了两级联动。根据选择的第一个下拉框的选项,第二个下拉框的数据会相应地改变。每行数据的选择不会影响其他行
原文地址: https://www.cveoy.top/t/topic/hXw9 著作权归作者所有。请勿转载和采集!