How to add a table/grid to a vb.net/C# WPF window?

Question

I have an asynchronous server listening for clients on a local network. As each client sends a connect message to the server, I want the server to display the client's name in a table.

Assume that I already have the client's name and IP address as a string ClientDetails separated by a _ e.g. "PC5_192.168.1.10"

*EDIT *

What I want

As clients join in, I would like to add each client as a new row to the table/grid.

I am using WPF. Either vb.net or C# answer will be fine, I can translate it myself.

Fede · Accepted Answer

I Prepared a small example of "the WPF way" to do this. It looks like this in my computer:

enter image description here

Im using random values as the data source:

 public class RandomConnectionAdder
    {
        public Timer timer;
        public Random random = new Random();

        public Action OnConnectionAdded { get; set; }

        public RandomConnectionAdder(Action onConnectionAdded)
        {
            OnConnectionAdded = onConnectionAdded;
            timer = new Timer(x => AddConnection(), null, 5000, 2000);
        }

        private void AddConnection()
        {
            var computernumber = random.Next(1, 50);
            var newrandomconnection = new Connection()
                {
                    ComputerName = "PC" + computernumber.ToString(), 
                    IPAddress = "192.168.1." + computernumber,
                    ConnectionTime = DateTime.Now
                };

            if (OnConnectionAdded != null)
                OnConnectionAdded(newrandomconnection);
        }
    }

Notice that I added a level of indirection via the use of the Action delegate to keep the separation of concerns. The "listener" has the responsibility of listening for incoming connections, what to do when a new connection is added is outside its scope.

This is the Model class:

  public class Connection: INotifyPropertyChanged
    {
        private string _computerName;
        public string ComputerName
        {
            get { return _computerName; }
            set
            {
                _computerName = value;
                OnPropertyChanged("ComputerName");
            }
        }

        private string _ipAddress;
        public string IPAddress
        {
            get { return _ipAddress; }
            set
            {
                _ipAddress = value;
                OnPropertyChanged("IPAddress");
            }
        }

        private DateTime _connectionTime;
        public DateTime ConnectionTime
        {
            get { return _connectionTime; }
            set
            {
                _connectionTime = value;
                OnPropertyChanged("ConnectionTime");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

This is the Window Code-behind:

 public partial class Window6 : Window
    {
        private RandomConnectionAdder adder;
        private ObservableCollection Connections;

        public Window6()
        {
            InitializeComponent();
            Connections = new ObservableCollection();
            adder = new RandomConnectionAdder(x => Dispatcher.BeginInvoke((Action) (() => AddConnection(x))));
            DataContext = Connections;
        }

        private void AddConnection(Connection connection)
        {
            Connections.Add(connection);
        }
    }

As you can see, the window instantiates the RandomConnectionAdder and sets its OnConnectionAdded action to a lambda that dispatches the addition of the item to the ObservableCollection to the UI Thread via the Dispatcher.

Finally, this is the whole XAML:

As you can see, Im in no way manipulating UI elements in code. This keeps the code clean and easy and well separated, as the Application logic / Data is in no way dependant on the state of UI elements.

Also, in this example can be seen the concept of "Binding several different Views to the Same ViewModel", which in this case is the ObservableCollection itself.

This is "the WPF" approach for everything. You almost never have to manipulate UI elements in code, at least not in regards to application logic or data.

Just copy and paste my code in a File -> New Project -> WPF Application and see the results for yourself.

How to add a table/grid to a vb.net/C# WPF window?

Answers (1)

Related Questions