Microsoft Technology Summit 22nd October, 2013 Warsaw

       I wanted to post a short summary of the Polish MTS and my experience of it since just after the MTS. Finally found some time to go through the lectures again and do a small write-up. I've heard several bad reviews of the previous events in Warsaw, about how they were nothing more than a marketing event and how badly planned they were. I was going to see the event with slightly mixed feeling but also a wanting to see it all by myself. Contrary to what I heard earlier the event was really interesting and I enjoyed nearly all sessions I selected for myself.

The lectures:

- Async in practice by Jakub Binkowski
   I've seen several lectures on this topic and I was wondering whether I can get anything more from seeing        another one. The lecture was really good and focused on mistakes often made in multi-threaded                    programming using async and await and how difficult they are to diagnose.

- Adventures in the underland: what passwords do when no one is watching by Paula Januszkiewicz
   Very entertaining session, Paula speaks with passion and great fluency, adds a bit of humour to every            topic. I haven't seen a better Polish speaker yet. The session touched on different ways of grabbing a            password off of unsuspecting users. Although some of it seemed to be added just to wow the audiance.

- What's New in Visual Studio 2013 for Application Lifecycle Management by Brian Keller
   I didn't read, listen or watch much on VS 2013 earlier, so this was definitely an interesting session for me.      It was about the project and task management mechanisms added to VS. I really liked how you could          connect and synchronize your tasks with lines of code, and do your code reviews - facebook style.                Practically it's like adding a little jira / trello to your source code. These were just some of the many                features presented.

 - Modular Javascript Typescript code by Maciej Grzyb
   A really informative session about using type script for creating more maintainable javascript code by            introducing namespaces. I wanted to take a look at either typescript or coffeescript for some time already,    but could never find the time to. This was a very good introductory session for me despite it focusing on        namespaces.

 - Entity Framework 6 - open access for all by Piotr Bubacz
   Quite a typica tech walkthrough, with some of the hurdles of older EF versions finally resolved.

Overall it was a pretty good conference. I'm still hoping though one day we will have a conference of the NDC caliber in Poland.

Adding Drag and drop behaviour to ItemsControls Part 2

     It's been some time since I last posted something, and the drag and drop behaviour tutorial completion was sitting all this time on a back burner. It is high time to finish it. I'd like to start with a slight refactoring of the code I posted previously for IsDropSource property change callbacks, and another piece of code for IsDragTarget property change callback.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

// Adds passed ItemsControl to the drag sources collecton private static void IsDragSourceUpdated(DependencyObject dp, DependencyPropertyChangedEventArgs args) { var isDragSourceEnabled = (bool)args.NewValue; var dragSource = dp as ItemsControl; if (isDragSourceEnabled) { Add(dragSources, dragSource); dragSource.PreviewMouseMove += OnMouseMove; dragSource.PreviewMouseLeftButtonDown += OnLeftButtonDown; } else { Remove(dragSources, dragSource); dragSource.PreviewMouseMove -= OnMouseMove; dragSource.PreviewMouseLeftButtonDown -= OnLeftButtonDown; } } // Adds passed ItemsControl to the drop targets collection private static void IsDropTargetUpdated(DependencyObject dp, DependencyPropertyChangedEventArgs args) { var isDropTargetEnabled = (bool)args.NewValue; var dropTarget = dp as ItemsControl; dropTarget.AllowDrop = isDropTargetEnabled; if (isDropTargetEnabled) { Add(dropTargets, dropTarget); dropTarget.Drop += Drop; } else { Remove(dropTargets, dropTarget); dropTarget.Drop -= Drop; } }

The code initializes the ItemsControl adorned with those properties in xaml as a new drag source or drop target. For that to be possible it adds the control to particular collections and adds required events. Beside the obvious mouse move and drop events we need to remember about servicing the Loaded and Unloaded events to add or remove the control from the drag and drop when the View is being either opened or closed.
Part of the above execution is further contained in following Add and Remove methods:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// Adds item control to a group // (this item control will only be allowed to participate in d&d in this particular gorup) private static void Add(Dictionary<String, List<ItemsControl>> dictionary, object sender) { InitializeDragDropCollections(); var dp = sender as DependencyObject; var itemsControl = sender as ItemsControl; var groupName = GetGroupName(dp); var foundGroup = dictionary.FirstOrDefault(p => p.Key == groupName); if (!foundGroup.Value.Contains(itemsControl)) dictionary[groupName].Add(itemsControl); itemsControl.Unloaded += dropTarget_Unloaded; itemsControl.Loaded += dropTarget_Loaded; } // Removes item control from group private static void Remove(Dictionary<String, List<ItemsControl>> dictionary, object sender) { var dp = sender as DependencyObject; var itemsControl = sender as ItemsControl; var groupName = GetGroupName(dp); var foundGroup = dictionary.FirstOrDefault(p => p.Key == groupName); if (foundGroup.Value.Contains(itemsControl)) dictionary[groupName].Remove(itemsControl); itemsControl.Unloaded -= dropTarget_Unloaded; itemsControl.Loaded -= dropTarget_Loaded; }

       We make sure both collections are initialized and an empty "global" drag and drop group is added to both by using the InitializeDragDropCollections method:'s

