How to implement toolbars when using the MVVM template?

Question

I am creating a project using a serial port. I am using the MVVM model. I need to configure the serial port, so I use the toolbar.

This is my model:

public class Port : INotifyPropertyChanged, IDataErrorInfo { private SerialPort _serialPort; public Port() { _serialPort = new SerialPort(); } public string PortName { get { return _serialPort.PortName; } set { _serialPort.PortName = value; OnPropertyChanged("PortName"); } } public int BaudRate { get { return _serialPort.BaudRate; } set { _serialPort.BaudRate = value; OnPropertyChanged("BaudRate"); } } public Parity Parity { get { return _serialPort.Parity; } set { _serialPort.Parity = value; OnPropertyChanged("Parity"); } } public int DataBits { get { return _serialPort.DataBits; } set { _serialPort.DataBits = value; OnPropertyChanged("PortDataBits"); } } public StopBits StopBits { get { return _serialPort.StopBits; } set { _serialPort.StopBits = value; OnPropertyChanged("PortStopBits"); } } public Handshake Handshake { get { return _serialPort.Handshake; } set { _serialPort.Handshake = value; OnPropertyChanged("PortHandshake"); } } public string[] AvailablePortNames { get { return SerialPort.GetPortNames(); } } #region IDataErrorInfo Members string IDataErrorInfo.Error { get { return null; } } string IDataErrorInfo.this[string propertyName] { get { return this.GetValidationError(propertyName); } } #endregion // IDataErrorInfo Members #region Validation /// <summary> /// Returns true if this object has no validation errors. /// </summary> public bool IsValid { get { foreach (string property in ValidatedProperties) if (GetValidationError(property) != null) return false; return true; } } static readonly string[] ValidatedProperties = { "PortName", }; string GetValidationError(string propertyName) { if (Array.IndexOf(ValidatedProperties, propertyName) < 0) return null; string error = null; switch (propertyName) { case "PortName": ValidatePortName(); break; default: Debug.Fail("Unexpected property being validated on Port: " + propertyName); break; } return error; } string ValidatePortName() { if (IsStringMissing(this.PortName)) { return Strings.Port_Error_MissingName; } return null; } #endregion // Validation #region INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { this.VerifyPropertyName(propertyName); PropertyChangedEventHandler handler = this.PropertyChanged; if (handler != null) { var e = new PropertyChangedEventArgs(propertyName); handler(this, e); } } #endregion // INotifyPropertyChanged Members } 

Then I have SetupPortView:

 <UserControl x:Class="PortChat.View.SetupPortView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vw="clr-namespace:PortChat.View" > <ToolBar> <Label Content="COM Port:" Target="{Binding ElementName=AvailablePortsComboBox}" /> <ComboBox x:Name="AvailablePortsComboBox" Width="80" ItemsSource="{Binding Path=AvailablePortNames, Mode=OneTime}" SelectedItem="{Binding Path=PortName, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{x:Null}" /> ... 

My question is: when the user clicks the CONNECT button, create a port with this setting. I am not sure if I am creating the right model. In my MainWindowViewModel class, I created a Port variable, but I think this is wrong.

How can I improve this code and create a Port object using MVVM (I don’t know how to use MVVM on the toolbar using text fields)?

Answer 1

I would change the ComboBox bindings. I would bind the ComboBox to a collection of ports (not names), and also bind the SelectedItem from ComboBox to the SelectedPort property in the ViewModel.

Thus, you know which port was selected by the user, and there is no need to request a fee for the correct port.

If you want to allow the user to create / configure a new port, simply add an empty / new Port object to the collection and set the SelectedPort value for this newly added item.