Creating and Binding to a Custom User Control in MVVM Cross

While creating my game, I recently came across the problem of navigation. This post describes how to create a custom user control and react to the event inside.

The usual disclaimer still applies here; although this is an MVVM Cross post, the contents of it should be applicable for any MVVM Framework or, in fact, any XAML binding at all.

User Control

The user control that I’m going to use is simply a navigation bar to appear at the top of each screen.

The XAML for the user control is here:

<UserControl
    x:Name="NavigationControlRoot">
    
    <Grid DataContext="{Binding ElementName=NavigationControlRoot}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Button Content="Home" Grid.Column="0" Command="{Binding HomeClick}" />
        <Button Content="Back" Grid.Column="1" Command="{Binding BackClick}" />
    </Grid>
</UserControl>

So, I’ve got two commands, binding to the code behind. The key point here is that the root control (grid) binds to the DataContext of the user control – effectively this binds it to the containing DataContext. Here’s the code behind:


    public sealed partial class NavigationPanel : UserControl
    {
        public static DependencyProperty BackCommandProperty =
            DependencyProperty.Register(
                "BackClick",
                typeof(ICommand),
                typeof(NavigationPanel),
                new PropertyMetadata(null));

        public static DependencyProperty HomeCommandProperty =
            DependencyProperty.Register(
                "HomeClick",
                typeof(ICommand),
                typeof(NavigationPanel),
                new PropertyMetadata(null));

        public NavigationPanel()
        {
            this.InitializeComponent();
        }
        
        public ICommand BackClick
        {
            get
            {
                return (ICommand)GetValue(BackCommandProperty);
            }

            set
            {
                SetValue(BackCommandProperty, value);
            }
        }

        public ICommand HomeClick
        {
            get
            {
                return (ICommand)GetValue(HomeCommandProperty);
            }

            set
            {
                SetValue(HomeCommandProperty, value);
            }
        }        
    }

So, you’ve now exposed two dependency properties and bound them to the XAML in the user control.

Host App

Here’s the relevant XAML for the hosting view:

<controls:NavigationPanel BackClick="{Binding BackClickCommand}"                                  
                                  HomeClick="{Binding HomeClickCommand}"/>

And that just binds to the ViewModel as you would expect.

        private IMvxCommand _homeClickCommand;
        public IMvxCommand HomeClickCommand
        {
            get
            {
                if (_homeClickCommand == null)
                {
                    _homeClickCommand = new MvxCommand(() => GoHome());
                }
                return _homeClickCommand;
            }
            set
            {
                _homeClickCommand = value;
            }
        }

        private void GoHome()
        {
            ShowViewModel<MainViewModel>();
        }

For me, this is in a base view model, so it responds to the same command in every view.

Conclusion

I think the final version of this code will interact with an IMvxPresenter in some way, which may make another post.

Now using Visual Studio 14 CTP

I was previously using VS2013, but after running 14 just once, I saw no reason to go back. I thought I’d jot down some notes on my experience of this update. A quick caveat though: VS14 is a CTP, so if you’re thinking about using it to maintain the code for your nuclear reactor, then probably don’t.

Faster

Okay, so this is my perception. I’m working on a personal project on the train to and from work. VS14 loads almost a station before VS2013 did. Now, if that’s not a fair and accurate benchmark, I don’t know what is!

Debugging

One particularly cool feature is that you can see the CPU execution time for previous statement during debugging. Typically, this is a meaninglessly low figure of x milliseconds; but occasionally it shows an unexpectedly high figure.

This can be dangerous, because if you saw a statement that took 30ms, which executed once when the user presses a button in your app, you might think nothing of it… unless all the other statements take 2ms. At this point, you might spend 1/2 hour trying to work out what the bottleneck is. You might even find it: and speed up your app by 28ms.

Refactor

Shift-Alt-F10 on a non-existent method now gives you a preview of what it’s about to do. Possibly not the most useful feature in the world to be honest, but if you want a field and it tries to create a property then you know (obviously, if you’d just read the description of what it will create, that would also tell you). The Using statement tells you where it will create the statement:

preview

However, I can’t find any way you can affect the preview – which would have been a nice feature; for example, say you wanted to create a public field rather than internal; or, you wanted to define a constant and give it a constant value.

Light bulbs now appear next to potential refactoring. One example was an unnecessary using statement I had. It had turned grey; I didn’t understand this until I noticed that a light bulb had appeared next to it, which helpfully informed me that I didn’t need the statement.

Also, code analysis seems to be an opt-in thing now – rather than the previous version which seemed to constantly kidnap whichever tab it was on.

It is still a CTP

Line numbers were turned on in VS2013 and were off in 14.

Windows 10 – The Return of the Overrated Start Menu

Yesterday, for the first time, I saw Windows 10. I set it up in a VM inside Win 8. The following post in a combination of conjecture, opinions, and under researched hearsay.

First, let’s think about what I just said: I’m running a later version of Windows inside an earlier one. And it works.

9

Don’t mention 9! I mentioned it once, but I think I got away with it.

Start menu

The start menu never went anywhere for Win 8. You just press the Windows key and you’re in it (although it was more of a screen than a menu). Anyway, MS finally bowed to pressure, and it’s back:

start1

Looks good eh? Actually, after restarting it seemed to gather its thoughts:

start2

Anyway, as I understand the intention, if I were running this on a tablet, I’d be able to see the Win 8 start screen when I pressed the Windows Key. I can’t test that on a VM and, if I could, I’d be surprised if it worked properly for the TP.

Multiple Desktops

This is a neat feature: the ability to maintain more than one desktop. The way this appears to work is that you can open apps into any desktop, and then just switch between desktop to access them, or access them from the taskbar, and Windows will select the desktop they are on.

desktop

