WPF- ListView of ItemsControl with TextBoxes performance issue

Question

I'm struggling to find a solution with a performance problem on WPF. I have a C# project that receives some "messages" from a serial port and displays them on a GUI. This GUI allow the editing of the bytes of each received message and also have a "save" button that saves the edited messages into a file.

For the GUI, using MVVM with WPF, what I did to implement the above requirement is the following:

A "MainViewModel" class that contains an observable collection of "SerialMessageViewModel".
Each "SerialMessageViewModel" class contains the "name" of the serial message (string) and it's data bytes.

The View is showing the collection of "SerialMessageViewModel" using a ListView and for each SerialMessage I'm using an ItemsControl to show the MessageData bytes. Since I want thoose bytes to be editable I'm using a TextBox as ItemTemplate of the ItemsControl. The idea here is to have the ItemsControl to work as an "HexEditor" like GUI.

Everything is actually working fine except for the scrolling of the ListView which is very slow.

This makes the application very frustrating to use.. I understand that using a ListView of ItemsControl with TextBoxes like this does generate a lot of TextBoxes, but I can't find another way of making something similar. The Visual Studio profiling tool shows that the lag in the scrolling is caused by "layout" time.

Any suggestions on how to solve this problem? Thank you very much !

View XAML

ViewModels

public class MainViewModel : ViewModelBase
{
    private ObservableCollection _messages;

    public ObservableCollection Messages
    {
        get { return _messages; }
        set
        {
            if (Equals(value, _messages)) return;
            _messages = value;
            RaisePropertyChanged();
        }
    }

    public MainViewModel()
    {
        GetMessages();
    }

    private void GetMessages()
    {
        // Simulates the reception of messages from serial
        Messages = new ObservableCollection();
        Random rand = new Random();

        for (int i = 0; i < 100; i++)
        {
            byte[] data = new byte[50];
            rand.NextBytes(data);
            SerialMessageViewModel message = new SerialMessageViewModel("Message n." + i, data);
            Messages.Add(message);
        }
    }
}

public class SerialMessageViewModel : ViewModelBase
{
    private string _messageName;
    private ObservableCollection _messageData;

    public string MessageName
    {
        get { return _messageName; }
        set
        {
            if (Equals(value, _messageData)) return;
            _messageName = value;
            RaisePropertyChanged();
        }
    }

    public ObservableCollection MessageData
    {
        get { return _messageData; }
        set
        {
            if (Equals(value, _messageData)) return;
            _messageData = value;
            RaisePropertyChanged();
        }
    }

    public SerialMessageViewModel(string messageName, byte[] data)
    {
        MessageName = messageName;
        MessageData = new ObservableCollection();
        foreach (byte b in data)
            MessageData.Add(new NotifyByte(b));
    }
}

public class NotifyByte : ViewModelBase
{
    private byte _value;

    public byte Value
    {
        get { return _value; }
        set
        {
            if (Equals(value, _value)) return;
            _value = value;
            RaisePropertyChanged();
        }
    }

    public NotifyByte(byte value)
    {
        _value = value;
    }
}

ByteToHexStringConverter

public class ByteToHexStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        byte num = (byte)value;
        return num.ToString("X2");
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string input = (string)value;
        if (!String.IsNullOrEmpty(input))
        {
            input = input.Replace(" ", "");
            return System.Convert.ToByte(input, 16);
        }
        return 0x00;
    }
}

Marisa · Accepted Answer

This doesn't use your example code, but in general here's how you could use a DataGrid to implement what you're looking for, but to try and make it more lightweight. Note that I'm using a TextBlock since we don't want to allow editing from the cell. Your custom text box XAML would go in the CellEditTemplate.

MainWindow.xaml

MainWindowVm.cs

public class MainWindowVm
{
   public ObservableCollection DataSet { get; set; } = new ObservableCollection();

   public MainWindowVm()
   {
      DataSet.Add(new TestObject {DisplayName = "Booyah", IsSomethingRelevant = true});
      DataSet.Add(new TestObject {DisplayName = "Iggy Boop", IsSomethingRelevant = false});
   }
}

TestObject.cs (bindablebase just provides default implementations for notifypropertychanged)

public class TestObject : BindableBase
{
   private string _displayName;

   public string DisplayName
   {
      get { return _displayName; }
      set { SetProperty(ref _displayName, value); }
   }

   private bool _IsSomethingRelevant;

   public bool IsSomethingRelevant
   {
      get { return _IsSomethingRelevant; }
      set
      {
         SetProperty(ref _IsSomethingRelevant, value); 
         NotifyPropertyChanged(nameof(DisplayForIsSomethingRelevant));
      }
   }

   public string DisplayForIsSomethingRelevant => IsSomethingRelevant
                                                     ? "Totes Relevant"
                                                     : "Non-Relevono";
}

WPF- ListView of ItemsControl with TextBoxes performance issue

Answers (1)

Related Questions