通过从组合框中选择来更新数据网格中的源

本文关键字：数据 数据网 网格 更新 选择 组合 | 更新日期: 2023-09-27 18:34:28

我是WPF和MVVM设计模式的新手。因此，我尝试做的所有事情似乎都需要很长时间。

目前，我正在使用组合框来选择列表。我想用该列表中的所有联系人填充网格视图，并在每次组合框选择更改时刷新该网格视图。

视图的 XAML 如下所示。如何让网格视图侦听组合框选择中的更改？我需要 Combobox 选择来设置它的属性，以便我可以查询 db 以返回与列表关联的那些记录，所以我的第一个想法是添加一个按钮来触发命令，但它永远不会触发。我已经在谷歌上读到它说网格视图应该侦听属性更新，但没有关于如何做到这一点的示例。

我在网格视图中尝试过这个，但抛出了一个异常，是的，我的视图模型确实实现了 INotifyProperyChanged

属性已更改="{绑定路径=选定列表名称联系人视图}

感谢您的帮助。 

<UserControl x:Name="manageLists"
         x:Class="Five9ContactManagement.ManageListsView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
         xmlns:my="clr-namespace:Five9ContactManagement.Controls;assembly=Five9ContactManagement.Controls"
         mc:Ignorable="d"
         d:DesignHeight="400"
         d:DesignWidth="400"
         xmlns:local="clr-namespace:Five9ContactManagement">

 <Grid>
   <Grid HorizontalAlignment="Center"
         VerticalAlignment="Top"
         Margin="20">
      <Grid.ColumnDefinitions>
       <ColumnDefinition />
       <ColumnDefinition />
       <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <TextBlock  Grid.Column="0"
              Grid.Row="2"
              Text="Select List "
              VerticalAlignment="Center"
              Margin="5" />
      <ComboBox Grid.Column="1"
            Grid.Row="2"
            ItemsSource="{Binding GetLists, Mode=OneWay}"
            VerticalAlignment="Center"
            SelectedIndex="-1"
            SelectedItem="{Binding Path=SelectedListNameContactView />
            <Button Grid.Row="2"
                 Grid.Column="2"
                 Content="View Contacts"
                 VerticalAlignment="Center"
                 Margin="5" 
                 Width=" 100"
                Command="{Binding Path=ShowContactsCommand}"   
                CommandParameter="{Binding SelectedListNameContactView}"/>
</Grid>
<Grid HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Margin="20"
      RenderTransformOrigin="1.25,2.662">
  <telerik:RadGridView x:Name="contactsGrid"
                       GroupRenderMode="Flat"
                       ItemsSource="{Binding Contacts}"
                       PropertyChanged="{Binding Path=SelectedListNameContactView}                                
                             AutoGenerateColumns="False"
                             CanUserFreezeColumns="False"
                             RowIndicatorVisibility="Collapsed"
                             CanUserResizeColumns="True"
                             Margin="5,5,5,5" 
                             IsReadOnly="True">
      <telerik:RadGridView.Columns>
      <telerik:GridViewDataColumn Header="First Name"
                                  DataMemberBinding="{Binding FirstName}"
                                  Width="100" />
      <telerik:GridViewDataColumn Header="Last Name"
                                  DataMemberBinding="{Binding LastName}"
                                  Width="100" />
      <telerik:GridViewDataColumn Header="Address"
                                  DataMemberBinding="{Binding Address}"
                                  Width="200" />
      <telerik:GridViewDataColumn Header="Address2"
                                  DataMemberBinding="{Binding Address2}"
                                  Width="75" />
      <telerik:GridViewDataColumn Header="City"
                                  DataMemberBinding="{Binding City}"
                                  Width="75" />
      <telerik:GridViewDataColumn Header="State"
                                  DataMemberBinding="{Binding State}" />
      <telerik:GridViewDataColumn Header="Zip"
                                  DataMemberBinding="{Binding ZipCode}"
                                  Width="75" />
      <telerik:GridViewDataColumn Header="Phone"
                                  DataMemberBinding="{Binding PhoneNumber}"
                                  Width="75" />
      <telerik:GridViewDataColumn Header="Media Group"
                                  DataMemberBinding="{Binding MediaGroup}"
                                  Width="100" />
      <telerik:GridViewDataColumn Header="Brochure Date"
                                  DataMemberBinding="{Binding BrochureDate}"
                                  Width="100" />
    </telerik:RadGridView.Columns>
  </telerik:RadGridView>
</Grid>

通过从组合框中选择来更新数据网格中的源

使用 MVVM，对于这样的功能，我们使用视图模型而不是视图。首先添加与 ComboBox 控件中的项类型相同的属性...为了简单起见，我将假设它们是string值：

private string selectedItem = string.Empty;
...
public string SelectedItem
{
    get { return selectedItem; }
    set
    {
        selectedItem = value;
        NotifyPropertyChange("SelectedItem"); // << Implement INotifyPropertyChanged
        UpdateGrid();
    }
}

现在为您的DataGrid添加一个集合属性：

private ObservableCollection<string> items = new ObservableCollection<string>();
...
public ObservableCollection<string> Items
{
    get { return items; }
    set
    {
        items= value;
        NotifyPropertyChange("Items"); // << Implement INotifyPropertyChanged
    }
}

现在让我们看一下UpdateGrid方法：

private void UpdateGrid()
{
    // Update your property that is bound to the DataGrid.ItemsSource here
    Items = GetNewData(); // << You need to implement this method yourself
}

现在，在 XAML 中：

<DataGrid ItemsSource="{Binding Items}" />
<ComboBox ItemsSource="{Binding YourCollectionNotShownHere}" 
    SelectedItem="{Binding SelectedItem}" />

现在，每当ComboBox.SelectedItem发生变化时，都会调用SelectedItem属性 setter，这将调用 UpdateGrid() 方法，该方法将更新 Items 集合属性并更新DataGrid中的集合。正如示例中的注释所说，您需要在视图模型中实现INotifyPropertyChanged接口。

如果你将使用交互性和交互库，你将能够在xaml中编写类似的东西：

 <ComboBox HorizontalAlignment="Left" SelectedItem="{Binding SelectedComboBoxItem, Mode=TwoWay}" ItemsSource="{Binding ComboBoxItems}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <i:InvokeCommandAction Command="{Binding OnCopmboBoxSelectionChangedCommand}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </ComboBox>

和视图中的命令模型：

 private ICommand _onCopmboBoxSelectionChangedCommand;
 public ICommand OnCopmboBoxSelectionChangedCommand
 {
     get
     {
         if (_onCopmboBoxSelectionChangedCommand != null) return _onCopmboBoxSelectionChangedCommand;
         _onCopmboBoxSelectionChangedCommand = new RelayCommand(OnCopmboBoxSelectionChanged);
         return _onCopmboBoxSelectionChangedCommand;
     }
 }

最后查看模型的方法：

 private void OnCopmboBoxSelectionChanged(object sender)
 { }
相关文章：