1 2 3 4 5 6 7 8 9 10 11 12 13

// Intizialize drag drop collections private static void InitializeDragDropCollections() { if (dragSources == null) dragSources = new Dictionary<string, List<ItemsControl>>(); if (dropTargets == null) dropTargets = new Dictionary<string, List<ItemsControl>>(); if(!dragSources.Any(p => p.Key == "")) dragSources.Add("", new List<ItemsControl>()); if (!dropTargets.Any(p => p.Key == "")) dropTargets.Add("", new List<ItemsControl>()); }

That's it for now, I'll finish the tutorial quite soon by adding the rest of events and methods. Along with the link to the whole class.

Norwegian Developers Conference review part2

The second part of the ndc reviews, which I should definitely hurry with because of the approaching NDC London, which will surely bring another batch of brilliant presentations...

Dan North: Patterns of Effective Teams
Main topics of this lecture were pair programming, teaming up people of different skill level, scrum stand-ups, code reviews/critique and hack days. The general agile food for though you can expect from Dan North focused on building a team and working in a team. I really like all of his ideas and hints, though some of them feel a tad bit too idealistic.

Robert C. Martin: Principles of Component Design.
Another show by Uncle Bob, going through historical beginnings of modular design and dividing code into separate libraries. Through dependency and coupling, up to inversion of control and programming against abstractions.


Michael Heydt: Concurrent and High-Performance Programming in .NET with TPL, async/await, and Dataflow
I had high hopes for this presentation due to the trading app that was used as a showcase of different parallel code execution techniques - which would go along with mine line of work. Unfortunately I think that the presenter wanted to touch too many subjects at once, briefly going through a little bit of everything not having enough time for a more thorough description. It also seemed that he had problems with conveying some of the thoughs, which made some sentences unclear at first. Another thing is that NDC did not post the whole recording which is a real shame, because despite of some minor slip ups it was an interesting lecture.

Adding Drag and drop behaviour to ItemsControls Part 1

        Because drag and drop in WPF can be quite tricky I though I'm gonna share my implementation (based on other implementations I found online) of it. What I had in mind when I wrote it, was ease of use, especially the xaml side of things.

        This implementation should work with all ItemsControl derived controls (like ListBox or DataGrid). It's a static behaviour that can be hooked up to any ItemsControl in XAML. It is also based on groups. You can only drag and drop between controls added to specific groups. The behaviour internally hold 2 collections with drag sources and drop targets with against specific groups. Additionally there's always a default group created in case the group was not specified in XAML.

Code Snippet

