Nico Vermeir

Nico Vermeir

Hi, My name is Nico, I’m a Windows Development MVP living in Belgium. I’m currently employed as a Technical Consultant at Realdolmen, one of Belgium’s leading IT single source providers.

I'm also founding member and board member of the Belgian Modern App Developer Network, a user group focussed on modern application development. If you're in Belgium feel free to drop by if we're doing an event. http://www.madn.be

lls selecteditem binding through a behavior

Back in August I blogged about the ExtendedSelector, an extension of the LongListSelector that gave us a bindable SelectedItem property. A bit of a downside of this approach is that it’s basically a new control. Sure it inherits from the classic LLS underneath but it’s still another control in your XAML code.

Well, to fix this I’ve recreated the SelectedItem dependency property  through a behavior.

The behavior

Code Snippet
  1. public class SelectedItemBehavior : Behavior<LongListSelector>
  2. {
  3.     public readonly DependencyProperty SelectedItemProperty = DependencyProperty.Register(
  4.         "SelectedItem", typeof(object), typeof(SelectedItemBehavior), new PropertyMetadata(default(object)));
  5.  
  6.     public object SelectedItem
  7.     {
  8.         get { return GetValue(SelectedItemProperty); }
  9.         set { SetValue(SelectedItemProperty, value); }
  10.     }
  11.  
  12.     protected override void OnAttached()
  13.     {
  14.         AssociatedObject.SelectionChanged += AssociatedObjectOnSelectionChanged;
  15.  
  16.         base.OnAttached();
  17.     }
  18.  
  19.     protected override void OnDetaching()
  20.     {
  21.         AssociatedObject.SelectionChanged -= AssociatedObjectOnSelectionChanged;
  22.  
  23.         base.OnDetaching();
  24.     }
  25.  
  26.     private void AssociatedObjectOnSelectionChanged(object sender, SelectionChangedEventArgs args)
  27.     {
  28.         SelectedItem = args.AddedItems[0];
  29.     }
  30. }

It’s an easy one really. The behavior inherits from Behavior<LongListSelector> and has one dependency property. When the behavior gets attached to an LLS we attach the event handler to the SelectionChanged event. When detaching we cleanup by detaching the event handler.

When the SelectionChanged event fires we push the selected item into the dependency property.

Usage

Let’s throw together a quick little app to show the usage of the behavior. First the infamous Person class

Code Snippet
  1. public class Person
  2. {
  3.     public string Name { get; set; }
  4.     public int Age { get; set; }
  5. }

Next is the MainViewModel

Code Snippet
  1. public class MainViewModel : INotifyPropertyChanged
  2. {
  3.     private ObservableCollection<Person> _persons;
  4.     private Person _selectedPerson;
  5.  
  6.     public ObservableCollection<Person> Persons
  7.     {
  8.         get { return _persons; }
  9.         set
  10.         {
  11.             if (_persons == value) return;
  12.  
  13.             _persons = value;
  14.  
  15.             OnPropertyChanged();
  16.         }
  17.     }
  18.  
  19.     public Person SelectedPerson
  20.     {
  21.         get { return _selectedPerson; }
  22.         set
  23.         {
  24.             if (_selectedPerson == value) return;
  25.  
  26.             _selectedPerson = value;
  27.  
  28.             OnPropertyChanged();
  29.         }
  30.     }
  31.  
  32.     public MainViewModel()
  33.     {
  34.         Persons = new ObservableCollection<Person>();
  35.         Random rnd = new Random();
  36.  
  37.         for (int i = 0; i < 20; i++)
  38.         {
  39.             var person = new Person {Name = "Person " + i, Age = rnd.Next(0, 80)};
  40.  
  41.             Persons.Add(person);
  42.         }
  43.     }
  44.  
  45.     public event PropertyChangedEventHandler PropertyChanged;
  46.  
  47.     protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  48.     {
  49.         PropertyChangedEventHandler handler = PropertyChanged;
  50.         if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
  51.     }
  52. }

Two properties here, an observable collection that holds the persons and a SelectedPerson that will be bound to the dependency property on our behavior. The list of persons gets filled with some random data from the constructor.

Here’s the view

Code Snippet
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto" />
  4.         <RowDefinition Height="*" />
  5.     </Grid.RowDefinitions>
  6.  
  7.     <!--  TitlePanel contains the name of the application and page title  -->
  8.     <StackPanel x:Name="TitlePanel"
  9.         Grid.Row="0"
  10.         Margin="12,17,0,28">
  11.         <TextBlock Margin="12,0"
  12.             Style="{StaticResource PhoneTextNormalStyle}"
  13.             Text="MY APPLICATION" />
  14.         <TextBlock Margin="9,-7,0,0"
  15.             Style="{StaticResource PhoneTextTitle1Style}"
  16.             Text="page name" />
  17.     </StackPanel>
  18.  
  19.     <!--  ContentPanel - place additional content here  -->
  20.     <Grid x:Name="ContentPanel"
  21.         Grid.Row="1"
  22.         Margin="12,0,12,0">
  23.  
  24.         <Grid.RowDefinitions>
  25.             <RowDefinition Height="Auto" />
  26.             <RowDefinition Height="*" />
  27.         </Grid.RowDefinitions>
  28.         <TextBlock Grid.Row="0">
  29.             <Run Text="Selected person is " />
  30.             <Run Text="{Binding SelectedPerson.Age}" />
  31.             <Run Text=" years old" />
  32.         </TextBlock>
  33.         <phone:LongListSelector Grid.Row="1"
  34.             ItemsSource="{Binding Persons}">
  35.             <phone:LongListSelector.ItemTemplate>
  36.                 <DataTemplate>
  37.                     <Grid Margin="0, 12, 0, 0">
  38.                         <TextBlock Text="{Binding Name}" />
  39.                     </Grid>
  40.                 </DataTemplate>
  41.             </phone:LongListSelector.ItemTemplate>
  42.             <i:Interaction.Behaviors>
  43.                 <vm:SelectedItemBehavior SelectedItem="{Binding SelectedPerson, Mode=TwoWay}"/>
  44.             </i:Interaction.Behaviors>
  45.         </phone:LongListSelector>
  46.     </Grid>
  47. </Grid>

Let’s extract the LongListSelector from that page as that’s the important piece

Code Snippet
  1. <phone:LongListSelector Grid.Row="1"
  2.     ItemsSource="{Binding Persons}">
  3.     <phone:LongListSelector.ItemTemplate>
  4.         <DataTemplate>
  5.             <Grid Margin="0, 12, 0, 0">
  6.                 <TextBlock Text="{Binding Name}" />
  7.             </Grid>
  8.         </DataTemplate>
  9.     </phone:LongListSelector.ItemTemplate>
  10.     <i:Interaction.Behaviors>
  11.         <vm:SelectedItemBehavior SelectedItem="{Binding SelectedPerson, Mode=TwoWay}"/>
  12.     </i:Interaction.Behaviors>
  13. </phone:LongListSelector>

The ItemsSource is bound to the Persons ObservableCollection on the viewmodel. Underneath the ItemTemplate we attach the behavior and bind its property to the SelectedItem.

And that’s it, every time a person is selected from the LLS the SelectedPerson property gets updated on the viewmodel.

This is an imported post. It was imported from my old blog using an automated tool and may contain formatting errors and/or broken images.

Leave a Comment