Testing the SH WP ApplicationBar in an Multiselectlist MVVM scenario

If you’re developing for Windows Phone 7 and are using MVVM you’re probably familiar with the problem that you cannot bind the out of the box ApplicationBar because it is not a silverlight control. Since the early days of WP7 there are lots of solutions and workarounds to work with the application bar but most of them do have some (minor) downsides in using them. The application bar solutions that are used the most are probably the BindableApplicationBar from PhoneFX, another BindableApplicationBar or AppBarUtils.

Up untill now I was using the PhoneFX BindableApplicationBar but I really disliked the problem that you can’t bind the visibility property of the ApplicationBarButtons to hide or show them when you need them. A common example where you use this is in a Scenario with a MultiSelectList on a page where you want to be able to hide the “Remove” button as long as you didn’t select an item yet and hide the “Select” button when you are already in the selection mode. This week I was reading a blogpost on Windows Phone Geek about the AdvancedApplicationBar and I read that this new ApplicationBar solution did support binding the Visibility of ApplicationBarButtons so it was time to put this one to the test.

In this post I’ll walk you through my the code I produced to get a nice MultiSelectList control (from the silverlight wp7 toolkit ) working with the applicationbar without writing any codebehind. I used MVVM light for this sample so an empty MVVM light project with references added to the Silverlight Toolkit and the SH WP ApplicationBar will be my starting point.

The idea is to build an application showing a MultiSelectList with some messages that you can select and delete by using the ApplicationBarButtons just as the build in Mail application does.

Lets first start of building some of the plumbing to get this application going. We’ll create a Message Class that is going to be our Class containing the information for each message. We’ll keep this Class plain and simple:

   1: public class Message

   2: {

   3:     public string Sender { get; set; }

   4:     public DateTime Date { get; set; }

   5:     public string Content { get; set; }

   6: }

We’ll also need a property in the ViewModel to expose a list of these Messages which we can fill with dummy data and that can be bound in the MultiSelectList. We’ll create a property in the ViewModel called Messages and will fill these for this small example in the constructor of the MainViewModel.

   1: /// <summary>

   2: /// Initializes a new instance of the MainViewModel class.

   3: /// </summary>

   4: public MainViewModel()

   5: {

   6:     for (int i = 0; i < 10; i++)

   7:     {

   8:         Message m = new Message();

   9:         m.Sender = "Sender " + i.ToString();

  10:         m.Date = DateTime.Now.AddHours(i);

  11:         m.Content = "This is a sample message " + i.ToString();

  12:         Messages.Add(m);

  13:     }

  14: }

  15:  

  16: /// <summary>

  17: /// The <see cref="Messages" /> property's name.

  18: /// </summary>

  19: public const string MessagesPropertyName = "Messages";

  20:  

  21: private ObservableCollection<Message> _messages = null;

  22:  

  23: /// <summary>

  24: /// Sets and gets the Messages property.

  25: /// Changes to that property's value raise the PropertyChanged event. 

  26: /// </summary>

  27: public ObservableCollection<Message> Messages

  28: {

  29:     get

  30:     {

  31:         return _messages;

  32:     }

  33:  

  34:     set

  35:     {

  36:         if (_messages == value)

  37:         {

  38:             return;

  39:         }

  40:  

  41:         _messages = value;

  42:         RaisePropertyChanged(MessagesPropertyName);

  43:     }

  44: }

Now the data is there it’s time to create the UI. One of the best parts of using MVVM is creating the UI in Expression Blend so lets use that. We’ll add a MultiSelectList Control to the page (it’s a control that comes in the silverlight toolkit for wp7) and bind the itemsource to the Messages property. We’ll also add the AdvancedApplicationBar from the SH WP library to the page and create 2 buttons to be used on the ApplicationBar, a select button and a delete button. Set the size of the MultiSelectList to Autosize –> full and make sure the AdvancedApplicationBar control is located in the Layoutroot. Set the text of the 2 ApplicationBarButtons to Select and Remove and also select an image for the buttons.