1. public static class DragAndDropBehaviour
2. {        
3. private static Dictionary<String, List<ItemsControl>> dragSources;
4. private static Dictionary<String, List<ItemsControl>> dropTargets;
5. // Mouse click coordinates
6. private static System.Windows.Point startPoint;
7.  
8. public static readonly DependencyProperty IsDropTargetProperty =
9.    DependencyProperty.RegisterAttached("IsDropTarget", typeof(bool),
10.    typeof(DragAndDropBehaviour),
11.    new UIPropertyMetadata(false, IsDropTargetUpdated));
12.  
13. public static readonly DependencyProperty IsDragSourceProperty =
14.     DependencyProperty.RegisterAttached("IsDragSource", typeof(bool),
15.     typeof(DragAndDropBehaviour),
16.     new UIPropertyMetadata(false, IsDragSourceUpdated));
17.  
18. public static readonly DependencyProperty GroupNameProperty =
19.     DependencyProperty.RegisterAttached("GroupName", typeof(String),
20.     typeof(DragAndDropBehaviour),
21.     new UIPropertyMetadata("", GroupNameUpdated));

      Above we've got the 2 collections I mentioned. Each dictionary sets a group name against a list of ItemsControls in that group. Group names from both dictionaries must match to make drag and dropping possible.

      There are 3 attached properties (I'm not their setters and getters on purpose to make it brief). We set IsDropTarget to true on a control if we want to allow it to receive the drop action. Same with IsDragSource for drag sources. Group name should be set to any string we want, which describes the group which participates in the drag and dropping behaviour.

Code Snippet

1. private static void IsDragSourceUpdated(DependencyObject dp,
2.     DependencyPropertyChangedEventArgs args)
3. {          
4.     InitializeDragLists();
5.  
6.     ItemsControl DragSource = dp as ItemsControl;
7.     
8.     if ((bool)args.NewValue == true)
9.     {
10.         if (dragSources.Any(p => p.Key == GetGroupName(dp)))
11.         {
12.             dragSources[GetGroupName(dp)].Add(DragSource);
13.         }
14.     }
15.  
16.     DragSource.PreviewMouseMove -= new MouseEventHandler(OnMouseMove);
17.     DragSource.PreviewMouseMove += new MouseEventHandler(OnMouseMove);
18.  
19.     DragSource.PreviewMouseLeftButtonDown -=
20.         new MouseButtonEventHandler(OnLeftButtonDown);
21.     DragSource.PreviewMouseLeftButtonDown +=
22.         new MouseButtonEventHandler(OnLeftButtonDown);
23.  
24.     DragSource.Unloaded += new RoutedEventHandler(DragSource_Unloaded);
25.     DragSource.Loaded += new RoutedEventHandler(DragSource_Loaded);
26. }

        First of the two change callbacka called has to initialize those two collections. We also need to add the control which we have adorned with IsDragSource property to the dragSources collection. Additionally 4 events have to be handled in the drag and drop process:
- PreviewMouseLeftButtonDown - to aquire position starting position of the drag process
- OnMouseMove - we start dragging on move, only, if left mouse button has been clicked and is being pressed. And only, if some minimum distance has been reached.
- Unloaded/Loaded - when the visual tree is loaded or unloaded during our work with the UI, we need to make sure that collections are being emtpied or populated again We don't multiple instances of the same control added to those lists.

In the next part I'll describe the rest of methods used.

Norwegian Developers Conference review part1

I watched some of the videos that appeared @
http://vimeo.com/ndcoslo/videos
Not as many as I would have liked to, but I'll try to add more reviews as I watch them.

Venkat Subramaniam: Asynchronous Programming on the .NET Platform
This lecture covers the basics of multithreaded .NET programming with focus on async/await, it skims through some of the older notions. If you'd like to listen to something more advanced than the bare bones don't bother.

Scott Meyers: Better Software — No Matter What
Part of a larger 6 hour course describes various programmer's work optimization methods. Focuses mainly on C/C++ but all those methods are vague enough to be applied to pretty much any programming language. I found the lecture interesting, with many tips and tricks rather obvious, which doesn't mean often used.

Robert C. Martin - Clean Architecture and Design
Uncle Bob as always very entertaining. This time he goes through the history of architectural design patterns. Digressing every now and then with tid bits of the programming past and present. It is a quite interesting lecture, revolving around the topic we can expect from the lecturer, which is: separation of concerns.

Continuous Delivery by Jez Humble ( .NET Rocks!)
I'd listen to it in the podcast form anyways, hence why not add it here. Half of the show is about continuous integration and obstacles for continuous integration such as bad code architecture and difficult team intercommunication. There's some information about feature switching in continuous delivery, easy acceptance testing, testing the hypothesis, cheap failures, companies which use CD such as facebook also a lot of other banter.

Optimizing View loading performance by limitting visible elements

         Wpf can be quite a system hog, if we forget about certain optimizations. Some of them are a must, and not everyone are aware of them. One of the worst things your user can experience with the UI is clicking a button and waiting 10 seconds for the form to show up. This is why every time you have finished building your Wpf forms and views you should ask yourself a question - is there anything in the view, any particular piece of xaml, that is not visible after the view loads for the first time.

         Are there any controls, which in order for the user to see them, he or she has to click the Expander's Button or maybe switch a TabItem in the TabControl. If the answer is yes, then there's some reworking to do, and some importans milliseconds to sheer off.
         To postpone the moment of loading of most xaml elements it is sufficient to initially set Visibility to collapsed. Whatever is inside will be loaded the moment you set the visibility to visible. In case of expander and the tabcontrol it is different. Both of these controls load their "innards" despite the visibility of the content set to Collapsed. The way to overcome this is by using DataTemplates, and it's best to show it by example.

  1 <TabControl.Resources> 
  2    <DataTemplate x:Key="firstTabItem"> 
  3       <SubViews:Tab1 DataContext="{Binding DataContext.SomeViewModelProperty,
  4           RelativeSource={RelativeSource FindAncestor, 
  5           AncestorType={x:Type TabControl}}}"/> 
  6    </DataTemplate> 
  7    <DataTemplate x:Key="secondTabItem"> 
  8       <SubViews:Tab2 DataContext="{Binding DataContext.SomeViewModelProperty,
  9           RelativeSource={RelativeSource FindAncestor, 
 10           AncestorType={x:Type TabControl}}}" /> 
 11    </DataTemplate>    
 12 </TabControl.Resources>  
 13 <TabItem Header="firstTab" ContentTemplate="{StaticResource firstTabItem}"/> 
 14 <TabItem Header="secondTab" ContentTemplate="{StaticResource secondTabItem}"/

These are rather easy things to do, and the gain is quite visible if you have some more complex xaml inside your tab items.

