使用 mvvm 的 WPF 数据网格中的行单击事件

Question

When I click on a row of WPF datagrid, I want to open a new Window that has information about a person from the clicked row (that can be changed) by using binding. How can I do it? And how can I save the changed information?

Thanks in Advance!

Answer 1

You can add a SelectedItem property in the ViewModel. Bind that to DataGrid's SelectedItem. Now you know which item the user has selected (clicked on).

In the DataGrid's MouseDown or MouseUp event you can open the new Window with the same ViewModel object as the DataContext. That way the new Window knows which item was selected. Bind the new Window's fields to the SelectedItem in the ViewModel.

If you have set up the INotifyPropertyChanged correctly, the values that are changed in the new Window also will show up in the DataGrid in the first Window.

Since the SelectedItem also is part of the collection, you will automatically have the changed values in the collection as well. (I assume this is what you mean with "save the changed information").

---

if your collection, that is bound to the DataGrid, is a collection of Person objects, the "SelectedItem property" could look like this:

public Person SelectedPerson
    {
        get
        {
            return _selectedPerson;
        }
        set
        {
            _selectedPerson = value;
            PropertyChanged....
        }
    }
    private Person _selectedPerson;

Answer 2

ViewModel.cs

namespace Procect1
{
    public class ViewModel : INotifyPropertyChanged
    {

        public ViewModel()
        {
            ListOfPeople = new ObservableCollection<Person>();

        }

        string image;
        private void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }


        private void Window2OpenExecute()
        {
            Window2 Window2 = new Window2(this);
            Window2.Show();
        }

        private void AddPhotoExecute()
        {
            foreach (Window window in Application.Current.Windows)
            {
                if (window.GetType() == typeof(Window2))
                {

                    OpenFileDialog op = new OpenFileDialog();
                    op.Title = "Select a picture";
                    op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
                      "JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
                      "Portable Network Graphic (*.png)|*.png";
                    if (op.ShowDialog() == true)
                    {
                        (window as Window2).imgPhoto.Source = new BitmapImage(new Uri(op.FileName));

                        image = op.FileName;

                    }
                }
            }
        }

        private void AddPersonToListExecute()
        {
            foreach (Window window in Application.Current.Windows)
            {
                if (window.GetType() == typeof(Window2))
                {

                    ListOfPeople.Add(new Person()
                    {
                        Name = (window as Window2).textBox_FirstName.Text,
                        Surname = (window as Window2).textBox_LastName.Text,
                        IdNumber = (window as Window2).textBox_IdNumber.Text,
                        Age = (window as Window2).textBox_Age.Text,
                        Image = image
                    });

                    (window as Window2).Close();
                }
            }
        }

        private void SerializeExecute()
        {
            Stream stream = File.OpenWrite(Environment.CurrentDirectory + "\\Serialization1.xml");
            XmlSerializer people = new XmlSerializer(typeof(ObservableCollection<Person>));
            people.Serialize(stream, ListOfPeople);
            stream.Close();
        }

        private void DeSerializeExecute()
        {
            XmlSerializer deserializer = new XmlSerializer(typeof(ObservableCollection<Person>));
            TextReader textReader = new StreamReader(Environment.CurrentDirectory + "\\Serialization1.xml");
            ListOfPeople = (ObservableCollection<Person>)deserializer.Deserialize(textReader);
            textReader.Close();
        }

       
        public ICommand Window2Open { get { return new RelayCommand(Window2OpenExecute); } }
        public ICommand AddPersonToList { get { return new RelayCommand(AddPersonToListExecute); } }
        public ICommand Serialize { get { return new RelayCommand(SerializeExecute); } }
        public ICommand DeSerialize { get { return new RelayCommand(DeSerializeExecute); } }
        public ICommand AddPhoto { get { return new RelayCommand(AddPhotoExecute); } }
        public ObservableCollection<Person> ListOfPeople
        {
            get
            {
                return listOfPeople;
            }
            set
            {
                listOfPeople = value;
                OnPropertyChanged("ListOfPeople");
            }
        }

        public Person SelectedPerson
        {
            get
            {
                return _selectedPerson;
            }
            set
            {
                _selectedPerson = value;
                OnPropertyChanged(nameof(SelectedPerson));
            }
        }
        private Person _selectedPerson;
        private ObservableCollection<Person> listOfPeople;
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Person.cs

namespace Procect1
{
    public class Person : INotifyPropertyChanged
    {
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
                OnPropertyChanged(nameof(Name));
            }
        }

