This is a migrated thread and some comments may be shown as answers.
selected item TextCellTextColor not changing
5 Answers 77 Views
This is a migrated thread and some comments may be shown as answers.
Shalin
Top achievements
Rank 1
Shalin asked on 14 Feb 2018, 06:10 AM

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>

5 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 16 Feb 2018, 09:21 AM
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
0
Shalin
Top achievements
Rank 1
answered on 16 Feb 2018, 09:41 AM

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>

 

0
Stefan Nenchev
Telerik team
answered on 20 Feb 2018, 09:27 AM
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
0
Shalin
Top achievements
Rank 1
answered on 02 Mar 2018, 10:26 AM

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"/>
0
Stefan Nenchev
Telerik team
answered on 06 Mar 2018, 08:48 AM
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
Asked by
Shalin
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
Shalin
Top achievements
Rank 1
Share this question
or