Norwegian Developers Conference, Oslo 12-14

        Because all of my posts till today involved some kind of coding, I though I'm gonna post something on a slightly different note, especially because of an important event that is slowly approaching.

        The event is Norwegian Developers Conference 2013 http://www.ndcoslo.com/, takes place in Oslo between 12th and 14th of June. It's one of the most interesting conferences out there, right next to Orodev. Although I can't personally visit and see for my own, I'm really fond of the videos of all the lectures they quite promptly upload. There will be some really good speakers attending ( as they do every year @ NDC ) and I can't wait for talks by Jon Skeet, Robert C. Martin, Dan North and other big personas.

I though this little post will be my "to-watch" list, so here it goes:

Wednesday

Clean Architecture and Design

Robert C. Martin

12 June 2013 11:40 - 12:40

Patterns of Effective Teams
Dan North
12 June 2013 15:00 - 16:00

Principles of Component Design.
Robert C. Martin
12 June 2013 16:20 - 17:20

Faking Homoiconicity in C# with graphs
Mark Seemann
12 June 2013 17:40 - 18:40

Reactive meta-programming with drones
Jonas Winje, Einar W. Høst and Bjørn Einar Bjartnes
12 June 2013 17:40 - 18:40

.NET Rocks - Functional Programming Panel: Type systems and static typing - saving your ass or getting in your face
Stuart Halloway, David Nolen, Don Syme, John Hughes, Carl Franklin and Richard Campbell
12 June 2013 17:40 - 18:40
(.NET Rocks coming to NDC woohoo!!)

Thursday
Hacking .NET(C#) Application: An Unfriendly Territory
Jon McCoy
13 June 2013 09:00 - 10:00

Ground Control to Major Tom
David Nolen
13 June 2013 09:00 - 10:00
( if something carries the name of a David Bowie song it has to be good, right? :) )

Abusing C#
Jon Skeet
13 June 2013 10:20 - 11:20

Asynchronous Programming on the .NET Platform
Venkat Subramaniam
13 June 2013 10:20 - 11:20

SQL Server's Last Breath
Rob Sullivan
13 June 2013 17:40 - 18:40

Friday
TDD, where did it all go wrong
Ian Cooper
14 June 2013 09:00 - 10:00

Service oriented architectures (hardcore separation of concerns)
August Lilleaas
14 June 2013 15:00 - 16:00

C# 5
Jon Skeet
14 June 2013 16:20 - 17:20


There are many more and I'll probably see many more, but lets have at least those here noted.

Simple UI scaling animation

       I often forget about different properties used with animation, hence another post about it, to follow up the previous one. It's just a small code snippet that fits just right into the previous code. Scaling animation isn't as useful as the sliding out one in my opinion, but it might come in handy one day, and I don't wanna have to roam the internet for hours to find it again.
       The only part that changes from the code in the last post are the storyboards. You can replace them with the ones below and it should work from the get go.

1 2 3 4 5 6 7 8 9 10 11 12

<Storyboard x:Key="firstStoryboard"> <DoubleAnimation Storyboard.TargetName="animatedGrid2" Duration="00:00:00.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1" /> </Storyboard> <Storyboard x:Key="secondStoryboard"> <DoubleAnimation Storyboard.TargetName="animatedGrid2" Duration="00:00:00.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="0" /> </Storyboard>

     
         Because the site I usually use for code to html conversion http://puzzleware.net/codehtmler/ seems to be down, and I don't have Visual Studio with the code conversion plugin nearby I've used another web code converter, that's why a different theme. The one I used today is: http://hilite.me/

Simple UI sliding animation

          Adding simple animation to your app can make it feel much more natural. And there's nothing as annatural in UI for us humans, as things suddenly popping out all over the place (which they usually do if we only use visibility when we need to show something to the user).
