[Solved] Problems data binding TextBlock in RadDataBoundListBox control

[Robert]

I am having trouble binding a TextBlock in the ContentTemplate for a RadExpanderControl contained in the DataTemplate for a RadDataBoundListBox ItemTemplate.  The TextBlock is (supposed to be) bound to the FolderName field in the element being rendered from the ObservableCollection of SoundFolders the list box's ItemsSource property is bound to.

As a test, I created a test page with a regular ListBox with its ItemsSource bound to the SoundFolders property in my MVVM Light ViewModel.  The SoundFolders property is an ObservableCollection of SoundFolders.  This worked fine and each element in the list box showed the correct folder name.  But the page with my RadDataBoundListBox shows nothing in the TextBlock (no folder name).  I just see the Orange border I added to the data template for each element in the collection.

Why are the TextBlock elements blank in the RadDataBoundListBox? Below are the relevant XAML and C# source code snippets:

Note: I attached a converter named DebugStringConverter to the TextBlock to see what kind of object was coming into the DataTemplate at run-time.  I set a breakpoint on the Convert() method but it was never called.  Just to clarify, I had this problem before I added the converter so it's not the converter's fault.

XAML for the successful example using a regular ListBox

<phone:PhoneApplicationPage
    x:Class="CatAlarm_WP8.test1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="ItemTemplateForListBox">
            <Grid>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding FolderName}" VerticalAlignment="Top" FontFamily="Portable User Interface"/>
            </Grid>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
     <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource Locator}, Path=Main}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <ListBox x:Name="ListboxTest" FontFamily="Portable User Interface" ItemTemplate="{StaticResource ItemTemplateForListBox}" ItemsSource="{Binding SoundFolders}">

            </ListBox>
      </Grid>
    </Grid>
</phone:PhoneApplicationPage>

XAML (snippet) for the unsuccessful example using a RadDataBoundListBox and RadExpaderControl

   <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Main, Source={StaticResource Locator}}" >

       <Grid.RowDefinitions>

           <RowDefinition Height="Auto"/>

           <RowDefinition Height="83*"/>

           <RowDefinition Height="599*"/>

       </Grid.RowDefinitions>

 

       <!--TitlePanel contains the name of the application and page title-->

       <StackPanel Grid.Row="0" Margin="12,17,0,28">

           <TextBlock Text="Choose Alarm Sound" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="36" Tap="TextBlock_Tap"/>

       </StackPanel>

 

       <!--ContentPanel - place additional content here-->

       <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0" Grid.RowSpan="2"  >

           <telerikPrimitives:RadDataBoundListBox

               x:Name="listSounds" Loaded="listSounds_Loaded"

               ItemsSource="{Binding SoundFolders}" >

               <telerikPrimitives:RadDataBoundListBox.ItemTemplate>

                   <DataTemplate>

                       <telerikPrimitives:RadExpanderControl

                           Foreground="{StaticResource PhoneForegroundBrush}"

                           IsExpanded="True">

                           <telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>

                               <DataTemplate/>

                           </telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>

                           <telerikPrimitives:RadExpanderControl.ContentTemplate>

                               <DataTemplate>

                                   <Grid>

                                       <Grid.RowDefinitions>

                                           <RowDefinition/>

                                       </Grid.RowDefinitions>

                                       <Grid.ColumnDefinitions>

                                           <ColumnDefinition Width="Auto"/>

                                       </Grid.ColumnDefinitions>

                                       <Border

                                           Margin="3, 1, 5, 1"

                                           Grid.Row="1"

                                           BorderThickness="6, 1, 1, 1"

                                           Background="Orange"

                                           BorderBrush="{StaticResource PhoneAccentBrush}"/>

                                       <TextBlock

                                           Grid.ColumnSpan="1"

                                           Margin="25, 5, 25, 5"

                                           Text="{Binding FolderName, Converter={StaticResource DebugStringConverter}}"

                                           FontSize="{StaticResource PhoneFontSizeSmall}"

                                           FontFamily="Segoe WP SemiLight"/>

                                   </Grid>

                               </DataTemplate>

                           </telerikPrimitives:RadExpanderControl.ContentTemplate>

                           <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>

                               SNIPPED

                           </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>

                       </telerikPrimitives:RadExpanderControl>

                   </DataTemplate>

               </telerikPrimitives:RadDataBoundListBox.ItemTemplate>

           </telerikPrimitives:RadDataBoundListBox>

       </Grid>

       <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Current:" VerticalAlignment="Top" Margin="12,26,0,0" Grid.Row="1" FontSize="24"/>

       <TextBlock x:Name="txtCurrentAlarmSound" HorizontalAlignment="Left" TextWrapping="Wrap" Text="(none)" VerticalAlignment="Top" Margin="120,26,0,0" Grid.Row="1" FontSize="24" Foreground="#FFE0AC52"/>

   </Grid>

MainViewModel C# Code

   public class MainViewModel : ViewModelBase

  {

      public MainViewModel()

      {

          // Load the cat sounds.

          prepareData();

      }

      private ObservableCollection<SoundFolder> _listCatSounds;

 

      public ObservableCollection<SoundFolder> SoundFolders

      {

          get { return this._listCatSounds; }

          set { Set("SoundFolders", ref this._listCatSounds, value);}

      }

 

      /// Load the sounds.

      /// </summary>

      private void prepareData()

      {

          // Create the sound folders and load the child sound files for each folder.

          SNIPPED

      }

  } // public class MainViewModel : ViewModelBase

SoundFolder related classes

public class SoundFile

{

    public string FileName { get; set; }

    public string OwnerFolderName { get; set; }

 

    /// <summary>

    public SoundFile(string strOwnerFolderName, string strSoundFileName)

    {

        OwnerFolderName = strOwnerFolderName;

        FileName = strSoundFileName;

    }

}

 

public class SoundFolder : ViewModelBase

{

    private string _folderName = "(none)";

     public List<SoundFile> SoundFiles { get; set; }

 

    public string FolderName

    {

        get { return this._folderName; }

        set { Set("FolderName", ref this._folderName, value);}

    }

 

    public SoundFolder(string folderName)

    {

        FolderName = folderName;

        SoundFiles = new List<SoundFile>();

    }

 

    public void AddSoundFile(string strSoundFileName)

    {

        SoundFiles.Add(new SoundFile(FolderName, strSoundFileName));

    }

}

[Deyan]

Hello Robert,

Thanks for writing.

Using RadExpanderControl in RadDataBoundListBox requires implementing some specific things like additional IsExpanded property on your business entity and binding the Content and ExpandableContent properties to the DataContext of the parent container item. How this is done is described here:

http://www.telerik.com/help/windows-phone/radexpandercontrol-usingwithlistbox.html

Take a look at this article and let us know if we can further assist you.

Regards,
Deyan
Telerik

[Robert]

Thanks Deyan, that fixed.  Not sure how the app used to work a few months ago but adding the Content and ExpandableContent attributes to the DataTemplate fixed things quickly.

[Deyan]

Hi Robert,

We've actually upgraded RadExpanderControl a couple of releases ago. This all was noted in our Release Notes back then. It might have happened that you have recently updated to a newer version thus omitting the Release Notes announcement which was initially published.

Anyway. Good to hear it works. We will close this thread now.

Regards,
Deyan
Telerik