reverse a word and update the ui

Question

I am trying to reversed the word when I press a button.

public partial class MainPageViewMode : ObservableObject {

    public ObservableCollection<WordItem> WordItems { get; set; } = [];

    [ObservableProperty]
    WordItem? word = new();


    [RelayCommand]
    void ShowWordData() {


        string[] words = Word.word.Split(' ');
        WordItems.Clear();
        foreach(var item in words) {

            WordItems.Add(new WordItem { word = item, length = item.Length });
        }

        char[] charArray = Word.word.ToCharArray();
        Array.Reverse(charArray);
        string reversedWord = new string(charArray);
        Word.word = reversedWord;


    }
}

namespace Test.Model;
public class WordItem {

    public string word { get; set; }

    public int length { get; set; }


}

Everythg is working, but after I show the data in the collectionView I need to reverse the word in the textbox. But the Ui is not changing.

Answer 1

Hello,

Everythg is working, but after I show the data in the collectionView I need to reverse the word in the textbox. But the Ui is not changing.

Firstly, you need add [ObservableProperty] for your WordItem model like following code.

public partial class WordItem : ObservableObject
{
    [ObservableProperty]
    private string word;

   [ObservableProperty]
    private int length;
}

Next, if you bind this word property in the Entry'text, you want to change the value at the runtime. Please bind the Text="{Binding Word.Word}" for your Entry, here is my tested layout.

 <VerticalStackLayout>
       <HorizontalStackLayout HorizontalOptions="CenterAndExpand">
           <Entry WidthRequest="500" Text="{Binding Word.Word}" x:Name="DisplayNameEntry"></Entry>
           <Button Text="ADD" Command="{Binding ShowWordDataCommand}" CommandParameter="{Binding Source={x:Reference DisplayNameEntry}, Path=Text}"></Button>
       </HorizontalStackLayout>
       <CollectionView HorizontalOptions="CenterAndExpand" ItemsSource="{Binding WordItems}">
           <CollectionView.ItemTemplate>
               <DataTemplate>
                   <StackLayout >
                       <Label
                      Text="{Binding Path=Word, StringFormat='Word: &quot;{0}&quot;'}"
                      FontAttributes="Bold" />
                       <Label
Text="{Binding Path=Length, StringFormat='Count: &quot;{0}&quot;'}"
FontAttributes="Bold" />
                   </StackLayout>
               </DataTemplate>
           </CollectionView.ItemTemplate>
       </CollectionView>
   </VerticalStackLayout>

By the way, if you add [ObservableProperty] in the first step. You need to the change the property from Lowercase attributes to uppercase, here is my edited viewmodel.

public partial class MainPageViewMode : ObservableObject
{
    public ObservableCollection<WordItem> WordItems { get; set; } = [];
    [ObservableProperty]
    WordItem? word = new();


   [RelayCommand]
    void ShowWordData()
    {
        string[] words = Word.Word.Split(' ');
        WordItems.Clear();
        foreach (var item in words)
        {
           WordItems.Add(new WordItem { Word = item, Length = item.Length });
        }
       char[] charArray = Word.Word.ToCharArray();
        Array.Reverse(charArray);
        string reversedWord = new string(charArray);
        Word.Word = reversedWord;
    }
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.