{"id":8166,"date":"2014-03-24T18:53:54","date_gmt":"2014-03-24T17:53:54","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/?p=8166"},"modified":"2014-03-24T18:53:54","modified_gmt":"2014-03-24T17:53:54","slug":"entering-microsofts-xaml-labyrinth-is-it-worth-it","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/8166-entering-microsofts-xaml-labyrinth-is-it-worth-it.html","title":{"rendered":"Entering Microsoft\u2019s XAML labyrinth: is it worth it?"},"content":{"rendered":"<p>I spent some time at the weekend working on a Bridge game for the Windows Store. I am writing it in XAML and C#. The UI is hardly demanding, given that Bridge is a card game, but it has made me take a fresh look at XAML, the markup language for a Windows Store App user interface (unless you use HTML and JavaScript). XAML is also used in Windows Presentation Foundation and in Silverlight\/Windows Phone.<\/p>\n<p>As part of the game, the user selects a \u201cbid\u201d which consists of a number from 1 to 7 and a suit of cards (or double, redouble or pass). Most bridge games show this as a grid though functionally it is like a combo-box (choosing from a pre-defined range of options).<\/p>\n<p>Naturally I looked for the easiest way to accomplish this. The solution I came up with was to nest TextBlock controls in Border controls in Grid cells. Then I wrote C# code that detects which cell the user taps and updates the background of the selected Border accordingly.<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/04\/image25.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/04\/image_thumb24.png\" width=\"404\" height=\"147\" \/><\/a><\/p>\n<p>I have in mind to replace the text with graphics and make the numbers a bit smarter at some future date. My solution works fine; here it is at runtime:<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/04\/image26.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/04\/image_thumb25.png\" width=\"404\" height=\"132\" \/><\/a><\/p>\n<p>At the weekend I happened to be chatting with a developer more expert in XAML than myself, who told me I had done it wrong. In XAML everything should be in Style definitions. I should use a ListView and design it in Blend.<\/p>\n<p>Well, I knew that I had somewhat subverted how XAML is meant to work, so I sat down to investigate this different approach. A ListView looks nothing like what I want out of the box.<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image10.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image_thumb10.png\" width=\"184\" height=\"244\" \/><\/a><\/p>\n<p>However, with the magic of XAML it can be transformed. I made the ListView horizontal by defining an ItemsPanelTemplate in Application.Resources:<\/p>\n<blockquote>\n<p>&lt;ItemsPanelTemplate x:Key=&quot;ItemsPanelTemplate1&quot;&gt;      <br \/>&#160; &lt;StackPanel Orientation=&quot;Horizontal&quot;\/&gt;       <br \/>&lt;\/ItemsPanelTemplate&gt;<\/p>\n<\/blockquote>\n<p>and adding&#160; <\/p>\n<blockquote>\n<p>ItemsPanel=&quot;{StaticResource ItemsPanelTemplate1} <\/p>\n<\/blockquote>\n<p>as an attribute of the ListView.<\/p>\n<p>Then I added an ItemTemplate to draw the kind of block that I wanted:<\/p>\n<blockquote>\n<p>&lt;ListView.ItemTemplate&gt;      <br \/>&#160;&#160;&#160; &lt;DataTemplate&gt;       <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Border BorderThickness=&quot;1&quot; Height=&quot;130&quot; Width=&quot;130&quot; BorderBrush=&quot;Black&quot;&gt;       <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;TextBlock FontSize=&quot;24&quot; FontWeight=&quot;Bold&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot;       <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Text=&quot;{Binding Name}&quot; Foreground=&quot;Black&quot; \/&gt;       <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;\/Border&gt;       <br \/>&#160;&#160;&#160; &lt;\/DataTemplate&gt;       <br \/>&lt;\/ListView.ItemTemplate&gt;       <\/p>\n<\/blockquote>\n<p>Note that I am using a DataTemplate because the ListView is bound to an ObservableCollection in the proper XAML way.<\/p>\n<p>At this point I am close to what I want \u2013 never mind that the numbers are missing, they can easily be added with a second ListView:<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image11.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image_thumb11.png\" width=\"404\" height=\"87\" \/><\/a><\/p>\n<p>However I do not want that little tick mark appearing, the selected background colour is not to my taste, and the spacing of the items is wrong. How do I fix that?<\/p>\n<p>My search led me to <a href=\"http:\/\/stackoverflow.com\/questions\/14987745\/listview-selection-display-with-no-padding-and-no-checkmark\" target=\"_blank\">this post<\/a> which explains a far-from-obvious series of steps you can take in Blend. The steps did not quite work for me but got me on track to create a new Style resource which I called <strong>ListViewItemStyleNoGlyph<\/strong> and which lets me adjust the margin and also a previously hidden property called <strong>SelectionCheckMarkVisualEnabled. <\/strong>Blend generated a substantial block of code for this:<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image12.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image_thumb12.png\" width=\"404\" height=\"281\" \/><\/a><\/p>\n<p>This has helped and now my ListView looks like this:<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image13.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2014\/03\/image_thumb13.png\" width=\"404\" height=\"94\" \/><\/a><\/p>\n<p>Well, it is nearly there and I can see that with a bit more effort I can get what I want. Even so, I am beginning to wonder whether my initial approach, in which I understood all the code, had advantages over this exploration into the labyrinth.<\/p>\n<p>Is XAML well loved out there? I came across <a href=\"http:\/\/paulstovell.com\/blog\/six-years-of-wpf\" target=\"_blank\">this post<\/a> by Paul Stovell from a couple of years back which seems relevant. \u201cI&#8217;ve lived and breathed the technology for the last six years\u201d, he says, but writes:<\/p>\n<blockquote>\n<p>What&#8217;s disappointing is that WPF started out quite positively during its time. Concepts like dependency properties, styles, templates, and the focus on data binding felt quite revolutionary when Avalon was announced. <\/p>\n<p>Sadly, these good ideas, when put into practice, didn&#8217;t have great implementations. Dependency properties are terribly verbose, and could have done with some decent language support. Styles and templates were also verbose, and far more limited than CSS (when WPF shipped I imagined there would be a thousand websites offering high quality WPF themes, just like there are for HTML themes; but there aren&#8217;t, because it is hard). <\/p>\n<p>Data binding in WPF generally Just Works, except when it doesn&#8217;t. Implementing <code>INotifyPropertyChanged<\/code> still takes <em>way<\/em> too much code. Data context is a great concept, except it totally breaks when dealing with items like <code>ContextMenus<\/code>. <code>ICommand<\/code> was built to serve two masters; the WPF team who favored routed commands, and the Blend team who favored the command pattern, and ended up being a bad implementation for both. <\/p>\n<\/blockquote>\n<p>Stovell mentions the verbosity of XAML, and that it is hard, both of which sound right to me. He contrasts the way ASP.NET has evolved, with ASP.NET MVC a great improvement on web forms. Read the full post for more detail.<\/p>\n<p>It seems to me that XAML does offer much that is wonderful: flexibility, capability, and the ability to separate presentation from data. At the same time, neither XAML nor Blend are intuitive tools for developers; they may make more sense to designers, but it seems to me that removing a tick mark from a ListViewItem should be more straightforward. Perhaps it is, in which case there is a failure of documentation or tooling rather than functionality, but it makes little difference to the developer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I spent some time at the weekend working on a Bridge game for the Windows Store. I am writing it in XAML and C#. The UI is hardly demanding, given that Bridge is a card game, but it has made me take a fresh look at XAML, the markup language for a Windows Store App &hellip; <a href=\"https:\/\/www.itwriting.com\/blog\/8166-entering-microsofts-xaml-labyrinth-is-it-worth-it.html\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Entering Microsoft\u2019s XAML labyrinth: is it worth it?<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,55,80,94,97],"tags":[586,996,999,1045],"class_list":["post-8166","post","type-post","status-publish","format-standard","hentry","category-net","category-microsoft","category-software-development","category-visual-studio","category-windows","tag-microsoft","tag-windows","tag-windows-8","tag-xaml"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/8166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=8166"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/8166\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=8166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=8166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=8166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}