Quite frequent UI operation is checking a checkbox or switching radiobuttons and uncovering some previusly hidden part of UI. What makes it more appealing to the user is, when the hidden part of UI gently slides out instead of appearing suddenly. I'll show 2 different animation types appropriate in this situation. First one in this post.

  1 <Grid.Resources>
  2    <Storyboard x:Key="firstStoryboard"> 
  3        <DoubleAnimation Storyboard.TargetName="animatedGrid" 
  4        Duration="00:00:00.3" 
  5        Storyboard.TargetProperty="Height" 
  6        To="100" /> 
  7    </Storyboard> 
  8    <Storyboard x:Key="secondStoryboard">  
  9        <DoubleAnimation Storyboard.TargetName="animatedGrid" 
 10        Duration="00:00:00.3" 
 11        Storyboard.TargetProperty="Height" 
 12        To="0" /> 
 13    </Storyboard> 
 14 </TabItem.Resources> 
 15 <Grid HorizontalAlignment="Stretch"> 
 16     <Grid.ColumnDefinitions> 
 17         <ColumnDefinition Width="Auto"/> 
 18         <ColumnDefinition Width="Auto"/>                             
 19     </Grid.ColumnDefinitions> 
 20     <Grid.RowDefinitions> 
 21         <RowDefinition Height="Auto"/> 
 22         <RowDefinition Height="Auto"/>         
 23         <RowDefinition/>
 24     </Grid.RowDefinitions> 
 25     <RadioButton Content="First"/>   
 26     <RadioButton Content="Second" Grid.Column="1"> 
 27         <ToggleButton.Triggers> 
 28         <EventTrigger RoutedEvent="ToggleButton.Checked"> 
 29             <BeginStoryboard Storyboard="{StaticResource firstStoryboard}"/> 
 30         </EventTrigger> 
 31         <EventTrigger RoutedEvent="ToggleButton.Unchecked">
 32             <BeginStoryboard Storyboard="{StaticResource secondStoryboard}"/>
 33         </EventTrigger> 
 34         </ToggleButton.Triggers> 
 35     </RadioButton>
 36     <Grid Grid.Row="1" Grid.ColumnSpan="2" x:Name="animatedGrid" Height="0">

 37         <TextBlock Text="RandomText"/> 
 38     </Grid> 
 39 </Grid>

         This is a pretty simple piece of XAML code. What we need are 2 storyboards, one for the sliding out animation, one for the sliding back one. In this case we want to animate the height property and we need to state the max height explicitly. For each place in UI where you use this animation, you'd have to set the height to the value which would allow the whole hidden control to be visible after the animation took place.
        The animation is triggered by a routed event caused by the RadioButton being Checked or Unchecked. One important thing is to remember, that we need to set the starting Height to 0.

Google maps api v3 and custom markers

         I found myself in need of using custom google maps markers. Taking into consideration that the Google Chart tools API is now deprecated and will cease to work on April 20, 2015 and using 3rd party api was off the table I had to glue together several samples and fumble through many tutorials. I mostly based this on following great code sample http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html by Marc Ridey. Default google maps Marker consist of a red pin with a dot in the middle. To achieve a similar effect with a custom content marker I created a Label object. First problem to overcome was creating a proper marker with editable text inside.

  1 function Label(opt_options) { 
  2     // Initialization 
  3     this.setValues(opt_options); 
  4   
  5     // Image initialization 
  6     var labImg = document.createElement('img');                             
  7     labImg.setAttribute('src','Images/marker.png'); 
  8     labImg.style.cssText = 'position: relative;left: -50%; top: -100%';
  9     labImg.setAttribute('alt',''); 
 10     labImg.style.width = '21px' 
 11     labImg.style.height = '34px' 
 12   
 13     // Marker text initialization 
 14     var span = this.span_ = document.createElement('span');     
 15     span.style.cssText = 'position: absolute; top: -100%; 
 16        left: -12px; width: 21px; align: left; text-align: center'; 
 17   
 18     // Creating a div with image background and text inside
 19     var div = this.div_ = document.createElement('div');
 20     div.appendChild(labImg); 
 21     div.appendChild(span); 
 22     div.style.cssText = 'position: absolute; display: none;';
 23 };

         In the code above I'm creating a simple marker that consists of a div with image as background and a span which will include the markers's text. For this marker to become a map overlay object it has to inherit google.maps.OverlayView. The former we'll force us to implement onAdd(), onRemove() and draw() methods, which are described properly in the link I provided earlier. I created two collections to help me in my implementation. First one: positions collection holds latitudes and longitudes, the second one data such as zIndex nad label's text. I populated them in addMarker method. As I mentioned earlier we need to setup the inheritance somewhere in code:

      Label.prototype = new google.maps.OverlayView; 

And finally function for adding new markers:

  1 // Adding new marker 
  2 function addMarker(long, lat, desc) {
  3     var latlng = new google.maps.LatLng(lat,long);   
  4     var label = new Label({
  5                    map: map 
  6               }); 
  7                              
  8     label.set('zIndex',10000000 - (long * 10000));
  9     label.set('text', desc); 
 10      
 11     labels[id] = label; 
 12     positions[id] = latlng; 
 13 }

       These two functions and the code from the link I pasted earlier is enough to create a map with your own markers with your own labels inside. The method that changes most from Marc Ridey's tutorial is the draw event method. It actually differs slightly but I'll add it, to make the post more complete.

  1 // Label drawing event 
  2 Label.prototype.draw = function() { 
  3    var projection = this.getProjection();
  4    var oldid = this.get('text') 
  5    var position = projection.fromLatLngToDivPixel(positions[oldid]);
  6    var div = this.div_;
  7                             
  8    div.style.left = position.x + 'px'; 
  9    div.style.top = position.y + 'px'; 
 10    div.style.display = 'block'; 
 11    div.style.zIndex = this.get('zIndex'); 
 12    this.span_.innerHTML = this.get('text').toString(); 
 13 };

