CODEWITHSUNDEEP
c#mvvmdata-bindinguwp
Franck E
Franck E

Reputation: 729

UWP MVVM Data Binding for dummies (textbox.text from String)

Well, having a go at MVVM with UWP template 10. I have read many pages, and although everyone tries to say its really easy, I still can't make it work.

To put it into context, OCR is being run on an image, and I would like the text to be displayed in textbox automatically.

Here is my Model:

public class TextProcessing
{
    private string _ocrText;
    public string OcrText
    {
        get { return _ocrText; }
        set
        {
            _ocrText = value;
        }
    }
}

Here is my ViewModel:

public class ScanPageViewModel : ViewModelBase, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private TextProcessing _ocrTextVM;
    public ScanPageViewModel()
    {
        _ocrTextVM = new TextProcessing();
    }

    public TextProcessing OcrTextVM
    {
        get { return _ocrTextVM; }
        set {
            _ocrTextVM = value;
            this.OnPropertyChanged("OcrTextVM");
            }
    }

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

Here is my View:

<TextBox x:Name="rtbOcr" 
       Text="{Binding OcrTextVM.OcrText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

Firstly, that is not working. Could someone try to show where I am going wrong?

Then, the data is coming from a Services file, how would the Services update the value? What would be the correct code?

Thanks in advance.

Upvotes: 1

Views: 2910

Answers (3)

Franck E
Franck E

Reputation: 729

Actually, it is very easy once I manage to understand. Here is the code needed to update a TextBox.Text

In the Models:

public class DisplayText : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string _text;
    public string Text
    {
        get { return _text; }
        set
        {
            _text = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Text)));
        }
    }
}

In the XAML file:

<TextBox Text="{Binding Helper.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ... />

In the ViewModels:

    private DisplayText _helper = new DisplayText();
    public DisplayText Helper
    {
        get { return _helper; }
        set
        {
            _helper = value;
        }
    }

Then any mod from the ViewModels:

Helper.Text = "Whatever text, or method returning a string";

Upvotes: 2

Lennart
Lennart

Reputation: 10333

Your OnPropertyChanged call on OcrTextVM isn't actually called in your case, since you set the value in the constructor to its backing field and bypass the property.

If you set the value via the property, it should work:

public ScanPageViewModel()
{
    OcrTextVM = new TextProcessing();
}

Of course your view needs to know that ScanPageViewModel is its DataContext. Easiest way to do it is in the constructor of the code-behind of your view:

public OcrView()
{
    DataContext = new ScanPageViewModel();
    InitializeComponent();
}

Assuming your OCR service is returning a new TextProcessing object on usage, setting the property of OcrTextVM should suffice:

public class ScanPageViewModel : ViewModelBase, INotifyPropertyChanged
{
    //...       
    private void GetOcrFromService()
    {
        //...
        TextProcessing value = OcrService.Get();
        OcrTextVM = value;  
    }
}

On a note, the OcrTextVM name doesn't really reflect what the property is doing, since it doesn't look like it's a viewmodel. Consider renaming it.

Upvotes: 2

Alex Zhang
Alex Zhang

Reputation: 1118

Following code is cite from code.msdn (How to achieve MVVM design patterns in UWP), it will be helpful for you:

Check you code step by step.

1.ViewModel implemented interface INotifyPropertyChanged,and in property set method invoked PropertyChanged, like this:

public sealed class MainPageViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private string _productName;
    public string ProductName
    {
        get { return _productName; }
        set
        {
            _productName = value;
            if (PropertyChanged != null)
            {
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(nameof(ProductName)));
            }
        }
    }
}

2.Initialize you ViewMode in you page, and set DataContext as the ViewMode, like this:

public sealed partial class MainPage : Page
{
    public MainPageViewModel ViewModel { get; set; } = new MainPageViewModel();
    public MainPage()
    {
        ...
        this.DataContext = ViewModel;
    }
}

3.In you xaml, binding data from viewMode, like this:

<TextBox Text="{Binding Path=ProductName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Name="ProductNameTextBox" TextChanged="ProductNameTextBox_TextChanged" />

Upvotes: 3

Related Questions