Binding with custom object for ListBox

Question

I am working on a WP8 project which needs to binding custom objects to a listbox item. Here is how I am doing it:

XAML file:

<ListBox x:Name="mMenuList">
    <ListBox.ItemTemplate>
         <DataTemplate>
            <StackPanel Orientation="Horizontal" Tap="OnMenuListItemTapped" DataContext="{Binding Dest}">
                <TextBlock Text="{Binding MenuTitle}" Visibility="Visible" FontSize="20" MaxWidth="350" HorizontalAlignment="Left"/>
                <Image Source="/Assets/img/search_next_icon.png" Width="20" Height="20" VerticalAlignment="Center" Visibility="{Binding Visibility}" HorizontalAlignment="Right" Tap="OnGotoChildIconTapped"/>
            </StackPanel>
         </DataTemplate>
     </ListBox.ItemTemplate>
</ListBox>

and a class for the data items:

public class PDFMenuItem
{
   private String _menuTitle;
   public String MenuTitle
   {
      get {  return _menuTitle; }
      set {  _menuTitle = value; }
   }

   private int _dest;
   public int Dest
   {
      get { return _dest;  }
      set { _dest = value; }
   }

   private Visibility _visibility;
   public Visibility Visibility
   {
     get { return _visibility; }
     set { _visibility = value; }
   }
}

Binding them together:

PDFMenuItem item = new PDFMenuItem();
item.MenuTitle = "Title";
item.Dest = "1";
item.Visibility = Visibility.Visible;
mMenuList.Items.Add(item);

With the implementation, data for StackPanel and Image can be bind correctly, but nothing was bind to the TextBlock. How should I correct this? I also tried to add all items into a list and set it to mMenuList.ItemsSource. Nothing changed.

B.R./Alex

Why are you using DataContext for your StackPanel and binding to Dest? — Rajeev Nair

Romasz Romasz · Accepted Answer · 2014-04-03T19:44:46

Once I've added a post which may help you - it is for LLS but works the same for ListBox.

ListBox which you are using usually works with Collections (for example List, ObservableCollection). You have defined your item class, ok, then make a collection of your items:

ObservableCollection<PDFMenuItem> myCol = new ObservableCollection<PDFMenuItem>();
// add some items:
myCol.Add( new PDFMenuItem { MenuTitle = "Title", Dest = "1", Visibility = Visibility.Visible });
// then set it as ItemsSource to your ListBox
mMenuList.ItemsSource = myCol;

Your XAML also needs a little modification:

<ListBox x:Name="mMenuList">
 <ListBox.ItemTemplate>
     <DataTemplate>
        <StackPanel Orientation="Horizontal" Tap="OnMenuListItemTapped">
            <TextBlock Text="{Binding MenuTitle}" Visibility="Visible" FontSize="20" MaxWidth="350" HorizontalAlignment="Left"/>
            <Image Source="/Assets/img/search_next_icon.png" Width="20" Height="20" VerticalAlignment="Center" Visibility="{Binding Visibility}" HorizontalAlignment="Right" Tap="OnGotoChildIconTapped"/>
        </StackPanel>
     </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

I've thrown away DataContext as it will be set automatically when you set ItemsSource. Of course it can be also done different ways (especially if you use MVVM pattern), but in your simple example should work.

When you use ObservableCollection your ListBox will be automatically updated when you Add/Remove items, but it won't update if you change some properties in them - for this purpose you will need to implement INotifyPropertyChanged - you will easily find many tutorials.

Binding with custom object for ListBox

1 Answers