selected item TextCellTextColor not changing in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

selected item TextCellTextColor not changing

5 Answers 77 Views

ListView

This is a migrated thread and some comments may be shown as answers.

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

answered on 16 Feb 2018, 09:21 AM

SelectedItemStyle.zip

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

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,

Text in this cell is not expanding its cell to text length automatically or wrapping
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>

answered on 20 Feb 2018, 09:27 AM

SelectedItemStyle.zip

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