Converting from Silverlight To Universal Apps – MVVM, ListView and Commands

Converting a Windows Phone Silverlight app to a Universal WinRT app isn’t straight forward, and it’s hard to Google for answers. I converted one of my not too advanced apps to universal Windows/Phone and here are some of the things I had to do. The quick-list for Xaml changes is here.

I’m using MVVMLight because it makes it so much easier to develop apps. When developing the Silverlight app I used Interation.Triggers and EventTrigger/EventToCommand to fire off commands in my ViewModel from clicked ListBox items. When converting to universal/winrt I ran into problems with referencing the Microsoft.Expression.Interactions assemblies for the Windows and Windows Phone projects so I decided to code up a simple ItemClickCommand instead which uses an attach property on the ListView. Based (more or less a replica) on the code by Marco Minerva, the command-class looks like this:

public static class ItemClickCommand
public static readonly DependencyProperty CommandProperty =
DependencyProperty.RegisterAttached("Command", typeof (ICommand),
typeof (ItemClickCommand), new PropertyMetadata(null, OnCommandPropertyChanged));

public static void SetCommand(DependencyObject d, ICommand value)
d.SetValue(CommandProperty, value);

public static ICommand GetCommand(DependencyObject d)
return (ICommand) d.GetValue(CommandProperty);

private static void OnCommandPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
var listView = dependencyObject as ListViewBase;
if (listView != null)
listView.ItemClick += (sender, itemClickEventArgs) =>
var viewBase = sender as ListViewBase;
var command = GetCommand(viewBase);

if (command != null && command.CanExecute(itemClickEventArgs.ClickedItem))
The command in the ViewModel is set up like this:

public class SportsViewModel : ViewModelBase
public ObservableCollection<Sport> Sports { get; set; }
public RelayCommand<Sport> SportSelected { get; private set; }

public SportsViewModel()
SportSelected = new RelayCommand<Sport>(sport =>
if (sport == null) return; //should not happen
_navigationService.NavigateTo(typeof(LeaguesView), sport.Id);


//and so on...
And this is how I use this command in the XAML view:

<ListView IsItemClickEnabled="True" SelectionMode="None"
commands:ItemClickCommand.Command="{Binding SportSelected}"
ItemsSource="{Binding Sports}" >
<TextBlock Text="{Binding Name}" />

Remember to set the IsItemClickEnabled and SelectionMode properties for your ListView or nothing will happen when you click the items in the list Smile

No Comments