Problems data binding TextBlock in RadDataBoundListBox control

4 posts, 0 answers
  1. Robert
    Robert avatar
    5 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    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:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        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));
        }
    }



  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 22 Jan 2014 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Robert
    Robert avatar
    5 posts
    Member since:
    Jan 2014

    Posted 22 Jan 2014 Link to this post

    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.
  5. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 23 Jan 2014 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner