1. Home
  2. Forum
  3. WPF
  4. How do I implement the SfTextboxExt AppendText property in accordance with MVVM?

How do I implement the SfTextboxExt AppendText property in accordance with MVVM?

Hello,


I am trying to make a live data monitoring application. But I have performance issues. I've included a screenshot of the design below for ease of explanation.


I want to show data from serial or ethernet in a textbox in formats like "Hexadecimal", "ASCII", "Decimal", "Binary".


I'm trying to do it in a MVVM-friendly way. I have byte[] variable in ViewModel. I add the incoming data to this variable. I show the byte format in the desired format with Converter in Xaml. Functionally it works but is slow.


ViewModel


public class MainWindowViewModel : ViewModelBase
{
    private byte[] _data;

    public byte[] Data
    {
        get => _data;
        set => SetProperty(ref _data, value);
    }

    public MainWindowViewModel()
    {
        Data = new byte[] { };
    }

    private void DataClearClick(object param)
    {
        Array.Clear(Data, 0, Data.Length);
    }
}

Xaml

  <syncfusion:TabItemExt Header="ASCII">
            <syncfusion:SfTextBoxExt Margin="10"
                                     Text="{Binding Data, Converter={StaticResource ByteToASCIIConverter}}"  
                                     TextWrapping="Wrap" 
                                     AcceptsReturn="True"
                                     MaxLines="70"/>
        syncfusion:TabItemExt>

Converter

        private string StringToAscii(byte[] array)
    {
        string str = "";
        for (int i = 0; i < array.Length; i++)
        {
            str = str + asciiCharacter[array[i]];
        }

        return str;
    }

    string[] asciiCharacter = new string[] { "<NULL>", "<SOH>", "<STX>", "<ETX>", "<EOT>", "<ENQ>", "<ACK>", "<BEL>",
                                             "<BS>", "<HT>", "<LF>", "<VT>", "<FF>", "<CR>", "<SO>", "<SI>",
                                             "<DLE>", "<DC1>", "<DC2>", "<DC3>", "<DC4>", "<NAK>", "<SYN>", "<ETB>",
                                             "<CAN>", "<EM>", "<SUB>", "<ESC>", "<FS>", "<GS>", "<RS>", "<US>",
                                             "<SP>","!", "\"\"", "#", "$", "%", "&", "'",
                                             "(",")", "*", "+", ",", "-", ".", "/",
                                             "0","1", "2", "3", "4", "5", "6", "7",
                                             "8","9", ":", ";", "<", "=", ">", "?",
                                             "@","A", "B", "C", "D", "E", "F", "G",
                                             "H","I", "J", "K", "L", "M", "N", "O",
                                             "P","Q", "R", "S", "T", "U", "V", "W",
                                             "X","Y", "Z", "[", "\"\"", "]", "^", "_",
                                             "`","a", "b", "c", "d", "e", "f", "g",
                                             "h","i", "j", "k", "l", "m", "n", "o",
                                             "p","q", "r", "s", "t", "u", "v", "w",
                                             "x","y", "z", "{", "|", "}", "~", "<DEL>",
                                             "€", " ", "‚", "ƒ", "„", "…", "†", "‡",
                                             "ˆ", "‰", "Š", "‹", "Œ", " ", "Ž", " ",
                                             " ", "‘", "’", "“", "”", "•", "–", "—",
                                             "˜", "™", "š", "›", "œ", " ", "ž", "Ÿ",
                                             " ", "¡", "¢", "£", "¤", "¥", "¦", "§",
                                             "¨", "©", "ª", "«", "¬", " ", "®", "¯",
                                             "°", "±", "²", "³", "´", "µ", "¶", "·",
                                             "¸", "¹", "º", "»", "¼", "½", "¾", "¿",
                                             "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç",
                                             "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï",
                                             "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×",
                                             "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß",
                                             "à", "á", "â", "ã", "ä", "å", "æ", "ç",
                                             "è", "é", "ê", "ë", "ì", "í", "î", "ï",
                                             "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷",
                                             "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ",};

  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return StringToAscii((byte[])value);
        }

Similar to above, I have binary, decimal and hexadecimal converters. I didn't want to add every single one of them as it would be a lot of code. I know that using a converter is inefficient. I'm not sure how to approach.

In addition, I moved away from MVVM and added the AppendText property with code-behind. This provided a significant performance boost. Still not quite enough. Setting the MaxLine property gave me an increase in performance. I found a few things about UI virtualization. I couldn't figure out how to implement it for textbox.

How can I improve performance with similar approaches? How can I implement AppendText in MVVM?

If I am wrong, please guide me.

Performance level expectations; The fact that it can display the incoming data in 100 ms in 4 separate textboxes.

Thank you.




3 Replies
SS Suganya Sethuraman Syncfusion Team January 6, 2022 10:53 AM UTC

Hi Özgür,

Since we are unable to reproduce the performance issue in SfTextBoxExt, we would like you to check the issue with the attached sample and let us know if it is reproduced. Else, please revert to us by modifying the sample based on your application and provide the replication procedure or the sample. It will be helpful for us to provide a better solution at the earliest.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteByte1711275373

Could you please provide more information, such as how to load the data into your application?

Regards,
Suganya Sethuraman. 


ÖZ Özgür January 6, 2022 11:50 AM UTC

I'm not sure how I can provide an instance listening to the Serial Port. Even if I send the sample to you, you need to install 3rd party software to use it. Can you do this?


Actually, the example I want is; It is the data virtualization and ui virtualization example of SfTextboxExt.


Also: How can I delete the first lines of SfTextboxExt if there are more than 100 lines?


Also ; I want a maximum of 100 lines in the SfTextboxExt. So how can I quickly delete the first 5 lines when there are more than 100 lines  (eg 105 lines  ). (Not necessarily MVVM compatible, but code-behind.)


SS Suganya Sethuraman Syncfusion Team January 7, 2022 04:41 PM UTC

Hi Özgür,

SfTextBoxExt is a search control.The SfTextBoxExt functionality provides several modes of suggestions while typing. The suggested text can be appended to the original text or can be displayed in a drop-down list so that searched item can be chosen based on the filtering option set. As a result, your request will fall outside of its scope. Please use TextBox rather than SfTextBoxExt.

Regards,
Suganya Sethuraman. 


Loader.
Up arrow icon