multiselectlist

When you rebuild now you’ll see 10 lines of code in the multiselect list. Change the ItemTemplate for the MultiSelectList by creating an empty template and adding 3 textboxes to them binding them to our 3 fields in our Message Class: Sender, Date and Content. Give all of them a pretty style and we’re ready to go on.

itemtemplate

Your Xaml for the contentgrid should look like this

   1: <Grid x:Name="ContentGrid"

   2:       Grid.Row="1" Height="537" VerticalAlignment="Top">

   3:     <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}"/>

   4:     <Sh:AdvancedApplicationBar>

   5:         <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png"/>

   6:         <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png"/>

   7:     </Sh:AdvancedApplicationBar>

   8: </Grid>

The Xaml for the ItemTemplate looks like this

   1: <phone:PhoneApplicationPage.Resources>

   2:     <DataTemplate x:Key="MessageTemplate">

   3:         <StackPanel>

   4:             <TextBlock TextWrapping="Wrap" Text="{Binding Sender}" Style="{StaticResource PhoneTextLargeStyle}"/>

   5:             <TextBlock TextWrapping="Wrap" Text="{Binding Date}" Style="{StaticResource PhoneTextAccentStyle}"/>

   6:             <TextBlock TextWrapping="Wrap" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}"/>

   7:         </StackPanel>

   8:     </DataTemplate>

   9: </phone:PhoneApplicationPage.Resources>

When we run our application now the output should be similar to this. You can tap on the left side of the screen to select items in the list just like you can in the build in mail application.

messages1 messages2

It is pretty weird to have the Remove button visible when you’re not in selection mode of the MultiSelectList and the same thing goes for the Select button that’s still visible when the MultiSelectList is in selectionMode. To fix this we’ll bind the Visibility property of these ApplicationBarButtons to a boolean property that is also 2 way bound to the IsSelectionEnabled property of the MultiSelectList.

To do this we first need to add a boolean property to the ViewModel called IsInSelectionMode

   1: /// <summary>

   2: /// The <see cref="IsInSelectionMode" /> property's name.

   3: /// </summary>

   4: public const string IsInSelectionModePropertyName = "IsInSelectionMode";

   5:  

   6: private bool _isInSelectionMode = false;

   7:  

   8: /// <summary>

   9: /// Sets and gets the IsInSelectionMode property.

  10: /// Changes to that property's value raise the PropertyChanged event. 

  11: /// </summary>

  12: public bool IsInSelectionMode

  13: {

  14:     get

  15:     {

  16:         return _isInSelectionMode;

  17:     }

  18:  

  19:     set

  20:     {

  21:         if (_isInSelectionMode == value)

  22:         {

  23:             return;

  24:         }

  25:  

  26:         _isInSelectionMode = value;

  27:         RaisePropertyChanged(IsInSelectionModePropertyName);

  28:     }

  29: }

When we have this property we can bind the property to the IsSelectionEnabled property of the MultiSelectList. For some reason this can’t be done in Blend since the DataBinding button is greyed out but coding it in Xaml does work. The binding looks like this in Xaml

   1: <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}" IsSelectionEnabled="{Binding IsInSelectionMode, Mode=TwoWay}"/>

