{"id":25911,"date":"2022-10-23T18:06:25","date_gmt":"2022-10-23T17:06:25","guid":{"rendered":"https:\/\/ekiwi-blog.de\/?p=25911"},"modified":"2022-10-23T18:06:54","modified_gmt":"2022-10-23T17:06:54","slug":"binding-multiple-properties-with-xaml-c","status":"publish","type":"post","link":"https:\/\/ekiwi-blog.de\/en\/25911\/binding-multiple-properties-with-xaml-c\/","title":{"rendered":"Binding multiple properties with XAML\/C#"},"content":{"rendered":"<p>If you are programming with Visual Studio and creating <abbr title=\"Windows Presentation Foundation\">WPF<\/abbr> projects, you will often use Bindings within you <abbr title=\"Extensible Application Markup Language\">xaml<\/abbr>-files to a property e.g. within viewmodel. Bindings are very practically but sometime also frustrating and cumbersome if you have a special use case or some run time errors.<\/p>\n<p>One special case is if you like to bind several properties to one element. For that case you can use <strong>Multibindings<\/strong>.<\/p>\n<p>In the following example we show you how to bind multiple properties to one element or element properties.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of content<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi-blog.de\/en\/25911\/binding-multiple-properties-with-xaml-c\/#Example\" >Example<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi-blog.de\/en\/25911\/binding-multiple-properties-with-xaml-c\/#Viewmodel_%E2%80%93_Properties\" >Viewmodel &#8211; Properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi-blog.de\/en\/25911\/binding-multiple-properties-with-xaml-c\/#XAML-file_use_MultiBinding\" >XAML-file: use MultiBinding<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi-blog.de\/en\/25911\/binding-multiple-properties-with-xaml-c\/#Create_suitable_converter_class_inherited_from_IMultiValueConverter\" >Create suitable converter class inherited from IMultiValueConverter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi-blog.de\/en\/25911\/binding-multiple-properties-with-xaml-c\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Example\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In that example a textbox should be enabled depending from the status of to checkboxes and depending from a GridView. The textbox should be enabled if the GridView has at least on item or if one of the both checkboxes is checked. In that example a viewmodel (<abbr title=\"Model-View-Viewmodel\"><a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93viewmodel\" target=\"_blank\" rel=\"noopener\">MVVM<\/a><\/abbr>) is used.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Viewmodel_%E2%80%93_Properties\"><\/span>Viewmodel &#8211; Properties<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Each of the both checkboxes from our example are bound to a <em>bool<\/em> value. And the GridView items are binded to an <em>ObservableCollection<\/em>.<\/p>\n<pre><code><span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #33cccc;\">ObservableCollection<\/span>&lt;<span style=\"color: #33cccc;\">MyObject<\/span>&gt; MyGridViewItems\r\n{\r\n    <span style=\"color: #0000ff;\">get<\/span> =&gt; _mygridviewitems;\r\n    <span style=\"color: #0000ff;\">set<\/span> =&gt; <span style=\"color: #993366;\">Set<\/span>(() =&gt; MyGridViewItems, <span style=\"color: #0000ff;\">ref<\/span> _mygridviewitems, <span style=\"color: #0000ff;\">value<\/span>);\r\n}\r\n<span style=\"color: #0000ff;\">public bool<\/span> MyCheckbox1\r\n{\r\n    <span style=\"color: #0000ff;\">get<\/span> =&gt; _mycheckbox1;\r\n    <span style=\"color: #0000ff;\">set<\/span> =&gt; <span style=\"color: #993366;\">Set<\/span>(() =&gt; CheckWeekMo, <span style=\"color: #0000ff;\">ref<\/span> _checkWeekMo, <span style=\"color: #0000ff;\">value<\/span>);\r\n}\r\n<span style=\"color: #0000ff;\">public bool<\/span> MyCheckbox2\r\n{\r\n    <span style=\"color: #0000ff;\">get<\/span> =&gt; _mycheckbox2;\r\n    <span style=\"color: #0000ff;\">set<\/span> =&gt; <span style=\"color: #993366;\">Set<\/span>(() =&gt; CheckWeekTue, <span style=\"color: #0000ff;\">ref<\/span> _checkWeekTue, <span style=\"color: #0000ff;\">value<\/span>);\r\n}<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"XAML-file_use_MultiBinding\"><\/span>XAML-file: use MultiBinding<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>That means for our example we must bind to the property &#8220;<em>IsEnabled<\/em>&#8221; of the textbox these three Properties. And since it depends from at least one item in GridView, we must use the <em>MyGridViewItems.Count<\/em> property for the binding.<\/p>\n<pre><code><span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">TextBox <\/span><span style=\"color: #ff0000;\">x<span style=\"color: #0000ff;\">:<\/span>Name<\/span><span style=\"color: #0000ff;\">=\"MyTextBox\"<\/span> <span style=\"color: #ff0000;\">Text<\/span><span style=\"color: #0000ff;\">=\"{<\/span><span style=\"color: #800000;\">Binding<\/span> <span style=\"color: #ff0000;\">MyTextProperty<\/span><span style=\"color: #0000ff;\">}\"<\/span><span style=\"color: #0000ff;\">&gt;<\/span>\r\n    <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">TextBox.IsEnabled<\/span><span style=\"color: #0000ff;\">&gt;<\/span>\r\n        <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">MultiBinding<\/span> <span style=\"color: #ff0000;\">Converter<\/span><span style=\"color: #0000ff;\">=\"{<\/span><span style=\"color: #800000;\">StaticResource<\/span> <span style=\"color: #ff0000;\">MyMultiPropConverter<\/span><span style=\"color: #0000ff;\">}\"&gt;<\/span>\r\n            <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">Binding<\/span> <span style=\"color: #ff0000;\">Path<\/span><span style=\"color: #0000ff;\">=\"MyGridViewItems.Count\"\/&gt;<\/span>\r\n            &lt;<span style=\"color: #800000;\">Binding<\/span> <span style=\"color: #ff0000;\">Path<\/span><span style=\"color: #0000ff;\">=\"MyCheckbox1\"\/&gt;<\/span>\r\n            &lt;<span style=\"color: #800000;\">Binding<\/span> <span style=\"color: #ff0000;\">Path<\/span><span style=\"color: #0000ff;\">=\"MyCheckbox2\"\/&gt;<\/span>\r\n        <span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">MultiBinding<\/span><span style=\"color: #0000ff;\">&gt;<\/span>\r\n    <span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">TextBox.IsEnabled<\/span><span style=\"color: #0000ff;\">&gt;<\/span>\r\n<span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">TextBox<\/span><span style=\"color: #0000ff;\">&gt;\r\n<\/span><\/code><\/pre>\n<p>As you can see to handle these three property bindings we need a <strong>Converter<\/strong>. For that declare the Converter within the Resources.<\/p>\n<pre><code><span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #993300;\">Window.Resources<\/span><span style=\"color: #0000ff;\">&gt;<\/span>\r\n    &lt;<span style=\"color: #993300;\">local<span style=\"color: #0000ff;\">:<\/span>MyMultiPropConverter <\/span><span style=\"color: #ff0000;\">x<\/span><span style=\"color: #0000ff;\">:<\/span><span style=\"color: #ff0000;\">Key<\/span><span style=\"color: #0000ff;\">=\"MyMultiPropConverter\"\/&gt;<\/span>\r\n<span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #993300;\">\/Window.Resources<\/span><span style=\"color: #0000ff;\">&gt;\r\n<\/span><\/code><\/pre>\n<p>Don&#8217;t forget to define the namespace (here: <em>local<\/em>) in your xaml file.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Create_suitable_converter_class_inherited_from_IMultiValueConverter\"><\/span>Create suitable converter class inherited from IMultiValueConverter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we must create a suitable converter class. The converter class inherited from IMultiValueConverter and implements <em>Convert<\/em> and <em>ConvertBack<\/em> methods.<\/p>\n<pre><code><span style=\"color: #0000ff;\">public class<\/span> <span style=\"color: #008080;\">MyMultiPropConverter: IMultiValueConverter<\/span>\r\n{\r\n    <span style=\"color: #0000ff;\">public object<\/span> <span style=\"color: #993300;\">Convert<\/span>(<span style=\"color: #0000ff;\">object<\/span>[] values, <span style=\"color: #008080;\">Type<\/span> targetType, <span style=\"color: #0000ff;\">object<\/span> parameter, <span style=\"color: #008080;\">CultureInfo<\/span> culture)\r\n    {\r\n        <span style=\"color: #0000ff;\">int<\/span> count = (<span style=\"color: #0000ff;\">int<\/span>)values[0];\r\n        <span style=\"color: #0000ff;\">bool<\/span> check1 = (<span style=\"color: #0000ff;\">bool<\/span>)values[1];\r\n        <span style=\"color: #0000ff;\">bool<\/span> check2 = (<span style=\"color: #0000ff;\">bool<\/span>)values[2];\r\n        <span style=\"color: #800080;\">if<\/span> ((count &gt; 0) || check1 || check2)\r\n        {\r\n            <span style=\"color: #800080;\">return <\/span><span style=\"color: #0000ff;\">true<\/span>;\r\n        }\r\n        <span style=\"color: #800080;\">else<\/span>\r\n        {\r\n                <span style=\"color: #800080;\">return <\/span><span style=\"color: #0000ff;\">false<\/span>;\r\n        }\r\n    }\r\n\r\n    <span style=\"color: #0000ff;\">public object<\/span>[] <span style=\"color: #993300;\">ConvertBack<\/span>(<span style=\"color: #0000ff;\">object<\/span> value, <span style=\"color: #008080;\">Type<\/span>[] targetTypes, <span style=\"color: #0000ff;\">object<\/span> parameter, <span style=\"color: #008080;\">CultureInfo<\/span> culture)\r\n    {\r\n        <span style=\"color: #800080;\">return <\/span>null;\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>As you can see the bound properties are represented with an object-array. It is important to pay attention to the order of the items in that array when casting the values to the correct datatype. It has exactly the same order as we have defined above within the xaml-file.<\/p>\n<p>In our example the binding of &#8220;<em>IsEnabled<\/em>&#8221; is a one-way binding. For that reasons we don&#8217;t really need the <em>ConvertBack<\/em> method.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we are able to bind several properties to another. And we are free to program any logic and combination of these various properties within a converter class.<\/p>","protected":false},"excerpt":{"rendered":"<p>If you are programming with Visual Studio and creating WPF projects, you will often use Bindings within you xaml-files to<\/p>\n","protected":false},"author":2,"featured_media":24371,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1555],"tags":[2372,2374,1743,2252,2251,1700,1745,2373],"class_list":["post-25911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-en","tag-app-en","tag-binding-en","tag-c-en","tag-code-en","tag-coding-en","tag-programming","tag-visual-studio-en","tag-xaml-en"],"_links":{"self":[{"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/posts\/25911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/comments?post=25911"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/posts\/25911\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/media\/24371"}],"wp:attachment":[{"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/media?parent=25911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/categories?post=25911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi-blog.de\/en\/wp-json\/wp\/v2\/tags?post=25911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}