I also added several functions that controlled the map later from my WPF application:

  1 // Remove marker by id 
  2 function deleteMarker(id) {    
  3     var label = labels[id]; 
  4     label.onRemove();                          
  5 } 
  6  
  7 // Center on location 
  8 function setCenter(lat, long) {
  9     var latlng = new google.maps.LatLng(lat, long);
 10     map.panTo(latlng); 
 11 } 
 12    
 13 // Zoom to fit markers 
 14 function zoomToMarkers() {                             
 15     var bounds = new google.maps.LatLngBounds();
 16     for(var x in markers) { 
 17       bounds.extend(markers[x]); 
 18     } 
 19  
 20     map.fitBounds(bounds);                              
 21 }  
 22     
 23 // Remove all markers 
 24 function clearMarkers() { 
 25     for(var x in markers) {   
 26          var label = labels[x]; 
 27          label.onRemove();              
 28     } 
 29 }

Different ways of adding converters in XAML

In this post I'd like to commit to memory several ways of adding converters into the xaml code. There's of course the built in:

Code Snippet

1. <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>

As any other converter after that we can simply add it to binding configuration:

Code Snippet

360. Converter={StaticResource BoolToVisConverter}}

There are other ways of adding and instantiating converters in code though. For instance, what, if we don't want to go through the hassle of adding a converter in resources every time we want to use one? Below you have an ordinary converter with additional property - which changes the converter into a singleton.

Code Snippet

30. public class ThingToThingConverter : IValueConverter
31. {
32.     private static ThingToThingConverter _instance;
33.     public static ThingToThingConverter Instance
34.     {
35.         get
36.         {
37.             return _instance ?? (_instance = new ThingToThingConverter());
38.         }
39.     }

Thanks to this, we can now use above converter without adding it first to window's/control's resources. Like this:

Code Snippet

85. Converter={x:Static Converters:ThingToThingConverter.Instance}}">

Another way of doing this is by using MarkupExtension, it's similar to the above, but I find is slightly more comfortable:

Code Snippet