The Visibility property of the ApplicationBarButtons isn’t a boolean type so we’ll need a converter to convert the boolean to a Visibility Property. I’m using 2 converters here. 1 is converting the boolean value True to Visibility.Visible and the other converter is also an inverter and is converting True to Visibility.Collapsed.

   1: /// <summary>

   2: /// Converts a boolean to Visibililty

   3: /// </summary>

   4: ///[ValueConversion(typeof(bool), typeof(Visibility))]

   5: public class BooleanToVisibilityConverter : IValueConverter

   6: {

   7:     #region IValueConverter Members

   8:  

   9:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  10:     {

  11:         Visibility result = Visibility.Collapsed;

  12:  

  13:         bool val;

  14:  

  15:         if (value != null &&

  16:             bool.TryParse(value.ToString(), out val))

  17:         {

  18:             result = val ? Visibility.Visible : Visibility.Collapsed;

  19:         }

  20:  

  21:         return result;

  22:     }

  23:  

  24:     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  25:     {

  26:         //You can't convert back

  27:         return null;

  28:     }

  29:  

  30:     #endregion

  31: }

  32:  

  33:  

  34: /// <summary>

  35: /// Converts a boolean to Collapsed Visibililty

  36: /// </summary>

  37: ///[ValueConversion(typeof(bool), typeof(Visibility))]

  38: public class BooleanInverterToVisibilityConverter : IValueConverter

  39: {

  40:     #region IValueConverter Members

  41:  

  42:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  43:         {

  44:             Visibility result = Visibility.Collapsed;

  45:  

  46:             bool val;

  47:  

  48:             if (value != null &&

  49:                 bool.TryParse(value.ToString(), out val))

  50:             {

  51:                 result = val ? Visibility.Collapsed : Visibility.Visible;

  52:             }

  53:  

  54:             return result;

  55:         }

  56:  

  57:         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  58:         {

  59:             //You can't convert back

  60:             return null;

  61:         }

  62:  

  63:         #endregion

  64:     }

Lets Bind the boolean value using the converter to the ApplicationBarIcons. Your Xaml should look like this:

   1: <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}"/>

   2: <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanToVisibilityConverter}}"/>

If you run the application again you should be able to see the icons showing up and hiding at the correct times now.

To finish this sample and blogpost up we want the Select button to put the MultiSelectMode in selection mode and the remove button should remove the selected items. Lets start with the Select button. We’ll create a RelayCommand in the viewmodel that puts the MultiSelectList into selectionMode.

   1: private RelayCommand _messageListToSelectModeCommand;

   2:  

   3: /// <summary>

   4: /// Gets the MessageListToSelectModeCommand.

   5: /// </summary>

   6: public RelayCommand MessageListToSelectModeCommand

   7: {

   8:     get

   9:     {

  10:         return _messageListToSelectModeCommand

  11:             ?? (_messageListToSelectModeCommand = new RelayCommand(

  12:                 () =>

  13:                 {

  14:                     IsInSelectionMode = true;

  15:                 }));

  16:     }

  17: }

On the Select ApplicationBarButton we’ll add an EventToCommand behavior that will trigger this RelayCommand. I did this in Blend but the Xaml that is created will look like this:

   1: <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}">

   2:     <i:Interaction.Triggers>

   3:         <i:EventTrigger EventName="Click">

   4:             <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding MessageListToSelectModeCommand, Mode=OneWay}"/>

   5:         </i:EventTrigger>

   6:     </i:Interaction.Triggers>

   7: </Sh:AdvancedApplicationBarIconButton>

Running the application again will show us that using the select button puts the MultiSelectList in selectionmode so that part is finished. It only took 1 line of code in the relaycommand.

Removing the items is a bit more work since you can’t do a 2 way binding on the SelectedItems of a MultiSelectList because it is not a dependency property. The best way to get this working is setting up a property in the Viewmodel that is going to contain the selected items and update this list every time the selectionchanged event is fired by another EventToCommandBehavior that triggers a RelayCommand called SelectedMessagesChangedCommand. The SelectedMessagesChangedCommand will update the ViewModel property that will later be used to delete the items.

   1: /// <summary>

   2: /// The <see cref="SelectedMessages" /> property's name.

   3: /// </summary>

   4: public const string SelectedMessagesPropertyName = "SelectedMessages";

   5:  

   6: private ObservableCollection<Message> _selectedMessages = null;

   7:  

   8: /// <summary>

   9: /// Sets and gets the SelectedMessages property.

  10: /// Changes to that property's value raise the PropertyChanged event. 

  11: /// </summary>

  12: public ObservableCollection<Message> SelectedMessages

  13: {

  14:     get

  15:     {

  16:         return _selectedMessages;

  17:     }

  18:  

  19:     set

  20:     {

  21:         if (_selectedMessages == value)

  22:         {

  23:             return;

  24:         }

  25:  

  26:         _selectedMessages = value;

  27:         RaisePropertyChanged(SelectedMessagesPropertyName);

  28:     }

  29: }

  30:  

  31: private RelayCommand<IList> _selectedMessagesChangedCommand;

  32:  

  33: /// <summary>

  34: /// Gets the SelectedMessagesChangedCommand.

  35: /// </summary>

  36: public RelayCommand<IList> SelectedMessagesChangedCommand

  37: {

  38:     get

  39:     {

  40:         return _selectedMessagesChangedCommand

  41:             ?? (_selectedMessagesChangedCommand = new RelayCommand<IList>(ExecuteSelectedMessagesChangedCommand));

  42:     }

  43: }

  44:  

  45: private void ExecuteSelectedMessagesChangedCommand(IList parameter)

  46: {

  47:  

  48:     SelectedMessages = new ObservableCollection<Message>(parameter.Cast<Message>());

  49: }

