selected item TextCellTextColor not changing

6 posts, 0 answers
  1. Shalin
    Shalin avatar
    61 posts
    Member since:
    May 2015

    Posted 14 Feb 2018 Link to this post

    I have a listview same as styling example http://https//docs.telerik.com/devtools/xamarin/controls/listview/features/listview-features-styling

    But i need to change selected item background color to white and Text color to something else(let's say Red).

    Background color changed but not Text color. What am i doing wrong or any fix for this ?

    <telerikDataControls:RadListView.SelectedItemStyle>
                                  <telerikListView:ListViewItemStyle TextCellTextColor="Red" BackgroundColor="White" 
                                                                     BorderWidth="0"
                                                                     BorderLocation="None"/>                            </telerikDataControls:RadListView.SelectedItemStyle>
  2.
  3. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 16 Feb 2018 Link to this post

    Hello, Shalin,

    You are probably using a custom ItemTemplate for your RadListView which results in the behavior you are observing. When using custom templates, and respectively an element of your choice to display information regarding your items, the foreground color of this element is not automatically updated. You can set up additional logic to style it when it is selected. For example:

    <telerikDataControls:RadListView.ItemTemplate>
          <DataTemplate>
              <telerikListView:ListViewTemplateCell>
                  <telerikListView:ListViewTemplateCell.View>
                      <Grid Padding="3">
                          <Label Margin="10"
                                 Text="{Binding Name}"
                                 TextColor="{Binding IsSelected, Converter={StaticResource SelectedToColorConverter}}"/>
                      </Grid>
                  </telerikListView:ListViewTemplateCell.View>
              </telerikListView:ListViewTemplateCell>
          </DataTemplate>
      </telerikDataControls:RadListView.ItemTemplate>
    This will return different color based on the IsSelected property of your business object(you can add such):

    class SelectedToColorConverter : IValueConverter
       {
           public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
           {
               if ((bool)value == true)
               {
                   return Color.Green;
               }
               return Color.Gray;
           }
     
           public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
           {
               throw new NotImplementedException();
           }
       }

    And you can update the IsSelected item through the SelectionChanged event of the RadListView:

    private void listView_SelectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
            {
                if (e.NewItems != null && e.NewItems.Count > 0)
                {
                    (e.NewItems[0] as SourceItem).IsSelected = true;
                }
     
                if (e.OldItems !=null && e.OldItems.Count > 0)
                {
                    (e.OldItems[0] as SourceItem).IsSelected = false;
                }
     
            }

    Another approach is to use a custom ItemTemplateSelector and return different DataTemplates by checking what is the selected item of the RadListView.I have attached a sample that shows the second approach for your reference.

    Regards,
    Stefan Nenchev
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Shalin
    Shalin avatar
    61 posts
    Member since:
    May 2015

    Posted 16 Feb 2018 in reply to Stefan Nenchev Link to this post

    Thank you very much for your answer. This answer answered another question in my mind, But i am not referring custom item template in this question. it is about "<telerikListView:ListViewTextCell />".  

    Have more questions,

    1.  Text in this cell is not expanding its cell to text length automatically or wrapping
    2.  Can not change text color

    I 'll post sample code i am using

    <telerikDataControls:RadListView BackgroundColor="Green"
                                                            ItemsSource="{Binding EventStatusList}"                  
                                                            SelectionMode="Single">
                           <telerikDataControls:RadListView.ItemTemplate>
                               <DataTemplate>
                                   <telerikListView:ListViewTextCell Text="{Binding EventStatusDescription}" TextColor="White"/>
                               </DataTemplate>
                           </telerikDataControls:RadListView.ItemTemplate>
                           <!--<telerikDataControls:RadListView.ItemTemplate>
                               <DataTemplate>
                                   <telerikListView:ListViewTemplateCell>
                                       <telerikListView:ListViewTemplateCell.View>
                                           <Grid BackgroundColor="Transparent" Padding="2">
                                               <Frame CornerRadius="5" Padding="2" OutlineColor="Transparent"  BackgroundColor="{StaticResource BrandColorDarker}" >
                                                   <Label Text="{Binding EventStatusDescription}" Style="{StaticResource AppointmentViewLabelStyle}"
                                                      HorizontalOptions="FillAndExpand"
                                                      BackgroundColor="{StaticResource BrandColorDarker}"/>
                                               </Frame>
     
                                           </Grid>
     
                                       </telerikListView:ListViewTemplateCell.View>
                                   </telerikListView:ListViewTemplateCell>
                               </DataTemplate>
                           </telerikDataControls:RadListView.ItemTemplate>-->
     
                           <telerikDataControls:RadListView.LayoutDefinition>
                               <telerikListView:ListViewLinearLayout Orientation="Horizontal" HorizontalItemSpacing="0" />
                           </telerikDataControls:RadListView.LayoutDefinition>
     
                           <telerikDataControls:RadListView.ItemStyle>
                               <telerikListView:ListViewItemStyle BackgroundColor="Transparent" 
                                                                  BorderWidth="1"   
                                                                  BorderLocation="None"
                                                                  BorderColor="Transparent"/>
                           </telerikDataControls:RadListView.ItemStyle>
     
                           <telerikDataControls:RadListView.SelectedItemStyle>
                               <telerikListView:ListViewItemStyle TextCellTextColor="Green" BorderColor="White" 
                                                                      BorderWidth="2" BackgroundColor="White"
                                                                      BorderLocation="All"/>
                           </telerikDataControls:RadListView.SelectedItemStyle>
     
                           <telerikDataControls:RadListView.PressedItemStyle>
                               <telerikListView:ListViewItemStyle TextCellTextColor="{StaticResource BrandColor}"
                                                                      BorderColor="White" BorderWidth="5" BorderLocation="All"/>
                           </telerikDataControls:RadListView.PressedItemStyle>
                       </telerikDataControls:RadListView>

     

  7. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 20 Feb 2018 Link to this post

    Hi, Shalin,

    Thank you for the additional information. When testing with the ListViewTextCell, the behavior seems correct in Android and UWP. However, in iOS indeed there is a big spacing between the items and their width is equal. Still, using a ListViewTemplateCell instead of a ListViewTextCell seems to achieve the desired behavior. Please have a look at the attached sample. You can use the template cell in combination with one of the approaches I have provided in my original reply.

    Have a great rest of the week.

    Regards,
    Stefan Nenchev
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Shalin
    Shalin avatar
    61 posts
    Member since:
    May 2015

    Posted 02 Mar 2018 in reply to Stefan Nenchev Link to this post

    hi

    Now its working , problem was in item template. i added TextColor="White" in there. that should done on 'ItemStyle'

    But text wrapping is not working, in both android and ios, if i turn phone landscape text cells expanding nad showing content, not in portrait mode.

    <telerikListView:ListViewTextCell Text="{Binding EventStatusDescription}" TextColor="White"/>
  11. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 06 Mar 2018 Link to this post

    Hello, Shalin,

    Could you use the sample I have provided to show the exact behavior as I am not sure I understand the issue you are facing?

    Regards,
    Stefan Nenchev
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top