1. public class SmthToSmthConverter : MarkupExtension, IValueConverter
2. {
3.     public static SmthToSmthConverter _converter = null;
4.  
5.     public SmthToSmthConverter()
6.     {        
7.     }
8.  
9.     public override object ProvideValue(IServiceProvider serviceProvider)
10.     {
11.         if (_converter == null)
12.             _converter = new SmthToSmthConverter();
13.         return _converter;
14.     }

ProvideValue method is called whenever XAML processor examines a MarkupExtension node and returns our converter into the object graph. All this allows us to use the following markup:

Code Snippet

49. Converter={Converters:ThingToThingEnumConverter}

Bite-sized free geocoding

            It took me some time to read (or skim through) all the TOUs of different geocoding providers. Most of them are free for personal use (Yahoo maps/Google maps and Bing maps geocoders). Only one that I found is free for commercial use (although with some heavy constraints but still). It's called Nominatim and it is used by OpenStreetMap project. I wrote this short snippet, someone might find helpful. First, we need to create the request url. The method below might not be an example of good coding practices, but it's clear enough. What you want to get as the return value is an url that looks something like this:
                http://nominatim.openstreetmap.org/search?city=London&format=xml

  1 public string BuildRequest(string building, string street, string city,
  2  string country) 
  3  { 
  4     bool streetAdded, cityAdded, countryAdded;
  5     streetAdded = cityAdded = countryAdded = false;
  6   
  7     StringBuilder sb = 
  8     new StringBuilder(@"http://nominatim.openstreetmap.org/search?"); 
  9  
 10     if (!String.IsNullOrEmpty(street)) 
 11     { 
 12         sb.Append("street="); 
 13         if (!String.IsNullOrEmpty(building))
 14         { 
 15             sb.AppendFormat("{0} ", building); 
 16         } 
 17         sb.Append(street); 
 18         streetAdded = true; 
 19     } 
 20  
 21     if (!String.IsNullOrEmpty(city)) 
 22     { 
 23         if (streetAdded) 
 24             sb.Append("&"); 
 25  
 26         sb.AppendFormat("city={0}", city); 
 27         cityAdded = true; 
 28     } 
 29  
 30     if (!String.IsNullOrEmpty(country)) 
 31     { 
 32         if (streetAdded | cityAdded) 
 33             sb.Append("&"); 
 34  
 35         sb.AppendFormat("country={0}", country); 
 36         countryAdded = true; 
 37     } 
 38  
 39     if (streetAdded | cityAdded | countryAdded)
 40         sb.AppendFormat("&"); 
 41  
 42     sb.AppendFormat("format=xml"); 
 43     return sb.ToString();  
 44  }

             After formulating the request, we can pass it into DownloadString() method. What we'll get in return will be xml in string form. Each <place> node is a separate place which matches the address we've given. There are several formats we can choose from when working with Nominatim provider, I've chosen xml.

  1 public Point GetCoordinates(string building, string street, string city,
  2  string country) 
  3 {     
  4     WebClient webClient = new WebClient();    
  5     string request = BuildRequest(building, street, city, country); 
  6     string result = webClient.DownloadString(request);
  7  
  8     XmlDocument xml = new XmlDocument(); 
  9     xml.LoadXml(result); 
 10  
 11     var nodes = xml.SelectNodes("/searchresults/place"); 
 12  
 13     if (nodes != null && nodes.Count > 0)
 14     { 
 15         var lat = nodes[0].Attributes["lat"].InnerText; 
 16         var lon = nodes[0].Attributes["lon"].InnerText; 
 17  
 18         double latitude = Double.Parse(lat, CultureInfo.InvariantCulture);
 19         double longitude = Double.Parse(lon, CultureInfo.InvariantCulture);
 20         return new Point(latitude, longitude);
 21     } 
 22     return null;
 23 } 

         To use the WebClient class, you need to add reference to System.Net. To get more information about the xml data returned by the provider, and the data you can pass in the request you should visit: http://wiki.openstreetmap.org/wiki/Nominatim To see the exact usage policy check: http://wiki.openstreetmap.org/wiki/Nominatim_usage_policy As you can see this is a really easy way, if you want to implement some simple geocoding in your app.

Checkbox header column using AttachedProperty

        During our project some time ago, we've got a new requirement introduced. The requirement was to extend datagrids across the application, by adding a selection column, checkbox selection column. It's a boring and daunting task to change every view and viewmodel to support this new scenerio. Hence I opted for a more elegant, simple and automated way of doing things. I chose attached properties as the method of choice, bear in mind you can make this functionality work in a completely different fashion. Whatever suits you. I'd like to also add, that I do use indentation and curly braces in most of my code. Here for the sake of brevity I've let myself be a little bit less strict with the style of coding.

Code Snippet

8. public static class SelectionColumnExtension
9. {
10.  
11. public static bool GetSelectionColumn(DependencyObject obj)
12. {
13.     return (bool)obj.GetValue(SelectionColumnProperty);
14. }
15.  
16. public static void SetSelectionColumn(DependencyObject obj, bool value)
17. {
18.     obj.SetValue(SelectionColumnProperty, value);
19. }
20.  
21. // Selected column dependency property
22. public static readonly DependencyProperty SelectionColumnProperty =
23.     DependencyProperty.RegisterAttached("SelectionColumn",
24.     typeof(bool),
25.     typeof(SelectionColumnExtension),
26.     new UIPropertyMetadata(false, OnSelectionColumnSet));

        Above is the attached property (added quickly with the good old "propa" visual studio snippet) which will be settable/bindable from XAML as the switch to add selection checkbox column to the datagrid.

Code Snippet

28. // Selected column setup
29. public static void OnSelectionColumnSet(DependencyObject obj,
30.             DependencyPropertyChangedEventArgs args)
31. {
32.     var dataGrid = obj as DataGrid;
33.     if (dataGrid != null && (bool)args.NewValue == true)
34.     {
35.         DataGridCheckBoxColumn column = new DataGridCheckBoxColumn();
36.         column.Binding = new Binding("IsChecked");
37.         DataTemplate dataTemplate = GetHeaderTemplate(dataGrid);
38.         column.HeaderTemplate = dataTemplate;
39.         dataGrid.Columns.Add(column);
40.     }
41. }

        Next is the callback method, that gets called every time "SelectionColumn" property changes. As you can see I didn't implement column removal without the need of such requirements. It is quite an easy task though and might get implemented later on.
       Binding constructor is set to "IsChecked" property by default - this is the property in your ViewModel to which checkboxes in the checkbox column will bind.

Code Snippet

43. public static DataTemplate GetHeaderTemplate(DataGrid datagrid){
44.     DataTemplate dataTemplate = new DataTemplate();
45.     FrameworkElementFactory factory =
46.         new FrameworkElementFactory(typeof(Grid));
47.     FrameworkElementFactory cbFactory =
48.         new FrameworkElementFactory(typeof(CheckBox));
49.     Binding checkBoxBinding =
50.         new Binding("GlobalIsChecked");
51.     cbFactory.SetBinding(CheckBox.IsCheckedProperty, checkBoxBinding);
52.     cbFactory.AddHandler(CheckBox.CheckedEvent,
53.         new RoutedEventHandler(OnGlobalChecked));
54.     cbFactory.AddHandler(CheckBox.UncheckedEvent,
55.         new RoutedEventHandler(OnGlobalUnchecked));
56.     cbFactory.SetValue(CheckBox.TagProperty, datagrid.Items);
57.     factory.AppendChild(cbFactory);
58.     dataTemplate.VisualTree = factory;
59.     return dataTemplate;
60. }

       We need a DataTemplate for the Checkbox column. We can create visuals in C#  code using FrameworkElementFactory. The most important part of this method is hooking up Checked and Unchecked event handling for the header checkbox and putting Datagrid.Items collection in the Tag of the checkbox for later operations.
       Note that Items property of the DataGrid is of ItemsCollection type and is actually a CollectionView. Because of that by refering this property through Checkbox's tag, we will have constant access to the current list of items in our datagrid without the need to follow changes in the collection. Lastly we need to add Checked and Unchecked events handling, which is pretty straightforward:

Code Snippet

63. // Changing checked state of checkboxes according to the global checkbox
64. public static void ChangeCheckboxStateTo(CheckBox cb , bool state)
65. {          
66.     if (cb != null)
67.     {
68.         ItemCollection ic = cb.Tag as ItemCollection;
69.         foreach (var item in ic)
70.         {
71.             var property = item.GetType().GetProperty("IsChecked");                     
72.             if (property != null)                    
73.                 property.SetValue(item, state, null);
74.         }
75.     }
76. }
77. public static void OnGlobalUnchecked(object sender, RoutedEventArgs e)
78. {
79.     CheckBox cb = sender as CheckBox;
80.     ChangeCheckboxStateTo(cb, false);
81. }
82. public static void OnGlobalChecked(object sender, RoutedEventArgs e)
83. {
84.     CheckBox cb = sender as CheckBox;
85.     ChangeCheckboxStateTo(cb, true);
86. }

Use in xaml:

Code Snippet

656. <DataGrid ItemsSource="{Binding List3,UpdateSourceTrigger=PropertyChanged}"
657.           SelectedItem="{Binding Item3}"                              
658.           Ext:SelectionColumnExtension.SelectionColumn="True">
659.     <DataGrid.Columns>
660.         <DataGridTextColumn Binding="{Binding Data1}" Header="Data1"/>
661.         <DataGridTextColumn Binding="{Binding Data2}" Header="Data2"/>
662.         <DataGridTextColumn Binding="{Binding Data3}" Header="Data3"/>
663.     </DataGrid.Columns>
664. </DataGrid>

That's all you need to do to get this:

Enum translation converter

         To follow up the previous entry on enums nad translations, I'll continue by adding some more functionality which helps in a similar manner. In some instances we needed to display an enum declared in the ViewModel  in a textbox or a column - specifically we  needed the enum's translation,  and that's where this converter came into play.

Code Snippet

1. public class TranslateEnumConverter : MarkupExtension, IValueConverter
2. {
3.     public static TranslateEnumConverter _converter = null;                  
4. 
   
5.     public TranslateEnumConverter()
6.     {        
7.     }
8.  
9.     public object ConvertBack(object value, Type targetType, object     parameter, System.Globalization.CultureInfo culture)
10.     {
11.         throw new NotImplementedException();
12.     }
13.  
14.     public override object ProvideValue(IServiceProvider serviceProvider)
15.     {
16.         if (_converter == null)
17.         {
18.             _converter = new TranslateEnumConverter();
19.         }
20.         return _converter;
21.     }
22. }

          Let's start with nearly ordinary Converter class above. What's a bit different is using MarkupExtension as one of the ways to allow adding converter to binding in XAML without the need of declaring it as a resource. The pretty straightforward use of ProvideValue allows us exactly this:

Converter={Converters:TranslateEnumConverter}

Converters is the namespace where all our converters reside.
The Convert method, as in any converter, returns the converted value from VM to View. In our case it gets the resource and the translated string of the enum and returns it.

Code Snippet

1. public object Convert(object value, Type targetType,
2.     object parameter, System.Globalization.CultureInfo culture)
3. {
4.     if (value == null)
5.         return String.Empty;
6.  
7.     if (parameter == null)
8.         throw new ArgumentNullException("parameter");
9.  
10.     String inputParam = parameter.ToString();
11.     String resourceName = String.Empty;
12.   
13.     resourceName = parameter.ToString();
14.  
15.     Type type = Type.GetType(resourceName);
16.     string name = value.ToString();
17.     if (type == null)      // Invalid resource name
18.         throw new ArgumentException("Resource name 
19.                   should be a fully qualified name");
20.  
21.     var property = type.GetProperty(name, BindingFlags.Static |
22.         BindingFlags.Public | BindingFlags.NonPublic);
23.     string translation = string.Empty;
24.        
25.     if (property == null) // With no corresponding Resx translation, there's an error message displayed
26.         translation = String.Format("Field {0} not found in the resource file {1}", name, resourceName);
27.     else  
28.         translation = property.GetValue(null, null).ToString();
29.  
30.     return translation;
31. }

            You can read the previous post's description to gain more knowledge about how the resource name is passed into the converter and parsed into parameters - beside that the code above should be pretty self-explanatory. With the code we've got we can call the converter from XAML, with Status being the Enum property from the ViewModel and fully qualified name of the resource class as the ConverterParameter:

Binding="{Binding Status,

Converter={Converters:TranslateEnumConverter}, 

ConverterParameter='Mod.Ule.Resources.Enums.EnumStrings,Mod.Ule'}"