selected item TextCellTextColor not changing

[Shalin]

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>

[Stefan Nenchev]

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

[Shalin]

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>

 

[Stefan Nenchev]

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

[Shalin]

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"/>

[Stefan Nenchev]

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