Binding CheckBox.Visibility and CheckBox.IsChecked

Question

I'm developing a Windows Phone 8 application with a listbox with this datatemplate:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="LocalizationItemTemplate">
        <Border BorderBrush="Black" BorderThickness="2" CornerRadius="8" Background="#FF003847" Height="80">
            <StackPanel x:Name="contentGrid" Margin="4" Orientation="Horizontal">
                <CheckBox x:Name="selectedCheck" Visibility="{Binding CheckBoxVisibility}" IsChecked="{Binding IsChecked}"
                        HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center" IsEnabled="False"/>
                <TextBlock x:Name="locationName" TextWrapping="Wrap" Text="{Binding Content}" VerticalAlignment="Center" FontSize="24" HorizontalAlignment="Left" Margin="10,0,0,0"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

I'm using an ObservableCollection<LocationToShow> as ItemsSource :

public class LocationToShow : ARItem
{
    public double Distance { get; set; }

    public string FormatedDistance
    {
        get
        {
            if (Distance == double.NaN)
                return string.Empty;
            else
                return string.Format("{0} metros", Distance.ToString("N0"));
        }
    }

    public Visibility CheckBoxVisibility { get; set; }

    public bool IsChecked { get; set; }
}

But, when I change CheckBoxVisibility or IsChecked I don't see the checkbox appears or checked it.

How can I fix this problem?

Answer 1

LocationToShow or ARItem class need to implement INotifyPropertyChanged interface and each time view model property changes value you need to raise PropertyChanged event:

public event PropertyChangedEventHandler PropertyChanged;

private void NotifyPropertyChanged(String propertyName)
{
    var handler = PropertyChanged;
    if (handler != null)
        handler(this, new PropertyChangedEventArgs(propertyName));
}

private bool _isChecked;

public bool IsChecked 
{ 
    get { return _isChecked; }
    set
    {
        if (_isChecked != value)
        {
            _isChecked = value;
            NotifyPropertyChanged("IsChecked");
        }
    }
}

Answer 2

Implement INotifyPropertyChanged on your class LocationToShow to notify UI to update on any property change.

Refer to this - How to Implement INotifyPropertyChanged notification .

public class LocationToShow : ARItem, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    // Create the OnPropertyChanged method to raise the event 
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
           handler(this, new PropertyChangedEventArgs(name));
        }
     }

     private bool isChecked;
     public bool IsChecked 
     { 
         get { return isChecked; }
         set
         {
            if (isChecked != value)
            {
               isChecked = value;
               OnPropertyChanged("IsChecked");
            }
         }
     }
}

Change all other properties to follow the same pattern in case you want UI to refresh on any property change in your class.