        public string Surname
        {
            get
            {
                return surname;
            }
            set
            {
                surname = value;
                OnPropertyChanged(nameof(Surname));
            }
        }

        public string IdNumber
        {
            get
            {
                return idNumber;
            }
            set
            {
                idNumber = value;
                OnPropertyChanged(nameof(IdNumber));
            }
        }

        public string Age
        {
            get
            {
                return age;
            }
            set
            {
                age = value;
                OnPropertyChanged(nameof(Age));
            }
        }

        public string Image
        {
            get
            {
                return image;
            }
            set
            {
                image = value;
                OnPropertyChanged(nameof(Image));
            }
        }

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

        private string name;
        private string surname;
        private string idNumber;
        private string age;
        private string image;       
    }
}

MainWindow.xaml

<Window x:Class="Procect1.MainWindow"
        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:Procect1"
        mc:Ignorable="d"
        Title="Lista pacjentów"  Height="450" Width="800">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <!--<RowDefinition Height="auto"  />-->
            <!--<RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>-->
        </Grid.RowDefinitions>
        <DataGrid  Name="listView" MouseUp="listView_MouseUp" ItemsSource="{Binding ListOfPeople}" AutoGenerateColumns="False" SelectedItem="{Binding Index}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding  Name, UpdateSourceTrigger=PropertyChanged}" Header="Imię" />
                <DataGridTextColumn Binding="{Binding Surname}" Header="Nazwisko" />
                <DataGridTextColumn Binding="{Binding IdNumber}" Header="Pesel"  />
                <DataGridTextColumn  Binding="{Binding Age}" Header="Wiek" />
                <DataGridTemplateColumn Header="Zdjęcie" Width=" 100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        <Canvas>
            <Button Canvas.Right="20" Canvas.Top="30" Height="50" Width="80" FontSize="18" Command="{Binding Window2Open}">Dodaj</Button>
            <Button Canvas.Right="20" Canvas.Top="100" Height="50" Width="80" FontSize="18" Command="{Binding Serialize}">Serializuj</Button>
            <Button Canvas.Right="20" Canvas.Top="170" Height="50" Width="80" FontSize="18" Command="{Binding DeSerialize}">Załaduj</Button>
        </Canvas>
    </Grid>
</Window>

MainWindow.cs

public partial class MainWindow : Window
    {
        
        public MainWindow( )
        {
            InitializeComponent();
            
        }

        private void listView_MouseUp(object sender, MouseButtonEventArgs e)
        {
            Window3 window3 = new Window3();
            window3.Show();
        }
    }

Window2.xaml

<Window x:Class="Procect1.Window2"
        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:Procect1"
        mc:Ignorable="d"
        Title="Dane Pacjenta" Height="600" Width="500">
    <Canvas>
        <Label Canvas.Left="20" Canvas.Top="20" FontSize="24">Imię</Label>
        <TextBox x:Name="textBox_FirstName" Canvas.Left="190" Canvas.Top="30" Height="28" Width="200" ></TextBox>
        <Label Canvas.Left="20" Canvas.Top="100" FontSize="24">Nazwisko</Label>
        <TextBox x:Name="textBox_LastName" Canvas.Left="190" Canvas.Top="110" Height="28" Width="200"></TextBox>
        <Label Canvas.Left="20" Canvas.Top="180" FontSize="24">Pesel</Label>
        <TextBox x:Name="textBox_IdNumber" Canvas.Left="190" Canvas.Top="190" Height="28" Width="200"></TextBox>
        <Label Canvas.Left="20" Canvas.Top="260" FontSize="24">Wiek</Label>
        <TextBox x:Name="textBox_Age" Canvas.Left="190" Canvas.Top="270" Height="28" Width="200"></TextBox>
        <Label Canvas.Left="20" Canvas.Top="340" FontSize="24">Zdjęcie</Label>
        <Image Name="imgPhoto" Canvas.Left="190" Canvas.Top="350" Height="120" Width="150"></Image>
        <Button Canvas.Right="20" Canvas.Top="400" FontSize="16" Command="{Binding AddPhoto}" >Dodaj zdjęcie</Button>
        <Button Canvas.Left="250" Canvas.Bottom="20" Height="40" Width="80" FontSize="24" Command="{Binding AddPersonToList}">Zapisz</Button>
    </Canvas>
