Simple XAML binding in a textblock text

Question

I have a TextBlock control inside a HubSection in a Windows 8.1 Universal app.

<TextBlock x:Name="api_enabled_label"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        Text="{Binding APIinfotext}" />

Now when the page is launched, in the contrustor, there is a method that is run.

public string APIinfotext { get; set; }    

public sealed partial class MainPage : Page {

    VoipMS voip_service = new VoipMS("[email protected]", "Kitt0cat");

    public string APIinfotext { get; set; }

    public MainPage() {
        this.InitializeComponent();
        // disable sections until API is enabled
        mainpagehub.Sections[1].IsEnabled = false;
        mainpagehub.Sections[2].IsEnabled = false;
        //check for API and enable sections            
        checkAPI();
    }

    private async void checkAPI() {
        //irrelevant code above
        switch (result) {
            case "success":                        
                APIinfotext = "Your API is connected";                        
                break;
        //irrelevant code below
        }
    }

So why dosnt this work? I set the DataContext of the Textblock to the current class (which is the MainPage partial class) and the property is a public property.

Note: Today is my first time working with .net 4.5 with XAML after a huge break at the .net 2.0 framework with WinForms.

Answer 1

Your binding doesn't know that APIinfotext property has changed. To let the bindings know that the property has changed you can do one of the following. The first one is the easiest.

1) implement INotifyPropertyChanged interface and raise the PropertyChanged changed event once APIinfotext has changed (PropertyChanged("APIinfotext"));

2) Have an event called APIinfotextChanged with the standard event signature and raise that event after the property has changed.

3) Implement your property as a DependencyProperty (not an ideal solution in this case).

Answer 2

You might be missing the part where you have to RaiseProperyChange NotifyPropertyChage to update the bindings. your Model should implement the INotifyPropertyChanged interface

public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName)
{
  if (this.PropertyChanged != null)
    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

then

RaisePropertyChanged("APIinfotext");

http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged.propertychanged.aspx

Answer 3

Looks like you need a very simple example of what the other two are talking about. Let's assume nothing. You need to set the DataContext correctly, plus raise the event. This is as simple as I can put it, when you click on the button it will change the TextBox because I change the Property which raises the event.

---

XAML

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBox Text="{Binding APIinfotext}"  Height="100" Width="400" HorizontalAlignment="Left"/>
            <Button x:Name="myButton" Content="Change Text" Height="200" Width="400" Click="myButton_Click"/>
        </StackPanel>
    </Grid>
</Page>

---

C# (Pay attention, to the SET part of the APIinfotext)

using System.ComponentModel;   // INotifyPropertyChanged

public sealed partial class MainPage : Page, INotifyPropertyChanged
{

    private string _apiinfotext = "Default Text";
    public string APIinfotext 
    {
        get { return _apiinfotext; }
        set
        {
            _apiinfotext = value;
            RaisePropertyChanged("APIinfotext");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    public MainPage()
    {
        this.InitializeComponent();

        this.DataContext = this;
    }

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        this.APIinfotext = "Don't confuse movement for progress.";
    }
}

---