Windows Phone 7 TextBox, binding and ApplicationButton

Consider a Windows Phone 7 application with a textbox and an ApplicationButton.

TextBox and ApplicationButton

UI:

  1. <Canvas x:Name="ContentGrid" Grid.Row="1" Height="545" Width="480">
  2.     <TextBlock Text="Enter text here" Canvas.Left="6" Canvas.Top="187" />
  3.     <TextBox x:Name="myTextBox" Text="{Binding Test, Mode=TwoWay}" Height="69" Width="480" Canvas.Left="0" Canvas.Top="209" />
  4. </Canvas>

Backend:

  1. namespace WindowsPhoneApplication1
  2. {
  3.     using System;
  4.     using System.ComponentModel;
  5.     using System.Windows.Controls;
  6.     using Microsoft.Phone.Controls;
  7.  
  8.     public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
  9.     {
  10.         private string _test;
  11.         // Constructor
  12.         public MainPage()
  13.         {
  14.             this.InitializeComponent();
  15.  
  16.             this.DataContext = this;
  17.         }
  18.  
  19.         public string Test
  20.         {
  21.             get
  22.             {
  23.                 return this._test;
  24.             }
  25.             set
  26.             {
  27.                 if (value != this._test)
  28.                 {
  29.                     this._test = value;
  30.                     this.PropertyChanged(this, new PropertyChangedEventArgs("Test"));
  31.                 }
  32.             }
  33.         }
  34.  
  35.         #region INotifyPropertyChanged Members
  36.  
  37.         public event PropertyChangedEventHandler PropertyChanged;
  38.  
  39.         #endregion
  40.  
  41.     }
  42. }

The textbox is bound to a property on the backend (two way binding) and when you click the bottom button the text is saved/send/encrypted/whatever.

Now the problem is that clicking the button doesn’t do a UI –> source binding update as it would do with a normal button.

Testing the app

I enter the text ‘test’ on the TextBlock and IMMIDIATLY click the ApplicationButton. I don’t do anything else. This is a common user practice, he changes something and clicks the save/send/whatsoever button.

This is the result:

Visual Studio 2010 Watch 1

Check the Watch 1. As you can see the value is still null. The value is not sent to the _test value. How do we solve this?

You can add the following line to the click event handler:

  1. this.myTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();

So the result will look like this:

  1. private void AppbarButton1Click(object sender, EventArgs e)
  2. {
  3.     this.myTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
  4.  
  5.     // handle save/send/encrypt/whatever here
  6. }

There are 3 downsides I think:

  1. You need to name your TextBlock which (I think) unnecessarily clutters your scope with otherwise unused variables (that’s why we use bindings too!)
  2. Your UI and ViewModel (in my case) aren’t decoupled 100% anymore. In Windows Phone 7 this is no issue though, since WP7 has no ICommand and I have to couply my UI and ViewModel anyway 🙂
  3. You need to remember to write this line! Which can be quite cumbersome with a lot of application buttons.

And items in a ApplicationBar.MenuItems (ApplicationBarMenuItem) have the same problem. The UI doesn’t push the update to the ViewModel.

I hope this will be fixed in the final version, and I will post this to Microsoft Connect. If anybody has a better solution please feel free to share it.

Windows Phone 7, adding and displaying icons.

Hi all,

I tried to display an icon in my Windows Phone 7 application:

<shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar.feature.settings.rest.png" Text="Settings" />

By default, when you add an image to the solution folder it sets the build action as Resource, as shown below:

Build Action Resource

But when you run the application with the Build Action as Resource you will get a result looking like this:

Wrong icon

While I really meant an icon looking like this:

Gear

How do we fix it?

Set the Build Action to Content!

Build Action Content

And this is the result:

Result