{"id":1701,"date":"2012-08-05T15:53:15","date_gmt":"2012-08-05T20:53:15","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/?p=1701"},"modified":"2012-08-05T15:53:15","modified_gmt":"2012-08-05T20:53:15","slug":"windows-8-winrtmetro-missing-updatesourcetrigger","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1701","title":{"rendered":"Windows 8 WinRT\/Metro Missing UpdateSourceTrigger"},"content":{"rendered":"<p>If you\u2019ve done WPF or Silverlight programming, you may have found an occasion where using the Binding property <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.data.binding.updatesourcetrigger(v=vs.110).aspx\" target=\"_blank\">UpdateSourceTrigger<\/a> set to PropertyChanged was extremely useful. (I know I have!)<\/p>\n<p>It may have looked something like this:<\/p>\n<pre class=\"code\"><span style=\"background: white; color: blue\">&lt;<\/span><span style=\"background: white; color: #a31515\">TextBox <\/span><span style=\"background: white; color: red\">Text<\/span><span style=\"background: white; color: blue\">=<\/span><span style=\"background: white; color: black\">&quot;<\/span><span style=\"background: white; color: blue\">{Binding Path=Value, UpdateSourceTrigger=PropertyChanged}<\/span><span style=\"background: white; color: black\">&quot; <\/span><span style=\"background: white; color: blue\">\/&gt;<\/span><\/pre>\n<p>The key feature was the live updating of the property through the binding. For example, as the user typed in the TextBox above, the property <strong>Value<\/strong> in the bound object would have been updated as the user typed. The default behavior in Silverlight 5 and WPF is to use LostFocus: the <strong>Value<\/strong> is only updated when the TextBox loses focus. Sometimes, that\u2019s OK. <\/p>\n<p>In WinRT\/Metro however, this option was completely removed, and no decent replacement was provided unfortunately. In searching for a reasonable work-around, I discovered a few other related missing pieces from WinRT\/XAML:<\/p>\n<ul>\n<li>BindingOptions.<a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.data.bindingoperations.getbinding(v=vs.110).aspx\" target=\"_blank\">GetBinding<\/a>: This allowed the WPF programmer a method for retrieving a Binding object. I was interested in this option as I wanted to clone the original Binding, make it two-way, and attach to the TextChanged event so that a new binding could be updated when the text changed, with the new binding pointing to the same property as the Text property. (My solution uses the basic idea as this).<\/li>\n<li>FrameworkElement.<a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.frameworkelement.getbindingexpression(v=vs.110).aspx\" target=\"_blank\">GetBindingExpression<\/a>: Again, gone. Same basic logic as above. (Probably uses same underlying support that just isn\u2019t there).<\/li>\n<li>XamlWriter.Save: XamlWriter is completely gone. I thought maybe I\u2019d save an instance of the TextBox to Xaml, and create a new one with adjusted bindings from the Xaml. XamlReader does exist.<\/li>\n<\/ul>\n<p>You can start to feel how Xaml really is just a thin wrapper on the Windows 8 run time as you start to look around to see what remains from WPF. Even traditional Silverlight features are gone unfortunately. Maybe Windows 9? <img style=\"border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none\" class=\"wlEmoticon wlEmoticon-smile\" alt=\"Smile\" src=\"http:\/\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/08\/wlEmoticon-smile.png\" \/><\/p>\n<p>So, I took a round-about approach to solving this problem. <\/p>\n<pre class=\"code\"><span style=\"background: white; color: black\"> <\/span><span style=\"background: white; color: blue\">public class <\/span><span style=\"background: white; color: #2b91af\">UpdateSourceHelper <\/span><span style=\"background: white; color: black\">: <\/span><span style=\"background: white; color: #2b91af\">FrameworkElement\n <\/span><span style=\"background: white; color: black\">{\n     <\/span><span style=\"background: white; color: blue\">public static string <\/span><span style=\"background: white; color: black\">GetUpdateSourceText(<\/span><span style=\"background: white; color: #2b91af\">DependencyObject <\/span><span style=\"background: white; color: black\">obj)\n     {\n         <\/span><span style=\"background: white; color: blue\">return <\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: blue\">string<\/span><span style=\"background: white; color: black\">)obj.GetValue(UpdateSourceTextProperty);\n     }\n\n     <\/span><span style=\"background: white; color: blue\">public static void <\/span><span style=\"background: white; color: black\">SetUpdateSourceText(<\/span><span style=\"background: white; color: #2b91af\">DependencyObject <\/span><span style=\"background: white; color: black\">obj, <\/span><span style=\"background: white; color: blue\">string <\/span><span style=\"background: white; color: black\">value)\n     {\n         obj.SetValue(UpdateSourceTextProperty, value);\n     }\n\n     <\/span><span style=\"background: white; color: green\">\/\/ Using a DependencyProperty as the backing store for UpdateSourceText.  This enables animation, styling, binding, etc...\n     <\/span><span style=\"background: white; color: blue\">public static readonly <\/span><span style=\"background: white; color: #2b91af\">DependencyProperty <\/span><span style=\"background: white; color: black\">UpdateSourceTextProperty =\n         <\/span><span style=\"background: white; color: #2b91af\">DependencyProperty<\/span><span style=\"background: white; color: black\">.RegisterAttached(<\/span><span style=\"background: white; color: #a31515\">&quot;UpdateSourceText&quot;<\/span><span style=\"background: white; color: black\">, <\/span><span style=\"background: white; color: blue\">typeof<\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: blue\">string<\/span><span style=\"background: white; color: black\">), <\/span><span style=\"background: white; color: blue\">typeof<\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: #2b91af\">UpdateSourceHelper<\/span><span style=\"background: white; color: black\">), <\/span><span style=\"background: white; color: blue\">new <\/span><span style=\"background: white; color: #2b91af\">PropertyMetadata<\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: #a31515\">&quot;&quot;<\/span><span style=\"background: white; color: black\">));\n     \n     <\/span><span style=\"background: white; color: blue\">public static bool <\/span><span style=\"background: white; color: black\">GetIsEnabled(<\/span><span style=\"background: white; color: #2b91af\">DependencyObject <\/span><span style=\"background: white; color: black\">obj)\n     {\n         <\/span><span style=\"background: white; color: blue\">return <\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: blue\">bool<\/span><span style=\"background: white; color: black\">)obj.GetValue(IsEnabledProperty);\n     }\n\n     <\/span><span style=\"background: white; color: blue\">public static void <\/span><span style=\"background: white; color: black\">SetIsEnabled(<\/span><span style=\"background: white; color: #2b91af\">DependencyObject <\/span><span style=\"background: white; color: black\">obj, <\/span><span style=\"background: white; color: blue\">bool <\/span><span style=\"background: white; color: black\">value)\n     {\n         obj.SetValue(IsEnabledProperty, value);\n     }\n\n     <\/span><span style=\"background: white; color: green\">\/\/ Using a DependencyProperty as the backing store for IsEnabled.  This enables animation, styling, binding, etc...\n     <\/span><span style=\"background: white; color: blue\">public static readonly <\/span><span style=\"background: white; color: #2b91af\">DependencyProperty <\/span><span style=\"background: white; color: black\">IsEnabledProperty =\n         <\/span><span style=\"background: white; color: #2b91af\">DependencyProperty<\/span><span style=\"background: white; color: black\">.RegisterAttached(<\/span><span style=\"background: white; color: #a31515\">&quot;IsEnabled&quot;<\/span><span style=\"background: white; color: black\">, <\/span><span style=\"background: white; color: blue\">typeof<\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: blue\">bool<\/span><span style=\"background: white; color: black\">), <\/span><span style=\"background: white; color: blue\">typeof<\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: #2b91af\">UpdateSourceHelper<\/span><span style=\"background: white; color: black\">), \n             <\/span><span style=\"background: white; color: blue\">new <\/span><span style=\"background: white; color: #2b91af\">PropertyMetadata<\/span><span style=\"background: white; color: black\">(<\/span><span style=\"background: white; color: blue\">false<\/span><span style=\"background: white; color: black\">, \n             <\/span><span style=\"background: white; color: green\">\/\/ property changed\n             <\/span><span style=\"background: white; color: black\">(obj, args)=&gt; \n             {                    \n                 <\/span><span style=\"background: white; color: blue\">if <\/span><span style=\"background: white; color: black\">(obj <\/span><span style=\"background: white; color: blue\">is <\/span><span style=\"background: white; color: #2b91af\">TextBox<\/span><span style=\"background: white; color: black\">)\n                 {\n                     <\/span><span style=\"background: white; color: #2b91af\">TextBox <\/span><span style=\"background: white; color: black\">tb = (<\/span><span style=\"background: white; color: #2b91af\">TextBox<\/span><span style=\"background: white; color: black\">)obj;\n                     <\/span><span style=\"background: white; color: blue\">if <\/span><span style=\"background: white; color: black\">((<\/span><span style=\"background: white; color: blue\">bool<\/span><span style=\"background: white; color: black\">)args.NewValue)\n                     {                                                                                      \n                         tb.TextChanged += AttachedTextBoxTextChanged;\n                     }\n                     <\/span><span style=\"background: white; color: blue\">else\n                     <\/span><span style=\"background: white; color: black\">{\n                         tb.TextChanged -= AttachedTextBoxTextChanged;\n                     }\n                 }\n             }\n         ));\n\n     <\/span><span style=\"background: white; color: blue\">static void <\/span><span style=\"background: white; color: black\">AttachedTextBoxTextChanged(<\/span><span style=\"background: white; color: blue\">object <\/span><span style=\"background: white; color: black\">sender, <\/span><span style=\"background: white; color: #2b91af\">TextChangedEventArgs <\/span><span style=\"background: white; color: black\">e)\n     {\n         <\/span><span style=\"background: white; color: blue\">if <\/span><span style=\"background: white; color: black\">(sender <\/span><span style=\"background: white; color: blue\">is <\/span><span style=\"background: white; color: #2b91af\">TextBox<\/span><span style=\"background: white; color: black\">)\n         {\n             <\/span><span style=\"background: white; color: blue\">var <\/span><span style=\"background: white; color: black\">tb = (<\/span><span style=\"background: white; color: #2b91af\">TextBox<\/span><span style=\"background: white; color: black\">)sender;\n             tb.SetValue(<\/span><span style=\"background: white; color: #2b91af\">UpdateSourceHelper<\/span><span style=\"background: white; color: black\">.UpdateSourceTextProperty, tb.Text);                \n         }\n     }        \n }<\/span><\/pre>\n<p>And here it is in use:<\/p>\n<pre class=\"code\"><span style=\"background: white; color: red\">xmlns<\/span><span style=\"background: white; color: blue\">:<\/span><span style=\"background: white; color: red\">local<\/span><span style=\"background: white; color: blue\">=&quot;using:WiredPrairie.Converter&quot;<\/span><\/pre>\n<p>(The above namespace is needed to provide context to the Xaml parser for the attached properties. Change it to whatever you need).<\/p>\n<pre class=\"code\"><span style=\"background: white; color: blue\">&lt;<\/span><span style=\"background: white; color: #a31515\">TextBox <\/span><span style=\"background: white; color: red\">Height<\/span><span style=\"background: white; color: blue\">=&quot;Auto&quot; <\/span><span style=\"background: white; color: red\">Margin<\/span><span style=\"background: white; color: blue\">=&quot;0,6&quot; <\/span><span style=\"background: white; color: red\">Grid.Row<\/span><span style=\"background: white; color: blue\">=&quot;1&quot; <\/span><span style=\"background: white; color: red\">TextWrapping<\/span><span style=\"background: white; color: blue\">=&quot;Wrap&quot; <\/span><span style=\"background: white; color: red\">TabIndex<\/span><span style=\"background: white; color: blue\">=&quot;0&quot; \n         <\/span><span style=\"background: white; color: red\">Text<\/span><span style=\"background: white; color: blue\">=&quot;{<\/span><span style=\"background: white; color: #a31515\">Binding <\/span><span style=\"background: white; color: red\">Value<\/span><span style=\"background: white; color: blue\">}&quot; \n         <\/span><span style=\"background: white; color: red\">local<\/span><span style=\"background: white; color: blue\">:<\/span><span style=\"background: white; color: red\">UpdateSourceHelper.IsEnabled<\/span><span style=\"background: white; color: blue\">=&quot;True&quot; \n         <\/span><span style=\"background: white; color: red\">local<\/span><span style=\"background: white; color: blue\">:<\/span><span style=\"background: white; color: red\">UpdateSourceHelper.UpdateSourceText<\/span><span style=\"background: white; color: blue\">=&quot;{<\/span><span style=\"background: white; color: #a31515\">Binding <\/span><span style=\"background: white; color: red\">Value<\/span><span style=\"background: white; color: blue\">, <\/span><span style=\"background: white; color: red\">Mode<\/span><span style=\"background: white; color: blue\">=TwoWay}&quot;\/&gt;<\/span><\/pre>\n<p>A classic pattern in WPF for extending built in controls without subclassing was to create an attached behavior. Thankfully, this pattern still works.<\/p>\n<p>The core concept is to attach to the original instance of the TextBox by using an enabling property. In this case, an <a href=\"http:\/\/msdn.microsoft.com\/query\/dev11.query?appId=Dev11IDEF1&amp;l=EN-US&amp;k=k(Windows.UI.Xaml.DependencyProperty.RegisterAttached);k(TargetFrameworkMoniker-.NETCore,Version%3Dv4.5);k(DevLang-csharp)&amp;rd=true\" target=\"_blank\">attached property<\/a>&#160; called IsEnabled is added to the TextBox.<\/p>\n<p>When the value of the IsEnabled property changes from the default of false, the <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows.ui.xaml.propertychangedcallback.aspx\" target=\"_blank\">PropertyChanged<\/a> callback is called. It\u2019s here that the simple magic happens. As long as the attached property is attached to an instance of TextBox, it wires up to the TextChanged event. <\/p>\n<p>In the TextChanged event handler, the value of the attached TextBox (Text property) is set into the second binding\u2019s value. By doing this, it then sets the datasource\u2019s object\u2019s bound property to the new value immediately. <\/p>\n<p>The annoying part about this solution really is the extra binding that is required. As there isn\u2019t a documented\/known API for reading an existing binding, this technique requires that the developer specify the binding <strong><em>twice<\/em><\/strong>. <\/p>\n<p><span style=\"background: white; color: red\">local<\/span><span style=\"background: white; color: blue\">:<\/span><span style=\"background: white; color: red\">UpdateSourceHelper.UpdateSourceText<\/span><span style=\"background: white; color: blue\">=&quot;{<\/span><span style=\"background: white; color: #a31515\">Binding <\/span><span style=\"background: white; color: red\">Value<\/span><span style=\"background: white; color: blue\">, <\/span><span style=\"background: white; color: red\">Mode<\/span><span style=\"background: white; color: blue\">=TwoWay}&quot;<\/span><\/p>\n<p>In WPF, it would have been possible to declare the UpdateSourceText as defaulting to TwoWay binding. But, again, that feature has been removed. Without the TwoWay binding mode, the SetValue call in the TextChanged event handler will not update the object\u2019s bound property. It\u2019s one way.<\/p>\n<p>I looked low and high for a more elegant solution, but couldn\u2019t find one. If you find something better, please leave a comment!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019ve done WPF or Silverlight programming, you may have found an occasion where using the Binding property UpdateSourceTrigger set to PropertyChanged was extremely useful. (I know I have!) It may have looked something like this: &lt;TextBox Text=&quot;{Binding Path=Value, UpdateSourceTrigger=PropertyChanged}&quot; \/&gt; The key feature was the live updating of the property through the binding. For [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[82,96,105],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-rr","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1705,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1705","url_meta":{"origin":1701,"position":0},"title":"WinRT\/Xaml\/AKA Metro DataTemplate selection based on Data Types","date":"August 20, 2012","format":false,"excerpt":"You may have noticed that WinRT does not have automatic resolution of a DataTemplate based on the data type of object added to an ItemsControl. While unfortunate as this behavior is quite handy, it\u2019s not too difficult to replicate the functionality using a DataTemplateSelector. WPF for example, could do something\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":568,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/568","url_meta":{"origin":1701,"position":1},"title":"Data Binding and Tooltips in Silverlight","date":"September 19, 2008","format":false,"excerpt":"Have you ever wanted to databind a tooltip in Silverlight (or WPF for that matter), and found that the DataContext isn't available for tooltips (the datacontext is null)? It's very annoying. Tooltips, unfortunately, aren't connected to their parents in anyway when they're created, so they loose the ability to connect\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":633,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/633","url_meta":{"origin":1701,"position":2},"title":"A Silverlight 2 TilePanel","date":"December 14, 2008","format":false,"excerpt":"You may notice that the Silverlight TileBrush is missing some key properties which would enable it to actually tile a brush. The WPF TileBrush has properties such as TileMode, Viewbox, and ViewportUnits that can be used to tile an image as a fill or as a background for a UIElement.\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2008\/12\/image1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":388,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/388","url_meta":{"origin":1701,"position":3},"title":"Silverlight Weather Demonstration","date":"June 26, 2008","format":false,"excerpt":"Demonstration available here. (You'll need to wait for a moment while it loads the first time). I've created a reasonably simple, yet multi-technology (and discipline) demonstration using Silverlight for the user interface and ASP.NET as the back-end. The demonstration uses: Silverlight 2.0 Data binding Delayed downloading of images \"Web services\"\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2008\/06\/image21.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/266","url_meta":{"origin":1701,"position":4},"title":"WPF Binding Expression Alternatives","date":"May 13, 2008","format":false,"excerpt":"Philipp Sumi creates a custom binding\/markup extension with an example where he's added a \"lookup\" key to the text field. A base class for custom WPF binding markup extensions Nigel Spencer writes some code which allows him to attribute a data class with validation rules such as maximum length. I\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1524,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1524","url_meta":{"origin":1701,"position":5},"title":"Alternative to ApplicationSettings in .NET","date":"February 1, 2012","format":false,"excerpt":"After dealing with lost settings, an unclear upgrade path, and my own confusion surrounding the magic of Settings in a .NET client application, I decided to build my own. You\u2019re probably familiar with this UI in Visual Studio. It hasn\u2019t changed much since it was first created: A list of\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"image","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/02\/image.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1701"}],"collection":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/comments?post=1701"}],"version-history":[{"count":1,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1701\/revisions"}],"predecessor-version":[{"id":1702,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1701\/revisions\/1702"}],"wp:attachment":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/media?parent=1701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/categories?post=1701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/tags?post=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}