Question

I’m building a Metro App using VS 2012 and the Windows 8 SDK. In the app, I have this class (with a corresponding struct)

// Parameter data structure for tools
public struct ToolParameter
{
    public string Title { get; set; }
    public Object Value { get; set; }
    public string Description { get; set; }
}
// Tool that will be used to execute something on phone
public class Tool
{
    public string Title{ get; set; }
    public ObservableCollection<ToolParameter> Parameters { get; set; }
    public string Description { get; set; }
}

On a certain page in the app, I bind an instance of the class to the dataContext of the page

this.DataContext = currentTool;

On the page, I display various information about the app, including the parameters, which I want to make editable on the page. Because of this, I’m using a TextBox to display the parameters so that it can be edited, and binding it to the “Value” member of the ToolParameter struct.

<TextBox x:Name="ParameterValue" FontSize="15" Text="{Binding Value, Mode=TwoWay}"     TextWrapping="Wrap"/>

Unfortunately, when a TextBox is bound to a value, it doesn’t update until it no longer has a focus, so I added a button that the user can click that will update the parameters (and change focus from the TextBox). Unfortunately, upon clicking of the button, though the focus changes, the values of the parameter in the currentTool variable is never changed. Is there something about data binding that I am missing? Might it be that the parent of the TextBox named ParameterValue (the parameters are all part of a ListView) has to be two way as well?

Answer 1

From what I can see, youre TextBox is binding to Value which is a property of the ToolParameter class. The DataContext for the page is of type Tool. Tool contains Parameters which is a collection of ToolParameter objects. So, the TextBox needs to be within an ItemsCollection that has the ItemsSource set to bind to the Parameters property.

Example:

<StackPanel>
    <TextBlock Text="{Binding Title}"/>
    <TextBlock Text="{Binding Description}"/>

    <!-- showing a ListBox, but can be any ItemsControl -->
    <ListBox ItemsSource="{Binding Parameters}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding Value}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

Also make sure that your classes Tool and ToolParameter implement INotifyPropertyChanged and that the setter for your properties fire the PropertyChanged event

UPDATE: Adding info that was too large for a comment

This should help understand Source/Target in bindings. For your TextBox, the source of the binding is the Value property and the Target is the TextProperty of the TextBox. When the source updates, the Text will update within the TextBox. If you the TextProperty of the TextBox changes, then it will update the Value property of your object (provided mode is set to TwoWay). You’re tool however will NOT update and neither will the Parameters property of the Tool class. If you wish to update the tool object when a property of a ToolParameter updates, then you will need to subscribe to the PropertyChanged event of each ToolParameter object that gets added to the Parameters collection.