Send Selected Object to another Control in WPF/Silverlight? - wpf

Question

I am working on a WPF Projet, in which I have a view with two usercontrols on it. This is basically a UserControl with a grid on it and another one with a edit panel to edit the selected object in the DataGrid. The edit panel control, consists of textboxes to edit properties of the selected object in the other control and a button to save. What I would like to do is to pass the selected object to the edit panel,that is each time a object is selected in the grid, the edit panel updates to select that same object. What is the best way to do this, please help?An example would be super :0)

Answer 1

The best way to deal with this is using the MVVM pattern, where both of your user controls bind to the same ViewModel.
The grid can bind to your collection (List<>) of objects that you want to show, and it can also bind its SelectedRow/SelectedItem property to a corresponding property on the ViewModel called SelectedItem (or similar). This means that every time a row is selected in the grid, the underlying data object will be populated into the property on the ViewModel.
You then bind your details user control to the same SelectedItem property on the ViewModel. Check this very simple example of a DataGrid and TextBox binding to the same SelectedItem property:
ViewModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
namespace WpfApplication11
{
public class MyViewModel : INotifyPropertyChanged
{
public List<Customer> MyList
{
get { return _myList; }
set
{
_myList = value;
OnPropertyChanged("MyList");
}
}
public Customer SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
OnPropertyChanged("SelectedItem");
}
}
private void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
private Customer _selectedItem;
private List<Customer> _myList;
}
public class Customer
{
public string Name { get; set; }
}
}
MainWindow
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:swm="clr-namespace:System.Windows.Media;assembly=WindowsBase"
xmlns:swm1="clr-namespace:System.Windows.Media;assembly=PresentationCore"
Title="MainWindow" Height="289" Width="525">
<Grid>
<DataGrid AutoGenerateColumns="True" Margin="12,12,12,38" Name="dataGrid1" ItemsSource="{Binding MyList}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
<Label Content="Name" Height="28" HorizontalAlignment="Left" Margin="12,222,0,0" Name="label1" VerticalAlignment="Top" Width="57" />
<TextBox Text="{Binding Path=SelectedItem.Name, Mode=TwoWay}" Height="23" HorizontalAlignment="Left" Margin="60,222,0,0" Name="textBox1" VerticalAlignment="Top" Width="267" />
</Grid>
</Window>
MainWindow code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication11
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
MyViewModel vm = new MyViewModel();
vm.MyList = new List<Customer>(new Customer[] { new Customer() { Name = "Bugs Bunny" }, new Customer() { Name = "Elmer Fudd" } });
this.DataContext = vm;
}
}
}
If you run this and then select a row in the grid the name of the customer will be populated into the textbox underneath. If you then modify the name in the textbox and remove focus from it (TAB out of it) then the row in the datagrid will get updated with the new name - all through binding.
For further information, there have previously been a few thousand questions on Stack Overflow regarding the MVVM pattern with WPF, many of them specifically about master-detail views like the one you want.

Answer 2

In your XAML markup, just bind the edit panel's object to the selected object in the grid object.