Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

How to debug data binding problems on Windows Phone

From Wiki
Jump to: navigation, search
influencer (Talk | contribs)
(Influencer -)
 
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(24 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Draft]][[Category:Windows Phone]][[Category:Silverlight]]
+
[[Category:Files/Data on Windows Phone]][[Category:Debugging on Windows Phone]][[Category:Code Examples]][[Category:XAML]][[Category:Windows Phone 7.5]][[Category:Windows Phone 8]]
''Delete instructional text in italic''
+
{{Abstract|This article explains how to debug data binding issues by inspecting the elements before they are due to be displayed by the control.}}
  
{{Abstract|This article explains how to ... }} ''Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.''
 
 
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
 
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 10: Line 7:
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Windows Phone 7.5
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|keywords= IValueConverter, data binding, xaml
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
Line 29: Line 26:
  
 
== Introduction ==
 
== Introduction ==
If you use data binding in your Windows Phone application, during development you'll come to the point where you have linked everything together but data doesn't display in your control or the wrong data appears.
+
[http://msdn.microsoft.com/en-us/library/ms752347.aspx Data binding] allows you to link a data source defined in code to a UI description in XAML (target). While defining a binding is quite straightforward, if something goes wrong it is useful to be able to tell whether the problem is in your source data or in the binding definition.
 
+
What can you do? You can use an IValueConverter and set a breakpoint there. This way you can see what data arrives at your element and check the available properties.
+
 
+
Say you have a ListBox like this:
+
 
+
        <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
+
            <ListBox.ItemTemplate>
+
              <DataTemplate>
+
                  <StackPanel Margin="0,0,0,17" Width="432" Height="78">
+
                    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
+
                    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
+
                  </StackPanel>
+
              </DataTemplate>
+
            </ListBox.ItemTemplate>
+
        </ListBox>
+
 
+
You can add a converter that gets called when the data from the binding source arrives and before it gets delivered to the control. Here we have one condition when this debugging technique can't help: if the binding fails earlier, the converter doesn't get calledt
+
 
+
To implement the converter you have to derive a class from IValueConverter and implement it's methods:
+
 
+
  public class DatabindingDebugConverter : IValueConverter
+
  {
+
  public object Convert(object value, Type targetType,
+
        object parameter, string language)
+
      {
+
      return value;
+
      }
+
 
+
  public object ConvertBack(object value, Type targetType,
+
        object parameter, string language)
+
      {
+
      return value;
+
      }
+
  }
+
 
+
 
+
Then you have to declare the converter as a static resource in your page's xaml:
+
 
+
  <phone:PhoneApplicationPage.Resources>
+
      <local:DataBindingDebugConverter x:Key="DatabindingDebugConverter"/>
+
  </phone:PhoneApplicationPage.Resources>
+
 
+
assuming you have declared the local namespace
+
 
+
    xmlns:local="clr-namespace:EncryptionSample"
+
 
+
in the page tag and call it in the data binding statement:
+
  
                    <TextBlock Text="{Binding LineOne, Converter={StaticResource DataBindingDebugConverter}}" TextWrapping="Wrap" Style="{StaticResource
+
The easiest way to do this is to create a custom value converter ([http://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter.aspx IValueConverter]), which will be called when the data from the binding source arrives - before it gets delivered to the control. By setting a breakpoint in the converter you can confirm that the source is sending the expected data and contains the correct properties.
  
PhoneTextExtraLargeStyle}"/>
+
{{Tip|If the converter doesn't get called then this is a sign that the binding has failed earlier than expected, perhaps in the definition of the source property or an incorrect DataContext. If a wrong property name in the binding declaration is given a message in the debug output window of VS appears. }}
  
Next you set a breakpoint in the Convert method and voilà, you can see the values that arrive from binding, if any.
 
  
A sample project is in the works, please call again later...
+
== Steps to do ==
  
 +
First, consider the case where you have a {{Icode|ListBox}} definition in XAML as shown below:
 +
<code xml>
 +
<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
 +
  <ListBox.ItemTemplate>
 +
    <DataTemplate>
 +
      <StackPanel Margin="0,0,0,17" Width="432" Height="78">
 +
        <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
 +
        <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
 +
      </StackPanel>
 +
    </DataTemplate>
 +
  </ListBox.ItemTemplate>
 +
</ListBox>
 +
</code>
  
 +
To implement the converter you first have to derive a class from {{Icode|IValueConverter}} and implement it's methods:
 +
<code csharp>
 +
public class DatabindingDebugConverter : IValueConverter
 +
  {
 +
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
 +
    {
 +
    return value;
 +
    }
  
 +
  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
 +
    {
 +
    return value;
 +
    }
 +
  }
 +
</code>
  
== Summary ==
+
Then you have to declare the converter as a static resource in your page's XAML:
 +
<code xml>
 +
<phone:PhoneApplicationPage.Resources>
 +
  <local:DatabindingDebugConverter x:Key="DatabindingDebugConverter"/>
 +
</phone:PhoneApplicationPage.Resources>
 +
</code>
  
+
You also have to change the XAML data binding statement to call the converter for a particular binding:
''Remove Category:Draft when the page is complete or near complete''
+
<code xml>
 +
<TextBlock Text="{Binding LineOne, Converter={StaticResource DataBindingDebugConverter}}"
 +
    TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
 +
</code>
  
 +
Note that this assumes you have declared the local namespace in the page tag:
 +
<code xml>xmlns:local="clr-namespace:EncryptionSample"</code>
  
''The "platform categories" will be displayed here in '''preview''' only - Copy paste relevant categories into text here''
+
Next you set a breakpoint in the {{Icode|Convert()}} method and voilà, you can see the values that arrive from binding, if any.
  
 +
== Sample code ==
 +
The sample code for the [[How to encrypt your application data in Windows Phone]] article uses this technique. Or you can load the source code directly from [[Media:EncryptionSample.zip|here]].
 
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}}
 
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}}
  
