Here in the Balance view everything is aligned properly since I've set fixed width for the columns of Grid inside DataTemplate.
and because of that the separator, between the entries under Mr A and his summary, started from far left. I wanted it to start from the left end of the column header, Security, or the maximum number, whichever has the maximum length, in that column. If I give Auto width to Grid columns then it looks like the items in Edit Transaction view. One way I can think of, didn't try that yet, is measure the column header and all numbers in the column in a TextBlock to get the maximum width and set that as the width of numeric columns in the DataTemplate BUT that's complicated. Is there any better way to get columns aligned?
There're two more minor issues in the Balance view. Unlike the previous version of the app where I used ListBox's GroupStyle for grouping as well as summary computation, here I've used an ItemTemplateSelector and the ItemsSource for the ListBox is List<object>. Group header, Mr A, is NameTemplate, entries under Mr A and the single line of Mr B are EntryTemplate and summary of Mr A is SummaryTemplate. Doing summary this way with one level grouing is actually much simpler than implementing that with GroupStyle.
Now, when I hover over the Header, Mr A, and his summary 1) I get the default IsMouseOver effect of ListBoxItem and 2) I can select Header and summary. Wanted to disable the effect and selection capablity by setting Focusable = false in the VisualTree of DataTemplate BUT that doesn;t work!

