Nico's digital footprint

I grew up in the nineties, that makes me awesome by default

LLS SelectedItem binding through a behavior

by Nico

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.


Tags:

.Net | Devices | WP8 | XAML | Binding

First time MVP!

by Nico

The year 2014 started of with a bang for me. On January 1st I was very honored to receive this mail

Meaning I just became a Microsoft MVP in the field of Client Development. I’m joining some big names in that group, names like Gill Cleeren, Laurent Bugnion, Fons Sonnemans, Jesse Liberty and many more (for a complete list, see the MVP site)

The most mind blowing thing for me is that in a few months I’ll be able to go to the MVP summit and talk to these big guys that I’ve been looking up to for years.

Thank you Microsoft for the trust and the honor!


Tags:

Community | MVP

  Log in

About the author

Hi,

My name is Nico, I’m an MVP Windows Platform Development living in Belgium.
I’m currently employed as a .NET consultant at RealDolmen, one of Belgium’s leading IT single source providers.

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

Since June 2012 I'm a proud member of Microsoft's Extended Experts Team Belgium. And in February 2013 I became a member of DZone's Most Valuable Bloggers family.

In 2013 I became a book author and wrote "Windows 8 app projects, XAML & C# edition".

In 2014 I received the MVP award for the very first time.

I hope to get feedback from my readers either through comments, mail (nico_vermeir@hotmail.com), twitter, facebook, …

 

mvp

 

mvp

 

 

MeetLogo

 

MVBLogo

mybook

 

Month List