''Add categories below using category selector.''
+
<!-- Translation --> [[zh-hans:如何在Windows Phone手机上调试Data Binding问题]]

Latest revision as of 06:39, 28 June 2013

This article explains how to debug data binding issues by inspecting the elements before they are due to be displayed by the control.

WP Metro Icon File.png
WP Metro Icon Bug.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Compatibility
Platform(s): Windows Phone 7.5
Windows Phone 8
Windows Phone 7.5
Article
Keywords: IValueConverter, data binding, xaml
Created: influencer (12 Oct 2012)
Last edited: hamishwillee (28 Jun 2013)

Contents

[edit] Introduction

Data binding allows you to link a data source defined in code to a UI description in XAML (target). While defining a binding is quite straightforward, if something goes wrong it is useful to be able to tell whether the problem is in your source data or in the binding definition.

The easiest way to do this is to create a custom value converter (IValueConverter), which will be called when the data from the binding source arrives - before it gets delivered to the control. By setting a breakpoint in the converter you can confirm that the source is sending the expected data and contains the correct properties.

Tip.pngTip: If the converter doesn't get called then this is a sign that the binding has failed earlier than expected, perhaps in the definition of the source property or an incorrect DataContext. If a wrong property name in the binding declaration is given a message in the debug output window of VS appears.


[edit] Steps to do

First, consider the case where you have a ListBox definition in XAML as shown below:

<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

To implement the converter you first have to derive a class from IValueConverter and implement it's methods:

public class DatabindingDebugConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return value;
}
 
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return value;
}
}

Then you have to declare the converter as a static resource in your page's XAML:

<phone:PhoneApplicationPage.Resources>
<local:DatabindingDebugConverter x:Key="DatabindingDebugConverter"/>
</phone:PhoneApplicationPage.Resources>

You also have to change the XAML data binding statement to call the converter for a particular binding:

<TextBlock Text="{Binding LineOne, Converter={StaticResource DataBindingDebugConverter}}" 
TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>

Note that this assumes you have declared the local namespace in the page tag:

xmlns:local="clr-namespace:EncryptionSample"

Next you set a breakpoint in the Convert() method and voilà, you can see the values that arrive from binding, if any.

[edit] Sample code

The sample code for the How to encrypt your application data in Windows Phone article uses this technique. Or you can load the source code directly from here.

[edit] Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

This page was last modified on 28 June 2013, at 06:39.
331 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×