{"id":3748,"date":"2020-05-14T08:57:01","date_gmt":"2020-05-14T07:57:01","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=3748"},"modified":"2022-07-25T08:32:08","modified_gmt":"2022-07-25T07:32:08","slug":"c-xaml-nested-and-or-template-bindings","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/c-xaml-nested-and-or-template-bindings\/","title":{"rendered":"C# XAML nested and\/or template bindings"},"content":{"rendered":"\n<ol class=\"wp-block-list\"><li>Add name attribute to the control tag:<ul><li>x:Name=&#8221;variantEditorColumn&#8221;<\/li><\/ul><\/li><li>Set the DataContext attribute of an element to apply the data to all of its children:<ul><li>DataContext=&#8221;{Binding Source={x:Reference variantEditorColumn}}&#8221;&gt;<\/li><\/ul><\/li><li>Add (relative) bindings to the children:<ul><li>ItemsSource=&#8221;{Binding Path=LookupItems1}&#8221;<\/li><\/ul><\/li><li>Add absolute bindings to non-children<ul><li>ItemsSource=&#8221;{Binding Path=LookupItems1,Source={x:Reference variantEditorColumn}}&#8221;<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"xml\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">&lt;dxg:GridColumn x:Class=\"QuotationOrderHandling.Views.Controls.VariantEditorGridColumn\"\n             xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n             xmlns:dxg=\"http:\/\/schemas.devexpress.com\/winfx\/2008\/xaml\/grid\"\n                xmlns:controls=\"clr-namespace:QuotationOrderHandling.Views.Controls\"\n                x:Name=\"variantEditorColumn\"\n                >\n    &lt;dxg:GridColumn.Resources>\n        &lt;controls:DebugDummyConverter x:Key=\"debugDummyConverter\" \/>\n    &lt;\/dxg:GridColumn.Resources>\n    &lt;dxg:GridColumn.CellDisplayTemplate>\n        &lt;DataTemplate>\n            &lt;Label Content=\"{Binding Path=Row,ConverterParameter={x:Reference variantEditorColumn},Converter={StaticResource debugDummyConverter}}\">&lt;\/Label>\n        &lt;\/DataTemplate>\n    &lt;\/dxg:GridColumn.CellDisplayTemplate>\n    &lt;dxg:GridColumn.CellEditTemplate>\n        &lt;DataTemplate>\n            &lt;StackPanel Orientation=\"Vertical\">\n                &lt;Label Content=\"{Binding Path=Row,ConverterParameter={x:Reference variantEditorColumn},Converter={StaticResource debugDummyConverter}}\">&lt;\/Label>\n                &lt;Popup Placement=\"Bottom\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Top\" Width=\"250\" Height=\"120\" IsOpen=\"True\">\n                    &lt;Border BorderBrush=\"DarkGray\" BorderThickness=\"1\" Width=\"Auto\" Height=\"Auto\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Top\" >\n                        &lt;DockPanel Background=\"WhiteSmoke\" Width=\"250\" Height=\"200\">\n                            &lt;StackPanel Orientation=\"Vertical\" Margin=\"10\" DataContext=\"{Binding Source={x:Reference variantEditorColumn}}\">\n                                &lt;Label Content=\"{Binding Path=Variant1Name}\">&lt;\/Label>\n                                &lt;dxg:LookUpEdit x:Name=\"lookupEdit1\" ItemsSource=\"{Binding Path=LookupItems1}\" ValueMember=\"KeyStr\" DisplayMember=\"KeyName\" AutoPopulateColumns=\"False\" EditValue=\"{Binding Variant1, Mode=TwoWay}\" EditValueChanged=\"lookupEdit1_EditValueChanged\" PopupWidth=\"580\">\n                                    &lt;dxg:LookUpEdit.StyleSettings>\n                                        &lt;dxg:SearchLookUpEditStyleSettings AllowGrouping=\"False\" \/>\n                                    &lt;\/dxg:LookUpEdit.StyleSettings>\n                                    &lt;dxg:LookUpEdit.PopupContentTemplate>\n                                        &lt;ControlTemplate>\n                                            &lt;dxg:GridControl Name=\"PART_GridControl\">\n                                                &lt;dxg:GridControl.Columns>\n                                                    &lt;dxg:GridColumn FieldName=\"KeyStr\" Header=\"Sleutel\" Width=\"150\" \/>\n                                                    &lt;dxg:GridColumn FieldName=\"KeyName\" Header=\"Omschrijving\"  Width=\"380\" \/>\n                                                &lt;\/dxg:GridControl.Columns>\n                                                &lt;dxg:GridControl.View>\n                                                    &lt;dxg:TableView AutoWidth=\"False\" SearchPanelHighlightResults=\"True\" SearchDelay=\"50\" x:Name=\"CurrentTableView\"\/>\n                                                &lt;\/dxg:GridControl.View>\n                                            &lt;\/dxg:GridControl>\n                                        &lt;\/ControlTemplate>\n                                    &lt;\/dxg:LookUpEdit.PopupContentTemplate>\n                                &lt;\/dxg:LookUpEdit>\n\n                                &lt;Label Content=\"{Binding Path=Variant2Name}\">&lt;\/Label>\n                                &lt;dxg:LookUpEdit x:Name=\"lookupEdit2\" ItemsSource=\"{Binding Path=LookupItems2}\" ValueMember=\"KeyStr\" DisplayMember=\"KeyName\" AutoPopulateColumns=\"False\" EditValue=\"{Binding Variant2, Mode=TwoWay}\" EditValueChanged=\"lookupEdit2_EditValueChanged\"  PopupWidth=\"580\">\n                                    &lt;dxg:LookUpEdit.StyleSettings>\n                                        &lt;dxg:SearchLookUpEditStyleSettings AllowGrouping=\"False\" \/>\n                                    &lt;\/dxg:LookUpEdit.StyleSettings>\n                                    &lt;dxg:LookUpEdit.PopupContentTemplate>\n                                        &lt;ControlTemplate>\n                                            &lt;dxg:GridControl Name=\"PART_GridControl\">\n                                                &lt;dxg:GridControl.Columns>\n                                                    &lt;dxg:GridColumn FieldName=\"KeyStr\" Header=\"Sleutel\" Width=\"150\" \/>\n                                                    &lt;dxg:GridColumn FieldName=\"KeyName\" Header=\"Omschrijving\"  Width=\"380\" \/>\n                                                &lt;\/dxg:GridControl.Columns>\n                                                &lt;dxg:GridControl.View>\n                                                    &lt;dxg:TableView AutoWidth=\"False\" SearchPanelHighlightResults=\"True\" SearchDelay=\"50\" x:Name=\"CurrentTableView\"\/>\n                                                &lt;\/dxg:GridControl.View>\n                                            &lt;\/dxg:GridControl>\n                                        &lt;\/ControlTemplate>\n                                    &lt;\/dxg:LookUpEdit.PopupContentTemplate>\n                                &lt;\/dxg:LookUpEdit>\n                            &lt;\/StackPanel>\n                        &lt;\/DockPanel>\n                    &lt;\/Border>\n                &lt;\/Popup>\n            &lt;\/StackPanel>\n        &lt;\/DataTemplate>\n    &lt;\/dxg:GridColumn.CellEditTemplate>\n&lt;\/dxg:GridColumn>\n<\/pre><\/div>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"xml\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">Other binding types:\n{Binding ElementName=variantEditorColumn,Path=LookupItems1,Converter={StaticResource debugDummyConverter}}\n{Binding Path=LookupItems1, RelativeSource={RelativeSource Self}}\n{Binding Path=LookupItems1, RelativeSource={RelativeSource TemplatedParent}}\n{Binding Path=LookupItems1, RelativeSource={RelativeSource AncestorType={x:Type typeOfAncestor}}\n{Binding Path=DataContext.LookupItems1,RelativeSource={RelativeSource AncestorType={x:Type GridColumn}}}<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Debug bindings<\/h2>\n\n\n\n<p>Create the class below, and register it as above. The debugger will break with the value parameter to the resolved binding.<\/p>\n\n\n\n<p>Source: <a href=\"https:\/\/www.wpf-tutorial.com\/data-binding\/debugging\/\">https:\/\/www.wpf-tutorial.com\/data-binding\/debugging\/<\/a><\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"csharp\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">public class DebugDummyConverter : IValueConverter\n{\n\tpublic object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)\n\t{\n\t\tDebugger.Break();\n\t\treturn value;\n\t}\n\n\tpublic object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)\n\t{\n\t\tDebugger.Break();\n\t\treturn value;\n\t}\n}<\/pre><\/div>\n\n\n\n<p>Relative bindings in template:<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"php\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">&lt;localPage:CorasauDataGridForeignKeyColumnClient x:Name=\"colVariant1\" FieldName=\"Variant1\" Visible=\"False\">\n    &lt;localPage:CorasauDataGridForeignKeyColumnClient.DisplayTemplate>\n        &lt;ControlTemplate>\n            &lt;TextBlock Margin=\"2\" VerticalAlignment=\"Center\" Text=\"{Binding DataContext.RowData.Row.Variant1,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}\" \/>\n        &lt;\/ControlTemplate>\n    &lt;\/localPage:CorasauDataGridForeignKeyColumnClient.DisplayTemplate>\n    &lt;localPage:CorasauDataGridForeignKeyColumnClient.CellTemplate>\n        &lt;DataTemplate>\n            &lt;localPage:CorasauGridLookupEditorClient  x:Name=\"PART_Editor\"  HasCustomLookUp=\"True\" GotFocus=\"variant1_GotFocus\" ItemsSource=\"{Binding DataContext.RowData.Row.Variant1Source,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent}}\"\/>\n        &lt;\/DataTemplate>\n    &lt;\/localPage:CorasauDataGridForeignKeyColumnClient.CellTemplate>\n&lt;\/localPage:CorasauDataGridForeignKeyColumnClient><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Add name attribute to the control tag: x:Name=&#8221;variantEditorColumn&#8221; Set the DataContext attribute of an element to apply the data to all of its children: DataContext=&#8221;{Binding Source={x:Reference variantEditorColumn}}&#8221;&gt; Add (relative) bindings to the children: ItemsSource=&#8221;{Binding Path=LookupItems1}&#8221; Add absolute bindings to non-children ItemsSource=&#8221;{Binding Path=LookupItems1,Source={x:Reference variantEditorColumn}}&#8221; Debug bindings Create the class below, and register it as above. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[6,4,1],"tags":[],"class_list":["post-3748","post","type-post","status-publish","format-standard","hentry","category-dotnet","category-programming","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/3748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=3748"}],"version-history":[{"count":7,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/3748\/revisions"}],"predecessor-version":[{"id":5932,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/3748\/revisions\/5932"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=3748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=3748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=3748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}