Develop Reference

Xamarin Renderer does not respond to changed property

I have some problem with a custom renderer. My sample is based on a sample from the official Xamarin site but I can't get the OnElementPropertyChanged method in the renderer is not triggered when I add an Item to the bound list.
Cell:
public class NativeiOSListViewCell : UITableViewCell
{
UILabel name;
public NativeiOSListViewCell(NSString cellId) : base(UITableViewCellStyle.Default, cellId)
{
SelectionStyle = UITableViewCellSelectionStyle.Gray;
ContentView.BackgroundColor = UIColor.FromRGB(218, 255, 127);
name = new UILabel()
{
Font = UIFont.FromName("Cochin-BoldItalic", 22f),
TextColor = UIColor.FromRGB(127, 51, 0),
BackgroundColor = UIColor.Clear
};
ContentView.Add(name);
}
public void UpdateCell(string caption)
{
name.Text = caption;
}
public override void LayoutSubviews()
{
base.LayoutSubviews();
name.Frame = new CoreGraphics.CGRect(5, 4, ContentView.Bounds.Width - 63, 25);
}
}
Renderer
[assembly: ExportRenderer(typeof(MyNativeListView), typeof(Blabla.iOS.NativeiOSListViewRenderer))]
namespace Blabla.iOS
{
public class NativeiOSListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
// Unsubscribe
}
if (e.NewElement != null)
{
Control.Source = new NativeiOSListViewSource(e.NewElement as MyNativeListView);
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == MyNativeListView.ItemsProperty.PropertyName) //Only triggered for stuff like Height, Width and not Items
{
Control.Source = new NativeiOSListViewSource(Element as MyNativeListView);
}
}
}
}
XAML
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Blabla.PlayGroundPage" xmlns:local="clr-namespace:Blabla;assembly=Blabla">
<ContentPage.Resources>
<ResourceDictionary>
<local:Inverter x:Key="inverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<local:MyNativeListView x:Name="nativeListView" VerticalOptions="FillAndExpand" Items="{Binding LocalItems}" />
<Button Text="add" Command="{Binding Add}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Code Behind:
public partial class PlayGroundPage : ContentPage
{
public PlayGroundPage()
{
InitializeComponent();
PlayGroundViewModel viewModel = new PlayGroundViewModel();
BindingContext = viewModel;
}
}
ViewModel
public class PlayGroundViewModel : INotifyPropertyChanged
{
public ICommand Add { get; private set; }
private ObservableCollection<ListItem> _localItems;
public ObservableCollection<ListItem> LocalItems { get { return _localItems; } set { _localItems = value; SetChangedProperty("LocalItems"); } }
public PlayGroundViewModel()
{
Add = new Command(() => { AddItem(); });
LocalItems = new ObservableCollection<ListItem>();
}
private void AddItem()
{
ListItem item = new ListItem("a", "b", true); //Just to get something to pop up in the list.
LocalItems.Add(item);
SetChangedProperty("LocalItems");
}
public event PropertyChangedEventHandler PropertyChanged;
private void SetChangedProperty(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
ListItem
public class ListItem
{
public string SelectedType { get; set; }
public string SelectedOption { get; set; }
public bool IsChecked { get; set; }
public ListItem(string selectedType, string selectedOption, bool isChecked)
{
SelectedType = selectedType;
SelectedOption = selectedOption;
IsChecked = isChecked;
}
}
I have verified that SetChangedProperty is triggered, but nothing seems to happen after that. I would appreciate if anyone has a clue to why.

The PropertyChanged event is triggered when the property really has changed. Your list doesn't change, only its contents, so the property with the list itself still refers to the same object (the list).
You're using an ObservableCollection, which is the way to go. The thing is that you have to subscribe to the CollectionChanged event in your renderer.
Also, it might be easier to use the default ListView and just create a custom renderer for the cells.

WPF returning a List to the class

New to WPF and C# from VB web forms, so sorry for this poorly structured question I will add to as needed to improve. I am trying to implement an example by adding database calls to MySQL to populate an On-Demand Tree View control. Here is the link to the sample code...
sample code
Got my db connection working and data is populating my dataset. I iterate to place in a List. But can not seem to figure out the issue with passing the List to the Class to populate the control...
public class Level1
{
public Level1(string level1Name)
{
this.Level1Name = level1Name;
}
public string Level1Name { get; private set; }
readonly List<Level2> _level2s = new List<Level2>();
public List<Level2> Level2s
{
get { return _level2s; }
}
}
I have a database class that queries the db and parses the data....
List<string> level1s = new List<string>();
DataSet ds = new DataSet();
foreach (DataTable table in ds.Tables)
{
foreach (DataRow row in table.Rows)
{
level1s.Add((string)row["name"]);
}
}
**UPDATE**: Trying to return the list...
return new Level1[]
{
foreach(DataRow row in level1s)
{
// iterate here
}
};
My level1s List is properly populated, I am just drawing a blank on returning the values.
thanks,
UPDATE - I am including the ViewModel code here as well....
using BusinessLib;
namespace TreeViewWithViewModelTOC.LoadOnDemand
{
public class Level1ViewModel : TreeViewItemViewModel
{
readonly Level1 _level1;
public Level1ViewModel(Level1 level1)
: base(null, true)
{
_level1 = level1;
}
public string Level1Name
{
get { return _level1.Level1Name; }
}
protected override void LoadChildren()
{
foreach (Level2 level2 in Database.GetLevel2s(_level1))
base.Children.Add(new Level2ViewModel(level2, this));
}
}
}

Try like this below,
List<Level1> L1=new List<Level1>();
foreach(var row in level1s)
{
Level1 L=new Level1();
// L.Level1Name = row.ToString(); here add items as you need
L1.Add(L);
}
return L1.ToArray();

You should be using MVVM design pattern to solve this. There aren't many requirements listed in your questions so I will assume my own, which should lead you along the right path.
First thing is determining whether or not you're records are going to be ready/pulled at run-time--before the TreeView is rendered and if they will be changed/updated/added/removed from the structure during the lifecycle of the application. If the structure isn't going to be changed, you can continue to use List as your collection. If you're (or a user is) going to be adding/removing from the collection, ultimately changing the structure, then you need to notify the UI that a change occurred on the collection; so you would use the built in ObservableCollection for that. Here is a MVVM-purist solution, with the assumption that your data will be pulled at application startup and you will be modifying the collection:
Note: RelayCommand implementation was taken from here
Models
public class First
{
public string Name
{
get;
set;
}
public readonly List<Second> Children;
public First(string name)
{
Name = name;
Children = new List<Second>
{
new Second(1),
new Second(2),
new Second(3),
};
}
public void AddChild(Second child)
{
Children.Add(child);
ChildAdded(this, new ChildAddedEventArgs(child));
}
public EventHandler<ChildAddedEventArgs> ChildAdded;
}
public class ChildAddedEventArgs //technically, not considered a model
{
public readonly Second ChildAdded;
public ChildAddedEventArgs(Second childAdded)
{
ChildAdded = childAdded;
}
}
public class Second
{
public int Number
{
get;
set;
}
public Second(int number)
{
Number = number;
}
}
ViewModels
public class MainViewModel : INotifyPropertyChanged
{
private readonly ObservableCollection<FirstViewModel> _items;
private readonly ICommand _addFirstFirstChildCommand;
private readonly ICommand _addSecondFirstChildCommand;
private readonly ICommand _toggleExpandCollapseCommand;
private bool _firstAddedFlag;
public MainViewModel(IEnumerable<First> records)
{
_items = new ObservableCollection<FirstViewModel>();
foreach(var r in records)
{
_items.Add(new FirstViewModel(r));
}
_addFirstFirstChildCommand = new RelayCommand(param => AddFirst(), param => CanAddFirst);
_addSecondFirstChildCommand = new RelayCommand(param => AddSecond(), param => CanAddSecond);
_toggleExpandCollapseCommand = new RelayCommand(param => ExpandCollapseAll(), param =>
{
return true;
});
}
public ObservableCollection<FirstViewModel> Items
{
get
{
return _items;
}
}
public ICommand AddFirstFirstChildCommand
{
get
{
return _addFirstFirstChildCommand;
}
}
public ICommand AddSecondFirstChildCommand
{
get
{
return _addSecondFirstChildCommand;
}
}
public ICommand ToggleExpandCollapseCommand
{
get
{
return _toggleExpandCollapseCommand;
}
}
public bool CanAddFirst
{
get
{
return true;
}
}
public bool CanAddSecond
{
get
{
//Only allow second to be added if we added to first, first
return _firstAddedFlag;
}
}
public void AddFirstChild(FirstViewModel item)
{
Items.Add(item);
}
private void AddFirst()
{
_items[0].AddChild(new Second(10));
_firstAddedFlag = true;
}
private void AddSecond()
{
_items[1].AddChild(new Second(20));
}
private void ExpandCollapseAll()
{
foreach(var i in Items)
{
i.IsExpanded = !i.IsExpanded;
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class FirstViewModel : INotifyPropertyChanged
{
private readonly First model;
private readonly ObservableCollection<SecondViewModel> _children;
private bool _isExpanded;
public FirstViewModel(First first)
{
_children = new ObservableCollection<SecondViewModel>();
model = first;
foreach(var s in first.Children)
{
Children.Add(new SecondViewModel(s));
}
model.ChildAdded += OnChildAdded;
}
public string FirstName
{
get
{
return model.Name;
}
set
{
model.Name = value;
NotifyPropertyChanged();
}
}
public ObservableCollection<SecondViewModel> Children
{
get
{
return _children;
}
}
public bool IsExpanded
{
get
{
return _isExpanded;
}
set
{
_isExpanded = value;
NotifyPropertyChanged();
}
}
internal void AddChild(Second second)
{
model.AddChild(second);
}
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public void OnChildAdded(object sender, ChildAddedEventArgs args)
{
if(Children != null)
{
Children.Add(new SecondViewModel(args.ChildAdded));
}
}
}
public class SecondViewModel : INotifyPropertyChanged
{
private readonly Second model;
private bool _isExpanded;
public SecondViewModel(Second second)
{
model = second;
}
public int SecondNumber
{
get
{
return model.Number;
}
set
{
model.Number = value;
NotifyPropertyChanged();
}
}
//Added property to avoid warnings in output window
public bool IsExpanded
{
get
{
return _isExpanded;
}
set
{
_isExpanded = value;
NotifyPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Model Provider
public class Database
{
public static IEnumerable<First> GetChildren()
{
List<First> firsts = new List<First>();
firsts.Add(new First("John"));
firsts.Add(new First("Roxanne"));
return firsts;
}
}
MainWindow.xaml.cs
public partial class MainWindow : Window
{
private MainViewModel mvm;
public MainWindow()
{
var db = Database.GetChildren();
mvm = new MainViewModel(db);
InitializeComponent();
DataContext = mvm;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//Do not do this, example only
var f = new First("Billy");
mvm.AddFirstChild(new FirstViewModel(f));
//Prove that the event was raised in First, FirstViewModel see & handles it, and
//the UI is updated
f.AddChild(new Second(int.MaxValue));
}
}
MainWindow.xaml
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication2"
Title="MainWindow">
<Grid>
<TreeView ItemsSource="{Binding Items}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:FirstViewModel}"
ItemsSource="{Binding Children}">
<TextBlock Text="{Binding FirstName}" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:SecondViewModel}">
<TextBlock Text="{Binding SecondNumber}" />
</DataTemplate>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded"
Value="{Binding IsExpanded, Mode=TwoWay}" />
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
<StackPanel Orientation="Vertical"
VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<Button Content="Add Child to first First"
Command="{Binding AddFirstFirstChildCommand}" />
<Button Content="Toggle Expand"
Command="{Binding ToggleExpandCollapseCommand}" />
<Button Content="Add Child to second First"
Command="{Binding AddSecondFirstChildCommand}" />
</StackPanel>
<Button Content="Bad Codebehind Button"
Click="Button_Click"/>
</StackPanel>
</Grid>
</Window>

this returns array of Level1 from first table in DataSet (usually there's only one table)
public void Level1[] GetLevels()
{
DataSet ds = ....
return ds.Tables[0].Rows
.Select(row => new Level1((string)row["name"]))
.ToArray();
}
if you had more than one table in the dataset, you can use this method to loop trough all tables:
public void Level1[] GetLevels()
{
DataSet ds = ....
return ds.Tables
.SelectMany(t => t.Rows)
.Select(row => new Level1((string)row["name"]))
.ToArray();
}
The second code sample does exactly the same as your code in the question.
Understanding linq is extremely useful.

WPF combo box not binding on change

I have 3 combo boxes
<Grid>
<ComboBox Name="cbo1" SelectionChanged="OnComboBoxChanged" />
<ComboBox Name="cbo2" SelectionChanged="OnComboBoxChanged"/>
<ComboBox Name="cbo3" SelectionChanged="OnComboBoxChanged" />
The list for combo boxes is { a,b,c,d}
so if "b" is selected in the first box then the drop down should not have b and it will need to updated with {a,c,d} if the second one is set to a then last one need to have {c,d}. if they go back and change any we need to update the list accordingly. I addded a event oncomboboxchanged but it is not updating the combo box , when i set the item source to the new list.
private List<string> comboList = new List<string>();
string[] defaultParam = { "A", "B", "C", "D" };
public MainWindow()
{
InitializeComponent();
foreach(string s in defaultParam)
{
LoadCombo(s);
}
}
public void LoadCombo(string name)
{
comboList.Add(name);
cbo1.ItemsSource = comboList;
cbo2.ItemsSource = comboList;
cbo3.ItemsSource = comboList;
}
private void OnComboBoxChanged(object sender,SelectionChangedEventArgs e)
{
var combo = sender as ComboBox;
string oldval = combo.Text;
string id = combo.Name;
string itemSel = (sender as ComboBox).SelectedItem.ToString();
comboList.Remove(itemSel);
//add old value only if it is not empty
if (!string.IsNullOrEmpty(oldval))
{
comboList.Add(oldval);
}
combo.ItemsSource = comboList;
ComboBox[] comboNameLst = {cbo1,cbo2,cbo3 };
foreach (ComboBox cbo in comboNameLst)
{
if (id != cbo.Name)
{
if (cbo.SelectedItem == null)
{
cbo.ItemsSource = comboList;
}
else if (cbo.SelectedItem != null)
{
string tempitemsel = cbo.SelectedItem.ToString();
comboList.Add(tempitemsel);
cbo.ItemsSource = comboList;
comboList.Remove(tempitemsel);
}
}
}
}
so cbo.ItemSource is not doing any thing , do I need to do any thing differently so I see the update.

You need to use binding in XAML, rather than set ItemsSource in your code behind. Also data bind SelectedItem:
<Grid>
<ComboBox ItemsSource="{Binding DefaultList}" SelectedItem="{Binding SelectedItem_Cob1}"/>
<ComboBox ItemsSource="{Binding FilteredListA}" SelectedItem="{Binding SelectedItem_Cob2}"/>
<ComboBox ItemsSource="{Binding FilteredListB}" SelectedItem="{Binding SelectedItem_Cob3}"/>
</Grid>
In your code behind, you need to implement INotifyPropertyChanged; define your relevant ItemsSources, and SlectedItems as properties; and set your Windows's DataContext to your code itself (you should use MVVM pattern but you could worry about that later) :
using System.ComponentModel;
public partial class MainWindow: INotifyPropertyChanged
{
string[] defaultParam = { "A", "B", "C", "D" };
private string _selecteditem_cob1;
private string _selecteditem_cob2;
private string _selecteditem_cob3;
public List<string> DefaultList
{
get { return defaultParam.ToList(); }
}
public string SelectedItem_Cob1
{
get { return _selecteditem_cob1; }
set
{
if (_selecteditem_cob1 != value)
{
_selecteditem_cob1 = value;
RaisePropertyChanged("SelectedItem_Cob1");
RaisePropertyChanged("FilteredListA");
RaisePropertyChanged("FilteredListB");
}
}
}
public string SelectedItem_Cob2
{
get { return _selecteditem_cob2; }
set
{
if (_selecteditem_cob2 != value)
{
_selecteditem_cob2 = value;
RaisePropertyChanged("SelectedItem_Cob2");
RaisePropertyChanged("FilteredListB");
}
}
}
public string SelectedItem_Cob3
{
get { return _selecteditem_cob3; }
set
{
if (_selecteditem_cob3 != value)
{
_selecteditem_cob3 = value;
RaisePropertyChanged("SelectedItem_Cob3");
}
}
}
public List<string> FilteredListA
{
get { return defaultParam.ToList().Where(a=>a!=SelectedItem_Cob1).ToList(); }
}
public List<string> FilteredListB
{
get { return FilteredListA.Where(a => a != SelectedItem_Cob2).ToList(); }
}
public MainWindow()
{
InitializeComponent();
this.DataContext=this;
}
//Implementation for INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
{
var handler = this.PropertyChanged;
if (handler != null)
{
handler(this, e);
}
}
protected void RaisePropertyChanged(String propertyName)
{
OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}
}
Result:
Three ComboBoxes will all show A,B,C,D at the initial stage. And
then if user made selections cbo2 and cbo3 will only display
filtered result dynamically.
I realized this is not 100% what you want (thanks to #TheodosiusVonRichthofen), but I feel you can still use this, and be able to easily modify it to suit your needs.

Also, the list that contains the combo-box items should be an ObservableCollection instead of a List. By making it an ObservableCollection, the combo-box items will be updated when you add/remove/change items in the lists.

Set default value in WPF ComboBox

I am using ComboBox ItemsSource property binding to display items from a List to combo box.
Following is the code:
<ComboBox x:Name="Cmb_Tax" ItemsSource="{Binding TaxList}"
DisplayMemberPath="ChargeName" SelectedItem="{Binding
SelectedTax,UpdateSourceTrigger=PropertyChanged}" IsEditable="True"
IsTextSearchEnabled="True" SelectionChanged="Cmb_Tax_SelectionChanged"/>
Classes.Charges _selected_tax = new Classes.Charges();
public Classes.Charges SelectedTax
{
get
{
return _selected_tax;
}
set
{
_selected_tax = value;
}
}
List<Classes.Charges> _taxlist = new List<Classes.Charges>();
public List<Classes.Charges> TaxList
{
get
{
return _taxlist;
}
set
{
_taxlist = value;
OnPropertyChanged("TaxList");
}
}
It displays the items in the combo box correctly.
There is a particular item in TaxList "No Tax" which I want to be selected by default in the combo box. This item can be present at any index in the list (Not necessary first or last item of the list).
I am trying to use the following code to set the selected index property of combo box, but sadly its not working.
TaxList = Classes.Charges.GetChargeList("Tax");
Cmb_Tax.DataContext = this;
int i = TaxList.FindIndex(x => x.ChargeName == tax_name);
Cmb_Tax.SelectedIndex = i;
The Method FindIndex() returns the index of the "No Tax" correctly but when I try assigning it to SelectedIndex of combo the SelectedIndex doesn't change. It stays at -1.
Update1
private void Cmb_Tax_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show(SelectedTax.ChargeName);
}
Update2
Updated the code as per suggested by #ElectricRouge
<ComboBox x:Name="Cmb_Tax" ItemsSource="{Binding TaxList, Mode=TwoWay}"
DisplayMemberPath="ChargeName" SelectedItem="{Binding SelectedTax,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
IsEditable="True" IsTextSearchEnabled="True"
SelectionChanged="Cmb_Tax_SelectionChanged"/>
Classes.Charges _selected_tax = new Classes.Charges();
public Classes.Charges SelectedTax
{
get
{
return _selected_tax;
}
set
{
_selected_tax = value;
OnPropertyChanged("SelectedTax");
}
}
ObservableCollection<Classes.Charges> _taxlist = new ObservableCollection<Classes.Charges>();
public ObservableCollection<Classes.Charges> TaxList
{
get
{
return _taxlist;
}
set
{
_taxlist = value;
OnPropertyChanged("TaxList");
}
}
public void Load_Tax(string tax_name = null, Classes.Charges selected_tax = null)
{
TaxList = Classes.Charges.GetParticularChargeList("Tax");
Cmb_Tax.DataContext = this;
//Cmb_Tax.SelectedValue = tax_name;
SelectedTax = selected_tax;
//int i = TaxList.FindIndex(x => x.ChargeName == tax_name);
//Cmb_Tax.SelectedIndex = i;
}
Any idea why this must be happening?
Also please suggest any other approach to display default in combo box.

Here's a working sample:
Viewmodel:
public MainWindow()
{
InitializeComponent();
var vm = new ViewModel();
this.DataContext = vm;
this.Loaded += (o,e) => vm.LoadData();
}
public class ViewModel : INotifyPropertyChanged
{
private IList<Charges> taxList;
public ICollectionView TaxList { get; private set; }
public void LoadData()
{
taxList = Charges.GetChargeList("taxes");
TaxList = CollectionViewSource.GetDefaultView(taxList);
RaisePropertyChanged("TaxList");
TaxList.CurrentChanged += TaxList_CurrentChanged;
var noTax = taxList.FirstOrDefault(c => c.ChargeName == "No Tax");
TaxList.MoveCurrentTo(noTax);
}
void TaxList_CurrentChanged(object sender, EventArgs e)
{
var currentCharge = TaxList.CurrentItem as Charges;
if(currentCharge != null)
MessageBox.Show(currentCharge.ChargeName);
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
View:
<ComboBox x:Name="cboTaxList"
ItemsSource="{Binding TaxList}"
DisplayMemberPath="ChargeName"
IsSynchronizedWithCurrentItem="True" />

List does not implement INotifyCollectionChanged make it ObservableCollection
ObservableCollection<Classes.Charges> _taxlist = new ObservableCollection<Classes.Charges>();
public ObservableCollection<Classes.Charges> TaxList
{
get
{
return _taxlist;
}
set
{
_taxlist = value;
OnPropertyChanged("TaxList");
}
}
And try setting the Mode=TwoWay
SelectedItem="{Binding SelectedTax,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"

Editing newly added row in Silverlight 3 DataGrid using MVVM

I am trying to use the Silverlight 3.0 DataGrid with the MVVM design pattern. My page has a DataGrid and a button that adds an item to the collection in the VM using a command (from the Composite Application Library). This works fine, and the new item is displayed and selected.
The problem I can't solve is how to begin editing the row. I want the new row to be immediately editable when the user clicks the Add button i.e. focus set to the DataGrid and the new row in edit mode.
This is the XAML in the view:
<Grid x:Name="LayoutRoot">
<StackPanel>
<data:DataGrid ItemsSource="{Binding DataView}"/>
<Button cmd:Click.Command="{Binding AddItemCommand}" Content="Add" />
</StackPanel>
</Grid>
The code behind has one line of code that creates an instance of the VM and sets the DataContext of the view.
The VM code is:
public class VM
{
public List<TestData> UnderlyingData { get; set; }
public PagedCollectionView DataView { get; set; }
public ICommand AddItemCommand { get; set; }
public VM()
{
AddItemCommand = new DelegateCommand<object>(o =>
{
DataView.AddNew();
});
UnderlyingData = new List<TestData>();
UnderlyingData.Add(new TestData() { Value = "Test" });
DataView = new PagedCollectionView(UnderlyingData);
}
}
public class TestData
{
public string Value { get; set; }
public TestData()
{
Value = "<new>";
}
public override string ToString()
{
return Value.ToString();
}
}
What would be the best way to solve this problem using the MVVM design pattern?

I faced the same issue. I've introduced interface ISupportEditingState:
public interface ISupportEditingState
{
EditingState EditingState { get; set; }
}
My VM implements it. And then I wrote this behaviour to synchronise editing state of DataGrid and my VM:
public class SynchroniseDataGridEditingStateBehaviour : Behavior<DataGrid>
{
public static readonly DependencyProperty EditingStateBindingProperty =
DependencyProperty.Register("EditingStateBinding", typeof(ISupportEditingState),
typeof(SynchroniseDataGridEditingStateBehaviour), new PropertyMetadata(OnEditingStateBindingPropertyChange));
private bool _attached;
private bool _changingEditingState;
public ISupportEditingState EditingStateBinding
{
get { return (ISupportEditingState)GetValue(EditingStateBindingProperty); }
set { SetValue(EditingStateBindingProperty, value); }
}
private static void OnEditingStateBindingPropertyChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var b = d as SynchroniseDataGridEditingStateBehaviour;
if (b == null)
return;
var oldNotifyChanged = e.OldValue as INotifyPropertyChanged;
if (oldNotifyChanged != null)
oldNotifyChanged.PropertyChanged -= b.OnEditingStatePropertyChanged;
var newNotifyChanged = e.NewValue as INotifyPropertyChanged;
if (newNotifyChanged != null)
newNotifyChanged.PropertyChanged += b.OnEditingStatePropertyChanged;
var newEditingStateSource = e.NewValue as ISupportEditingState;
if (newEditingStateSource.EditingState == EditingState.Editing)
{
// todo: mh: decide on this behaviour once again.
// maybe it's better to start editing if selected item is already bound in the DataGrid
newEditingStateSource.EditingState = EditingState.LastCancelled;
}
}
private static readonly string EditingStatePropertyName =
CodeUtils.GetPropertyNameByLambda<ISupportEditingState>(ses => ses.EditingState);
private void OnEditingStatePropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (_changingEditingState || !_attached || e.PropertyName != EditingStatePropertyName)
return;
_changingEditingState = true;
var editingStateSource = sender as ISupportEditingState;
if (editingStateSource == null)
return;
var grid = AssociatedObject;
var editingState = editingStateSource.EditingState;
switch (editingState)
{
case EditingState.Editing:
grid.BeginEdit();
break;
case EditingState.LastCancelled:
grid.CancelEdit();
break;
case EditingState.LastCommitted:
grid.CommitEdit();
break;
default:
throw new InvalidOperationException("Provided EditingState is not supported by the behaviour.");
}
_changingEditingState = false;
}
protected override void OnAttached()
{
var grid = AssociatedObject;
grid.BeginningEdit += OnBeginningEdit;
grid.RowEditEnded += OnEditEnded;
_attached = true;
}
protected override void OnDetaching()
{
var grid = AssociatedObject;
grid.BeginningEdit -= OnBeginningEdit;
grid.RowEditEnded -= OnEditEnded;
_attached = false;
}
void OnEditEnded(object sender, DataGridRowEditEndedEventArgs e)
{
if (_changingEditingState)
return;
EditingState editingState;
if (e.EditAction == DataGridEditAction.Commit)
editingState = EditingState.LastCommitted;
else if (e.EditAction == DataGridEditAction.Cancel)
editingState = EditingState.LastCancelled;
else
return; // if DataGridEditAction will ever be extended, this part must be changed
EditingStateBinding.EditingState = editingState;
}
void OnBeginningEdit(object sender, DataGridBeginningEditEventArgs e)
{
if (_changingEditingState)
return;
EditingStateBinding.EditingState = EditingState.Editing;
}
}
Works ok for me, hope it helps.

Whenever you talk about directly accessing ui components, your kinda missing the point of mvvm. The ui binds to the viewmodel, so find a way to alter the viewmodel instead.