Make sure the EventToCommand behavior is passing the SelectedItems as a command property. This can all be done in Blend but here is the Xaml that should be generated by Blend

   1: <i:Interaction.Triggers>

   2:     <i:EventTrigger EventName="SelectionChanged">

   3:         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SelectedMessagesChangedCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItems, ElementName=multiselectList}"/>

   4:     </i:EventTrigger>

   5: </i:Interaction.Triggers>

Now we have the selected messages in our viewmodel we can use our last RelayCommand called DeleteSelectedMessagesCommand to remove the selected messages.

   1: private RelayCommand _deleteSelectedMessagesCommand;

   2:  

   3: /// <summary>

   4: /// Gets the DeleteSelectedMessagesCommand.

   5: /// </summary>

   6: public RelayCommand DeleteSelectedMessagesCommand

   7: {

   8:     get

   9:     {

  10:         return _deleteSelectedMessagesCommand

  11:             ?? (_deleteSelectedMessagesCommand = new RelayCommand(

  12:                 () =>

  13:                 {

  14:                     foreach (Message m in SelectedMessages)

  15:                     {

  16:                         Messages.Remove(m);

  17:                     }

  18:                 }));

  19:     }

  20: }

This needs to be triggered again from an EventToCommand behavior attached to the remove ApplicationBarButton.

   1: <i:Interaction.Triggers>

   2:     <i:EventTrigger EventName="Click">

   3:         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding DeleteSelectedMessagesCommand, Mode=OneWay}"/>

   4:     </i:EventTrigger>

   5: </i:Interaction.Triggers>

We can run our application again and when you press the remove button the selected items should be removed.

This sample proves the SH WP AdvancedApplicationBar is working pretty good and it proves it has features that I didn’t get to work in the BindableApplicationBar for example the Visibility of the ApplicationBarButtons. I think I’m going to use this ApplicationBar more often in my projects.

Hopefully this sample is usefull for you to see what the SH WP ApplicationBar is up to or just to get an impression on how to work with a bit more advanced ApplicationBar scenario’s using MVVM.

Sourcecode for the sample project can be downloaded here

Happy Coding

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Silverlight Design Pattern: the Model View ViewModel (MVVM)

Hi There,

The Customer where I'm currently working at asked me if i could build him a Silverlight 2 app. I've been playing around with Silverilght quite a bit but i haven't really used any design patterns so i came to the idea to search the web if there are any specific Silverlight design patterns.

The only really big pattern i found was the MVVM Model View Viewmodel pattern. This isn't a completly new design pattern (Martin fowler calls it the Presentation Model Pattern)

If you know the MVC pattern which you probably do know this is somewhat alike. The model is your layer which connects to the data and the view is ofcourse xaml based in silverlight. So what does the ViewModel do? The viemodel is used to build specific models for each view in your silverlight app so you can have full advantage of the strong databinding in Silverlight.

There are quite some resources about this pattern which i'll link down here:

I'll be using this pattern at my current assignment and afterwards i'll blog about the results :)

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter