交互式WPF关系数据网格系统示例？

Question

我想知道是否有人可以共享或指向可在Silverlight应用程序中使用的数据网格结构的良好示例。我需要有4个关系数据网格，其中之一是主数据网格，其中包含大部分数据。我应该能够删除或添加或更改项目的属性。此更改也应该影响其他数据网格。例如，如果我从主数据网格删除一个项目，那么该项目的实例应该从其他数据网格中删除。任何信息都非常感谢。先谢谢你！

Answer 1

我以前创建了一个类似于你正在寻找的原型。我没有使用DataGrid，我实际上正在使用ItemsControl，但我认为它可能对您有益。

我所做的就是让我的两个ItemsControls查看相同的数据。这样，如果我要删除一个对象，它也将从另一个对象中删除（因为它是相同的数据源）。

使用MVVM模式，我这样接近它。

要开始，这里是两个网格的样子，它们都显示相同数据的不同表示。

这里是我的MainPage.xaml中

<UserControl x:Class="ViewModelDeleteObject.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:local="clr-namespace:ViewModelDeleteObject" 
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="400"> 

<UserControl.DataContext> 
    <local:MainPage_ViewModel/> 
</UserControl.DataContext> 

<StackPanel Orientation="Horizontal"> 
    <ItemsControl ItemsSource="{Binding Coordinates}" Margin="20"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="Blue" BorderThickness="1"> 
        <StackPanel Orientation="Horizontal" Margin="3"> 
         <Border BorderBrush="Red" BorderThickness="1"> 
          <TextBlock Text="{Binding X}" TextAlignment="Right" Width="100" Margin="3"/> 
         </Border> 
         <Border BorderBrush="Red" BorderThickness="1"> 
          <TextBlock Text="{Binding Y}" TextAlignment="Right" Width="100" Margin="3"/> 
         </Border> 
         <Button Content="Delete" Click="Button_Click" Tag="{Binding}"/> 
        </StackPanel> 
       </Border> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 

    <ItemsControl ItemsSource="{Binding Coordinates}" Margin="20"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="Blue" BorderThickness="1"> 
        <Border BorderBrush="Red" BorderThickness="1"> 
         <TextBlock Text="{Binding XYCoordinate}" TextAlignment="Right" Width="100" Margin="3"/> 
        </Border> 
       </Border> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</StackPanel> 

public partial class MainPage : UserControl 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 
     this.viewModel = this.DataContext as MainPage_ViewModel; 
    } 
    private MainPage_ViewModel viewModel; 

    private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     viewModel.DeleteCoordinate((sender as Button).Tag as Coordinate_DataViewModel); 
    } 
} 

MainPage.xaml中有设置其的DataContext以下MainPage_ViewModel.cs：

public class MainPage_ViewModel : INotifyPropertyChanged 
{ 
    public MainPage_ViewModel() 
    { 
     coordinates.Add(new Coordinate_DataViewModel(new Coordinate_Model() { X = 1, Y = 2 })); 
     coordinates.Add(new Coordinate_DataViewModel(new Coordinate_Model() { X = 2, Y = 4 })); 
     coordinates.Add(new Coordinate_DataViewModel(new Coordinate_Model() { X = 3, Y = 6 })); 
     coordinates.Add(new Coordinate_DataViewModel(new Coordinate_Model() { X = 4, Y = 8 })); 
     coordinates.Add(new Coordinate_DataViewModel(new Coordinate_Model() { X = 5, Y = 10 })); 
     coordinates.Add(new Coordinate_DataViewModel(new Coordinate_Model() { X = 6, Y = 12 })); 
    } 

    public ObservableCollection<Coordinate_DataViewModel> Coordinates 
    { 
     get { return coordinates; } 
     set 
     { 
      if (coordinates != value) 
      { 
       coordinates = value; 
       OnPropertyChanged("Coordinates"); 
      } 
     } 
    } 
    private ObservableCollection<Coordinate_DataViewModel> coordinates = new ObservableCollection<Coordinate_DataViewModel>(); 

    public event PropertyChangedEventHandler PropertyChanged; 

    public void OnPropertyChanged(string propertyName) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    } 

    public void DeleteCoordinate(Coordinate_DataViewModel dvmToDelete) 
    { 
     coordinates.Remove(dvmToDelete); 
    } 
} 

我的模型和数据视图模型类也显示在下面。

型号

public class Coordinate_Model 
{ 
    public double X; 
    public double Y; 
} 

DataViewModel

public class Coordinate_DataViewModel 
{ 
    public Coordinate_DataViewModel(Coordinate_Model model) 
    { 
     this.underlyingModel = model; 
    } 
    private Coordinate_Model underlyingModel; 

    public double X 
    { 
     get { return underlyingModel.X; } 
     set { underlyingModel.X = value; } 
    } 

    public double Y 
    { 
     get { return underlyingModel.Y; } 
     set { underlyingModel.Y = value; } 
    } 

    public string XYCoordinate 
    { 
     get { return "(" + X + "," + Y + ")"; } 
    } 
} 

现在，当我从第一格删除一行，第二电网将立即更新如下图所示，我删除了4,8：

我认为这可能与你在想什么。希望它有帮助:)

注意：所有的代码都在这里，所以你应该能够复制&粘贴并执行自己，如果你愿意。

更新：这个解决方案是用Silverlight编写的，但我注意到你的问题是'WPF'，它的标签是Silverlight。即使你使用WPF，这个例子仍然是有益的。抱歉!

更新：好的，我会更新它以使用DataGrid。这实际上花了我两分钟时间来执行前面给出的代码。唯一需要改变的是观点，请注意，没有其他代码被触及。

下面是该视图中的新项目：

<data:DataGrid ItemsSource="{Binding Coordinates}" AutoGenerateColumns="False" Margin="10"> 
     <data:DataGrid.Columns> 
      <data:DataGridTextColumn Header="X Position" Width="100" Binding="{Binding X}"/> 
      <data:DataGridTextColumn Header="Y Position" Width="100" Binding="{Binding Y}"/> 
      <data:DataGridTemplateColumn Header="Delete Item" Width="100"> 
       <data:DataGridTemplateColumn.CellTemplate> 
        <DataTemplate> 
         <Button Content="Delete" Tag="{Binding}" Click="Button_Click"/> 
        </DataTemplate> 
       </data:DataGridTemplateColumn.CellTemplate> 
      </data:DataGridTemplateColumn> 
     </data:DataGrid.Columns> 
    </data:DataGrid> 

    <data:DataGrid ItemsSource="{Binding Coordinates}" AutoGenerateColumns="False" Margin="10"> 
     <data:DataGrid.Columns> 
      <data:DataGridTextColumn Header="Coordinate" Width="100" Binding="{Binding XYCoordinate}"/> 
     </data:DataGrid.Columns> 
    </data:DataGrid> 

这里的初始网格的样子：

这里是什么样子删除后：