Property Binding using INotifyPropertyChanged and ObservableCollection

I was struggling against property binding using INotifyPropertyChanged and ObservableCollection.
Today, I introduce how to bind from properties in a class to UI properties by using INotifyPropertyChanged and ObservableCollection. And I'll show you the problem I encountered in next blog post.

• Sample code of property binding

I introduce a sample code binding from properties in ItemProperties class to TextBlock's properties in ListBox (One Way).

• The xaml code is here.

 <ListBox Height="595" ItemsSource="{Binding}" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="438">  
   <ListBox.ItemTemplate>  
     <DataTemplate>  
       <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">  
         <TextBlock x:Name="Name1" FontSize="35" Text="{Binding Text1}" Foreground="{Binding Color1}"/>  
         <TextBlock x:Name="Name2" FontSize="35" Text="{Binding Text2}" Foreground="{Binding Color2}"/>  
       </StackPanel>  
     </DataTemplate>  
   </ListBox.ItemTemplate>  
 </ListBox>  

- Point - 

You need to add ItemsSource="{Binding}" in ListBx to bind properties from code behind. You also should not add like ItemsSource="{Binding Collection}", just write "{Binding}".

When you use DataTemplate in ListBox, you can't write like this in code behind.

Name1.Foreground = new SolidColorBrush(Colors.LightGray);

So you need to bind from properties as a class to UI  properties. Almost all of UI element properties (ex. Foreground, Text, any more) are implemented as dependency property. You can bind from properties as a class to UI  properties using dependency property. You can't bind using usual property.

• The code behind is here.

 public partial class MainPage : PhoneApplicationPage  
 {  
   public ObservableCollection<ItemProperties> ItemCollection { get; private set; }  
   // Constructor  
   public MainPage()  
   {  
     InitializeComponent();  
     GetList();  
   }  

   public void GetList()  
   {  
     ItemCollection = new ObservableCollection<ItemProperties>();  
     ItemCollection.Add(new ItemProperties  
     {  
       Text1 = "test01",  
       Text2 = "test01",  
       Color1 = new SolidColorBrush(Colors.LightGray),  
       Color2 = new SolidColorBrush(Colors.Brown)  
     });  

     ItemCollection.Add(new ItemProperties  
     {  
       Text1 = "test02",  
       Text2 = "test02",  
       Color1 = new SolidColorBrush(Colors.Cyan),  
       Color2 = new SolidColorBrush(Colors.Red)  
     });  

     ItemCollection.Add(new ItemProperties  
     {  
       Text1 = "test03",  
       Text2 = "test03",  
       Color1 = new SolidColorBrush(Colors.Orange),  
       Color2 = new SolidColorBrush(Colors.Purple)  
     });  

     DataContext = ItemCollection;  
   }  
 }  

 public class ItemProperties : INotifyPropertyChanged  
 {  
   public event PropertyChangedEventHandler PropertyChanged;  
   public ItemProperties() { }  

   private string m_Text1;  
   public string Text1  
   {  
     get { return m_Text1; }  
     set  
     {  
       m_Text1 = value;  
       OnPropertyChanged("Text1");  
     }  
   }  

   private string m_Text2;  
   public string Text2  
   {  
     get { return m_Text2; }  
     set  
     {  
       m_Text2 = value;  
       OnPropertyChanged("Text2");  
     }  
   }  

   private Brush m_Color1;  
   public Brush Color1  
   {  
     get { return m_Color1; }  
     set  
     {  
       m_Color1 = value;  
       OnPropertyChanged("Color1");  
     }  
   }  

   private Brush m_Color2;  
   public Brush Color2  
   {  
     get { return m_Color2; }  
     set  
     {  
       m_Color2 = value;  
       OnPropertyChanged("Color2");  
     }  
   }  

   protected void OnPropertyChanged(string name)  
   {  
     PropertyChangedEventHandler handler = this.PropertyChanged;  
     if (handler != null)  
       handler(this, new PropertyChangedEventArgs(name));  
   }  
 } 

• Result