WPF two-way binding not working
Alright, I was able to determine the problem and get it resolved. It turned out to be a compilation of things causing this.
First, my model.
UserPreferences <-- MainWindow is data bound to this.
[Serializable]
public class UserPreferences : INotifyPropertyChanged
{
private CollectionDevice selectedCollectionDevice;
public UserPreferences()
{
this.AvailableCollectionDevices = new List<CollectionDevice>();
var yuma1 = new CollectionDevice
{
BaudRate = 4800,
ComPort = 31,
DataPoints = 1,
Name = "Trimble Yuma 1",
WAAS = true
};
var yuma2 = new CollectionDevice
{
BaudRate = 4800,
ComPort = 3,
DataPoints = 1,
Name = "Trimble Yuma 2",
WAAS = true
};
var toughbook = new CollectionDevice
{
BaudRate = 4800,
ComPort = 3,
DataPoints = 1,
Name = "Panasonic Toughbook",
WAAS = true
};
var other = new CollectionDevice
{
BaudRate = 0,
ComPort = 0,
DataPoints = 0,
Name = "Other",
WAAS = false
};
this.AvailableCollectionDevices.Add(yuma1);
this.AvailableCollectionDevices.Add(yuma2);
this.AvailableCollectionDevices.Add(toughbook);
this.AvailableCollectionDevices.Add(other);
this.SelectedCollectionDevice = this.AvailableCollectionDevices.First();
}
/// <summary>
/// Gets or sets the GPS collection device.
/// </summary>
public CollectionDevice SelectedCollectionDevice
{
get
{
return selectedCollectionDevice;
}
set
{
selectedCollectionDevice = value;
if (selectedCollectionDevice.Name == "Other")
{
this.AvailableCollectionDevices[3] = value;
}
this.OnPropertyChanged("SelectedCollectionDevice");
}
}
/// <summary>
/// Gets or sets a collection of devices that can be used for collecting GPS data.
/// </summary>
[Ignore]
[XmlIgnore]
public List<CollectionDevice> AvailableCollectionDevices { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Notifies objects registered to receive this event that a property value has changed.
/// </summary>
/// <param name="propertyName">The name of the property that was changed.</param>
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
In the setter for the SelectedCollectionDevice I was not looking to see if the selected device was other. All of the other devices (yuma1, panasonic etc) have pre-determined property values that are never changed. When the user selects "Other" the textbox's are displayed and they can manually enter the data. The problem was that when the manually entered data was restored from the database during the window loading, I was not assigning the custom data in SelectedCollectionDevice to the corresponding object in the collection.
During window load, the Combobox.SelectedItem was set to the index of the SelectedCollectionDevice. The Combobox.ItemsSource was set to the AvailableCollectionDevices collection.
this.CollectionDevice.SelectedIndex =
viewModel.AvailableCollectionDevices.IndexOf(
viewModel.AvailableCollectionDevices.FirstOrDefault(
acd => acd.Name == viewModel.SelectedCollectionDevice.Name));
When the above code is executed, the combo box pulls the default object from its data source, which has all of the values set to zero. Within the combo box's SelectionChanged event I assigned the Data Context SelectedCollectionDevice to the zero'd out item associated with the combo box.
private void CollectionDeviceSelected(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0 && e.AddedItems[0] is CollectionDevice)
{
// Assign the view models SelectedCollectionDevice to the device selected in the combo box.
var device = e.AddedItems[0] as CollectionDevice;
((Models.UserPreferences)this.DataContext).SelectedCollectionDevice = device;
// Check if Other is selected. If so, we have to present additional options.
if (device.Name == "Other")
{
OtherCollectionDevicePanel.Visibility = Visibility.Visible;
}
else if (OtherCollectionDevicePanel.Visibility == Visibility.Visible)
{
OtherCollectionDevicePanel.Visibility = Visibility.Collapsed;
}
}
}
So long story short, I added the code above in the setter for the SelectedCollectionDevice to apply the value to the AvailableCollectionDevices List<>. This way, when the combo box has the "Other" value selected, it pulls the value from the collection with the correct data. During deserialization, I am just deserializing the SelectedCollectionDevice and not the List<> which is why the data was always being overwrote when the window first loaded.
This also explains why re-assigning the the data context SelectedCollectionDevice property with the local viewModel.SelectedCollectionDevice was working. I was replacing the zero'd out object associated with the combo box, which had set the data context during the SelectionChanged event. I am not able to set the DataContext in the XAML and remove the manual assignment.
Thanks for all of the help, it helped me narrow down my debugging until I finally resolved the issue. Much appreciated!
Not an answer but wanted to post the code that works on my machine to help OP...
Complete xaml page...
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<StackPanel Name="OtherCollectionDevicePanel">
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center"
Margin="10, 10, 0, 0"
Text="Baud Rate" />
<TextBox Name="BaudRateTextBox"
Text="{Binding Path=SelectedCollectionDevice.BaudRate, Mode=TwoWay}"
Margin="10, 10, 0, 0"
MinWidth="80"></TextBox>
</StackPanel>
<WrapPanel>
<TextBlock VerticalAlignment="Center"
Margin="10, 10, 0, 0"
Text="Com Port" />
<TextBox Text="{Binding Path=SelectedCollectionDevice.ComPort, Mode=TwoWay}"
Margin="10, 10, 0, 0"
MinWidth="80"></TextBox>
</WrapPanel>
<WrapPanel>
<TextBlock VerticalAlignment="Center"
Margin="10, 10, 0, 0"
Text="Data Points" />
<TextBox Text="{Binding Path=SelectedCollectionDevice.DataPoints, Mode=TwoWay}"
Margin="10, 10, 0, 0"
MinWidth="80"></TextBox>
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center"
Margin="10, 10, 0, 0"
Text="WAAS" />
<CheckBox IsChecked="{Binding Path=SelectedCollectionDevice.WAAS, Mode=TwoWay}"
Content="Enabled"
Margin="20, 0, 0, 0"
VerticalAlignment="Bottom"></CheckBox>
</WrapPanel>
<Button Click="ButtonBase_OnClick" Content="Set ComPort to 11"></Button>
</StackPanel>
</Grid>
</Window>
Complete code behind...
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Xml.Serialization;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
DataContext = new UserPreferences();
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
((UserPreferences) DataContext).SelectedCollectionDevice.ComPort = 11;
}
}
/// <summary>
/// Provides a series of user preferences.
/// </summary>
[Serializable]
public class UserPreferences : INotifyPropertyChanged
{
private CollectionDevice selectedCollectionDevice;
public UserPreferences()
{
this.AvailableCollectionDevices = new List<CollectionDevice>();
var yuma1 = new CollectionDevice
{
BaudRate = 4800,
ComPort = 31,
DataPoints = 1,
Name = "Trimble Yuma 1",
WAAS = true
};
var yuma2 = new CollectionDevice
{
BaudRate = 4800,
ComPort = 3,
DataPoints = 1,
Name = "Trimble Yuma 2",
WAAS = true
};
var toughbook = new CollectionDevice
{
BaudRate = 4800,
ComPort = 3,
DataPoints = 1,
Name = "Panasonic Toughbook",
WAAS = true
};
var other = new CollectionDevice
{
BaudRate = 0,
ComPort = 0,
DataPoints = 0,
Name = "Other",
WAAS = false
};
this.AvailableCollectionDevices.Add(yuma1);
this.AvailableCollectionDevices.Add(yuma2);
this.AvailableCollectionDevices.Add(toughbook);
this.AvailableCollectionDevices.Add(other);
this.SelectedCollectionDevice = this.AvailableCollectionDevices.First();
}
/// <summary>
/// Gets or sets the GPS collection device.
/// </summary>
public CollectionDevice SelectedCollectionDevice
{
get
{
return selectedCollectionDevice;
}
set
{
selectedCollectionDevice = value;
this.OnPropertyChanged("SelectedCollectionDevice");
}
}
/// <summary>
/// Gets or sets a collection of devices that can be used for collecting GPS data.
/// </summary>
[XmlIgnore]
public List<CollectionDevice> AvailableCollectionDevices { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Notifies objects registered to receive this event that a property value has changed.
/// </summary>
/// <param name="propertyName">The name of the property that was changed.</param>
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
/// <summary>
/// CollectionDevice model
/// </summary>
[Serializable]
public class CollectionDevice : INotifyPropertyChanged
{
/// <summary>
/// Gets or sets the COM port.
/// </summary>
private int comPort;
/// <summary>
/// Gets or sets a value indicating whether [waas].
/// </summary>
private bool waas;
/// <summary>
/// Gets or sets the data points.
/// </summary>
private int dataPoints;
/// <summary>
/// Gets or sets the baud rate.
/// </summary>
private int baudRate;
/// <summary>
/// Gets or sets the name.
/// </summary>
public string Name { get; set; }
/// <summary>
/// Gets or sets the COM port.
/// </summary>
public int ComPort
{
get
{
return this.comPort;
}
set
{
this.comPort = value;
this.OnPropertyChanged("ComPort");
}
}
/// <summary>
/// Gets or sets the COM port.
/// </summary>
public bool WAAS
{
get
{
return this.waas;
}
set
{
this.waas = value;
this.OnPropertyChanged("WAAS");
}
}
/// <summary>
/// Gets or sets the COM port.
/// </summary>
public int DataPoints
{
get
{
return this.dataPoints;
}
set
{
this.dataPoints = value;
this.OnPropertyChanged("DataPoints");
}
}
/// <summary>
/// Gets or sets the COM port.
/// </summary>
public int BaudRate
{
get
{
return this.baudRate;
}
set
{
this.baudRate = value;
this.OnPropertyChanged("BaudRate");
}
}
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Notifies objects registered to receive this event that a property value has changed.
/// </summary>
/// <param name="propertyName">The name of the property that was changed.</param>
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public override string ToString()
{
return this.Name;
}
}
}
By default, the Text property of TextBox is updated only when the focus on it is lost.
Did you verify it with your DataContext?
If you want to override this behaviour, you have to include the UpdateSourceTrigger property in this way:
Text="{Binding Path=SelectedCollectionDevice.BaudRate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}
Setting UpdateSourceTrigger's value to PropertyChanged, the change is reflected in the TextBox when you change the value of your bound property, as soon as the text changes.
A useful tutorial about the usage of UpdateSourceTrigger property is here.