</Window>

MainWindow2.cs

public partial class Window2 : Window
    {
        public Window2(ViewModel viewModel)
        {

            InitializeComponent();

            DataContext = viewModel;
            

        }
    }

Window3.xaml

<Window x:Class="Procect1.Window3"
        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:Procect1"
        mc:Ignorable="d"
        Title="Dane Pacjenta" Height="600" Width="500">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Canvas>
        <Label Canvas.Left="20" Canvas.Top="20" FontSize="24">Imię</Label>
        <TextBox x:Name="textBox_FirstName" Text="{Binding SelectedPerson.Name}" Canvas.Left="190" Canvas.Top="30" Height="28" Width="200" ></TextBox>
        <Label Canvas.Left="20"  Canvas.Top="100" FontSize="24">Nazwisko</Label>
        <TextBox x:Name="textBox_LastName" Text="{Binding SelectedPerson.Surname}" Canvas.Left="190" Canvas.Top="110" Height="28" Width="200"></TextBox>
        <Label Canvas.Left="20" Canvas.Top="180" FontSize="24">Pesel</Label>
        <TextBox x:Name="textBox_IdNumber" Text="{Binding SelectedPerson.IdNumber}" Canvas.Left="190" Canvas.Top="190" Height="28" Width="200"></TextBox>
        <Label Canvas.Left="20" Canvas.Top="260" FontSize="24">Wiek</Label>
        <TextBox x:Name="textBox_Age" Text="{Binding SelectedPerson.Age}" Canvas.Left="190" Canvas.Top="270" Height="28" Width="200"></TextBox>
        <Label Canvas.Left="20" Canvas.Top="340" FontSize="24">Zdjęcie</Label>
        <Image Name="imgPhoto" Source="{Binding SelectedPerson.Image}" Canvas.Left="190" Canvas.Top="350" Height="120" Width="150"></Image>
        <Button Canvas.Right="20" Canvas.Top="400" FontSize="16" Command="{Binding AddPhoto}" >Dodaj zdjęcie</Button>
        <Button Canvas.Left="250" Canvas.Bottom="20" Height="40" Width="80" FontSize="24">Zapisz</Button>
    </Canvas>
</Window>

In Window3.cs I haven't added any code.

RylayCommand.cs

public class RelayCommand : ICommand
    {
        private readonly Func<bool> _canExecute;
        private readonly Action _execute;

        public RelayCommand(Action execute)
            : this(execute, null)
        {
        }

        public RelayCommand(Action execute, Func<bool> canExecute)
        {
            if (execute == null)
                throw new ArgumentNullException("execute");
            _execute = execute;
            _canExecute = canExecute;
        }

        public event EventHandler CanExecuteChanged
        {
            add
            {
                if (_canExecute != null)
                    CommandManager.RequerySuggested += value;
            }
            remove
            {
                if (_canExecute != null)
                    CommandManager.RequerySuggested -= value;
            }
        }

        public bool CanExecute(object parameter)
        {
            return _canExecute == null ? true : _canExecute();
        }

        public void Execute(object parameter)
        {
            _execute();
        }
    }

I post it as an answer because I couldn't add it to the question.

Answer 3

On MainWindow you have bound the SelectedItem to "Item". If you look at the Output window (if you are using Visual Studio) when you are running the program, you find following error:

System.Windows.Data Error: 40 : BindingExpression path error: 'Index' property not found on 'object' ''ViewModel'

XAML is a very quite beast, so look there first if the bindings doesn't work.

You should bind the SelectedItem to the SelectedPerson in the ViewModel.

SelectedItem="{Binding SelectedPerson}"

To get the window3 to work, you need to set the DataContext to the main windows DataContext (the view model).

        Window3 window3 = new Window3();
        window3.DataContext = this.DataContext;
        window3.Show();

Answer 4

I did solve a simelar propblem using the Behaviours Libary. First Make sure you have the Nuget package: "Microsoft.Xaml.Behaviors.Wpf" installed.

xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

<DataGrid>
    <i:Interaction.Triggers>
        <i:EventTrigger
            EventName="MouseUp">
            <i:InvokeCommandAction
                Command="{Binding OpenWindowCommand}"
                CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}, Path=SelectedItem}">
            </i:InvokeCommandAction>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</DataGrid>

Hope this snippet helps.