You appear to be able to maintain as many desktops as you like.

Search

There is a large magnifying glass on the taskbar, which brings up a huge, unwieldy, blank box with a small text search. Maybe this will be back on the charms bar for tablets, but the idea is that it will find stuff on your machine. It failed:

search

I don’t understand why this was separated from the start menu. Searching for, and running programs are basically the same thing. If I want to run word, I want to type “Word”; if I want to open a word document on my desktop, I want to type: “My word doc” and have it find it. Results seemed to be sporadic, sometimes it found what I expected, but generally it didn’t.

What happened to the charms bar?

It now seems to be a sub menu of each store window:

charmsbar

As I said earlier, I expect it will behave differently for the tablet and phone.

Universal Apps

These have been around for a while. They basically allow sharing of code between Windows store and Windows phone apps. As I understand it, these will now be effectively mandatory – you will have to produce a phone & store version, in the same way as you had to provide a snapped and filled version of your app.

Conclusion

The split desktop is nice, and the idea of having “One Windows” is a nice one. In fact, it’s effectively what I understood to be the driving force behind 8. It looks like it’s going to be a good OS, but I can’t see any killer features.

What I mean by that is this: imagine that you want to upgrade to Windows 10, and you put the idea to your boss. The first question they should ask is: “Why?”.

For Windows 8, the answer was simple: Hyper-V. An astoundingly useful and undersold feature.

Windows 10 doesn’t have that, and it needs it, because a lot of people are sticking on 7 and need a reason to upgrade – having the start menu back is not that reason.

Updating a View Model from Inside a Collection

My last post suggested a concept of having a `Selectable` Model, which effectively wraps a model in a class with a generic item and an `IsSelected` property. This does, however, present a slight issue. What if you want to update the view model, based on the item being selected, or de-selected?

Say, for example, that from my previous post, you had a property on the Person class called Wages, and wanted to display the total wages of all the selected people. You would have defined `TotalCostSummary` in the ViewModel, and bound it in the View.

My solution is to pass a delegate into the Selectable item. Here’s how I did it (this doesn’t really make any sense without referring back to the first post).

SelectableItem Model

In the `SelectableItem`, define a new property like so:

        private Action _updateMethod = null;
        public Action IsSelectedChangedMethod
        {
            get { return _updateMethod; }
            set
            {
                _updateMethod = value;
            }
        }

And change `IsSelected` to looks like this:

        private bool _isSelected;
        public bool IsSelected
        {
            get { return _isSelected; }
            set
            {
                _isSelected = value;                
                RaisePropertyChanged();
                
                if (_updateMethod != null)
                    _updateMethod();
            }
        }

ViewModel

        private void UpdateTotalCost()
        {
            _summary = SelectablePeople.Where(a => a.IsSelected).Sum(s => s.Item.Wages);
            RaisePropertyChanged(() => TotalCostSummary);
        }

Next, change the code to define the list:

List<Person> population = GetPeople();
SelectablePeople = new ObservableCollection<SelectableItem<Person>>(population
	.Select(n => new SelectableItem<Person>() 
	{ 
		Item = n, IsSelected = false, IsSelectedChangedMethod = (() => UpdateTotalCost())  
	}).ToList());

Conclusion

The net effect is that the changes now made inside the model can bubble up to the ViewModel, but the separation of the two has been maintained.

Binding IsSelected Method in the ListView Control in WinRT

Basically, it’s not possible. However, this is the best (and only that works) workaround that I found.

Subclass the Listview

I tried everything. Absolutely everything.

I tried straightforward binding – that doesn’t work for IsSelected.
I tried using WinRT Xaml Toolkit – didn’t work.
I tried using Setters – they don’t work for WinRT.

Finally, I came across this solution; here’s the listview subclass (stolen directly from here: http://stackoverflow.com/questions/15994021/listviewitem-isselected-binding-works-for-wpf-but-not-for-winrt):

    public class ListViewEx : ListView
    {
        protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);
            
            ListViewItem listItem = element as ListViewItem;
            Binding binding = new Binding();
            binding.Mode = BindingMode.TwoWay;
            binding.Source = item;
            binding.Path = new PropertyPath("IsSelected");
            listItem.SetBinding(ListViewItem.IsSelectedProperty, binding);
        }
    }

Obviously this does restrict the IsSelected property name. My class looks something like this:

    public class Person
    {
        public string Name { get; set; }
        …
    }

I didn’t want to add an IsSelected property to this; because it doesn’t directly relate to the entity. My solution was to wrap this inside a class such as this:


    public class SelectableItem<T> : INotifyPropertyChanged
    {
        private T _item;
        public T Item 
        {
            get { return _item; }
            set
            {
                _item = value;
                RaisePropertyChanged();
            }
        }

        private bool _isSelected;
        public bool IsSelected
        {
            get { return _isSelected; }
            set
            {
                _isSelected = value;                
                RaisePropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged([CallerMemberName] string name = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
}

And build it like this:

                List<Person> population = GetPeople();
                SelectablePeople = new ObservableCollection<SelectableItem<Person>>(population
                    .Select(n => new SelectableItem<Person>() { Item = n, IsSelected = false }).ToList());

So, finally, bind the collection to the new subclassed listview like this:


        <controls:ListViewEx x:Name="ItemListView" Grid.Column="0" Grid.Row="1"
                        ItemsSource="{Binding SelectablePeople}"                        
                        SelectionMode="Multiple"                        
                        Width="Auto" Height="Auto" >

            <controls:ListViewEx.ItemTemplate>
                <DataTemplate x:Name="MyTemplate">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock                            
                            Text="{Binding Item.Name}"/>
                    </StackPanel>
                </DataTemplate>
            </controls:ListViewEx.ItemTemplate>

        </controls:ListViewEx>