LongListSelector not binding to datasource

Question

I am working on the wp8 app. One of the screens should have pivot. Two pivot items should contain LongListSelectors (same ItemTemplate, different ItemSource, but for this example same ItemSource).

<phone:PivotItem x:Name="piSite" Header="{Binding Path=LocalizedResources.FILTER_SITE, Source={StaticResource LocalizedStrings}}" Style="{StaticResource piStyleMaster}" FontFamily="{StaticResource PhoneFontFamilyNormal}">
    <phone:LongListSelector x:Name="lbSites" ItemTemplate="{StaticResource dtFilter}"/>
</phone:PivotItem>
<phone:PivotItem x:Name="piTags" Header="{Binding Path=LocalizedResources.FILTER_TAG, Source={StaticResource LocalizedStrings}}" Style="{StaticResource piStyleMaster}" FontFamily="{StaticResource PhoneFontFamilyNormal}">
    <phone:LongListSelector x:Name="lbTags" ItemTemplate="{StaticResource dtFilter}"/>
</phone:PivotItem>

Here is my DataTemplate for those lists:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="dtFilter">
        <Grid x:Name="grFilter">
            <CheckBox x:Name="cbFilter" Content="{Binding filterName}" IsChecked="{Binding isChecked}" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="{StaticResource ForegroundThemeBrush}" Foreground="{StaticResource ForegroundThemeBrush}"/>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

The model that I am using for data is :

public class CheckableFilter
{
    public string filterName;
    public bool isChecked;
}

And here is how I set the ItemSource:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var testItemSource = new ObservableCollection<CheckableFilter>
        {
            new CheckableFilter {filterName = "first name", isChecked = false},
            new CheckableFilter {filterName = "second name", isChecked = true},
            new CheckableFilter {filterName = "third name", isChecked = false},
            new CheckableFilter {filterName = "fourth name", isChecked = true},
            new CheckableFilter {filterName = "fifth name", isChecked = false}
        };
    lbSites.ItemsSource = testItemSource;
    lbTags.ItemsSource = testItemSource;
        base.OnNavigatedTo(e);
}

Btw, foreground and border colors of CheckBoxes are blue, background is white.

I get the proper number of elements, as you can see on the screenshot, which is shown with the correct number of boxes for check boxes. Problem is that there is no filterName (Content of the CheckBox).

If I exclude the binding for CheckBox content:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="dtFilter">
        <Grid x:Name="grFilter" DataContext="{Binding}">
            <CheckBox x:Name="cbFilter" Content="Test Value" IsChecked="{Binding isChecked}" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="{StaticResource ForegroundThemeBrush}" Foreground="{StaticResource ForegroundThemeBrush}"/>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

I get the following result:

What am I doing wrong so my binding is not working for CheckBox content in the LLS dataTemplate?

Answer 1

You have to change fields of CheckableFilter class to properties, because binding works only with properties.

public class CheckableFilter
{
    public string filterName { get; set; }
    public bool isChecked { get; set; }
}

It's also a good practice to name properties with a capital letter, but it's not necessary. However, if you're going to do it, remember to update these names in XAML.